53 lines
1.7 KiB
Svelte
53 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { io } from 'socket.io-client';
|
|
import { onMount } from 'svelte';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import type { TypeMessage, TypeFullMessage } from '$lib';
|
|
import type { PageData } from './$types';
|
|
import { Input } from '$lib/components/ui/input/index';
|
|
import { Button } from '$lib/components/ui/button/index';
|
|
import Send from 'lucide-svelte/icons/send';
|
|
import Message from '$lib/components/message.svelte';
|
|
import { page } from '$app/state';
|
|
import Websocket from '$lib/clientWebsocket.svelte';
|
|
|
|
const { data }: { data: PageData } = $props();
|
|
|
|
let user: string = uuidv4();
|
|
let socket: Websocket | undefined = $state();
|
|
let msg: string = $state('');
|
|
const channel = $derived(page.params.channel);
|
|
|
|
// Connect on page load
|
|
onMount(() => {
|
|
socket = new Websocket(io());
|
|
socket.connect();
|
|
});
|
|
|
|
// Update channel on page refresh
|
|
$effect(() => {
|
|
if (socket) socket.updateChannel(channel);
|
|
});
|
|
</script>
|
|
|
|
{#snippet message(messages: TypeMessage[])}
|
|
{#each messages as message}
|
|
<Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
|
|
{/each}
|
|
{/snippet}
|
|
<div class="flex flex-1 flex-col items-center justify-center rounded-lg shadow-sm gap-1 h-full">
|
|
<div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden rounded-lg border w-full">
|
|
{@render message(socket?.messages!)}
|
|
{@render message(data.messages)}
|
|
</div>
|
|
<form
|
|
class="flex gap-1 w-full"
|
|
onsubmit={() => {
|
|
socket?.sendMessage(user!, msg);
|
|
msg = '';
|
|
}}>
|
|
<Input type="text" placeholder="Type Here" bind:value={msg} />
|
|
<Button class="h-9 w-14"><Send class="size-full" /></Button>
|
|
</form>
|
|
</div>
|