From 19e66750ad7695c657064e4cad7053593825a7c2 Mon Sep 17 00:00:00 2001 From: Bilal Dieumegard Date: Sun, 15 Dec 2024 01:48:00 +0100 Subject: [PATCH] Ajout des sockets pour les ecritures et connection dans les channels --- src/lib/components/Message.svelte | 6 +- src/lib/components/ui/UserChat.svelte | 14 ++-- src/lib/stores/socket.ts | 3 +- src/routes/chats/[id]/+page.server.ts | 13 +++- src/routes/chats/[id]/+page.svelte | 103 ++++++++++++++++++++++---- vite.config.ts | 64 +++++++++++++++- 6 files changed, 175 insertions(+), 28 deletions(-) diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte index 1aca2db..8522f81 100644 --- a/src/lib/components/Message.svelte +++ b/src/lib/components/Message.svelte @@ -4,7 +4,7 @@ import { onMount } from "svelte"; import ProfileInfo from "$lib/components/ui/ProfileInfo.svelte"; // Importer le composant ProfileInfo - export let myMessage: boolean; // Si c'est le message de l'utilisateur courant + export let userId: string; // Si c'est le message de l'utilisateur courant export let message = null; // Contenu du message @@ -13,6 +13,8 @@ let user = null; + let myMessage; + async function fetchUser() { const res = await fetch(`/api/users/${message.user.id}`, { method: 'GET', @@ -47,7 +49,7 @@ fetchUser(); updateElapsed(); // Calcul initial const interval = setInterval(updateElapsed, 1000); // Mise à jour toutes les secondes - + myMessage = message.user.id === userId; // Vérifier si c'est le message de l'utilisateur courant return () => { clearInterval(interval); // Nettoyage lors du démontage }; diff --git a/src/lib/components/ui/UserChat.svelte b/src/lib/components/ui/UserChat.svelte index e3c7c37..4b057be 100644 --- a/src/lib/components/ui/UserChat.svelte +++ b/src/lib/components/ui/UserChat.svelte @@ -1,20 +1,18 @@
Profile
- {username} + {user.username}
- {status} - {#if status === "En ligne"} + {user.state} + {#if user.state === "En ligne"} - {:else if status === "Writing"} + {:else if status === "Ecrit"} { const socketInstance = io("http://localhost:5173"); + let socketId = null; - return socketInstance; + return socketInstance } \ No newline at end of file diff --git a/src/routes/chats/[id]/+page.server.ts b/src/routes/chats/[id]/+page.server.ts index 540d66d..e35b2dc 100644 --- a/src/routes/chats/[id]/+page.server.ts +++ b/src/routes/chats/[id]/+page.server.ts @@ -7,18 +7,27 @@ export async function load({ fetch, params, locals }) { } }); const messages = await res.json(); + const resUser = await fetch(`/api/users/${locals.userId}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json' + } + }); + const user = await resUser.json(); return { messages, channelId: params.id, - userId: locals.userId + userId: locals.userId, + user: user } }catch (error) { console.error('Erreur lors du chargement des messages:', error); return { messages: [], channelId: params.id, - userId: locals.userId + userId: locals.userId, + user: {} }; } } \ No newline at end of file diff --git a/src/routes/chats/[id]/+page.svelte b/src/routes/chats/[id]/+page.svelte index 819917d..4256d7c 100644 --- a/src/routes/chats/[id]/+page.svelte +++ b/src/routes/chats/[id]/+page.svelte @@ -4,13 +4,16 @@ import PaperPlane from "svelte-radix/PaperPlane.svelte"; import Message from "$lib/components/Message.svelte"; import UserChat from '$lib/components/ui/UserChat.svelte'; - import { onMount, tick } from 'svelte'; + import { onMount, tick, onDestroy } from 'svelte'; import { initSocket } from '$lib/stores/socket'; import { ArrowLeft } from 'lucide-svelte'; export let data; export let messages = data.messages.messages; - export let users = data.users; + let user = data.user; + + const socket = initSocket(); // Initialiser le socket + let users= []; let isAtBottom = true; @@ -24,8 +27,6 @@ activeProfileId = id; } - let socket = initSocket(); // Initialiser le socket - async function sendMessage() { // Appel API pour envoyer le message const response = await fetch(`/api/channels/${data.channelId}/messages`, { @@ -69,7 +70,6 @@ if (response.ok) { const newMessages = await response.json(); - console.log(newMessages); if(newMessages.messages.length <= 0){ console.log('Pas d\'autres anciens messages'); return; @@ -108,6 +108,20 @@ } } + let stopWritingTimeout; + + function handleWriting() { + clearTimeout(stopWritingTimeout); + socket.emit('writing', { userId: data.userId, channelId: data.channelId }); + stopWritingTimeout = setTimeout(() => { + handleStopWriting(); + }, 2000); // Attendre 2 secondes d'inactivité avant d'émettre stop-writing + } + + function handleStopWriting() { + socket.emit('stop-writing', { userId: data.userId, channelId: data.channelId }); + } + async function scrollToBottom() { if (scrollContainer && isAtBottom) { await tick(); @@ -117,7 +131,7 @@ - onMount(() => { + onMount(async () => { if (scrollContainer) { const observer = new MutationObserver(async () => { await scrollToBottom(); @@ -138,12 +152,70 @@ } }); + onDestroy(() => { + socket.emit('leave-channel', { userId: data.userId, channelId: data.channelId }); + socket.disconnect(); // Déconnexion propre du socket + }); + // Ecoute des événements socket socket.on("new-message", async (message) => { - messages = [...messages , message ]; + messages = [...messages, message]; // Ajouter le message à l'historique await tick(); }); + socket.on("load-users-channel", async (us) => { + users = us; + await tick(); + }); + + socket.on("connect", () => { + socket.emit('new-user-join', { user:{ ...user, socketId:socket.id, state:"En ligne" }, channelId: data.channelId }); + }); + + socket.on('user-writing', async (userId) => { + console.log('user-writing reçu pour userId:', userId); + + // On met à jour l'état de l'utilisateur + users = users.map((u) => { + if (u.id === userId) { + // Mettre à jour le state + return { ...u, state: "Ecrit" }; // On recrée l'objet pour garantir la réactivité + } + return u; + }); + + // On recrée une nouvelle référence du tableau `users` + users = [...users]; // Cela force Svelte à détecter le changement dans la liste + + console.log('Utilisateurs après mise à jour de l\'état:', users); + + // Forcer une mise à jour avec tick + await tick(); + }); + + socket.on('user-stop-writing', async (userId) => { + console.log('user-stop-writing reçu pour userId:', userId); + + // On met à jour l'état de l'utilisateur + users = users.map((u) => { + if (u.id === userId) { + // Mettre à jour le state + return { ...u, state: "En ligne" }; // On recrée l'objet pour garantir la réactivité + } + return u; + }); + + // On recrée une nouvelle référence du tableau `users` + users = [...users]; // Cela force Svelte à détecter le changement dans la liste + + console.log('Utilisateurs après mise à jour de l\'état:', users); + + // Forcer une mise à jour avec tick + await tick(); + }); + + +
@@ -154,11 +226,9 @@

Utilisateurs

- {#each users as user} + {#each users as u (u.id)} {/each}
@@ -178,7 +248,7 @@ {#if messages !== undefined && messages.length > 0} {#each messages as message}
-