From 70ebaa5fd33ef969de8a7a4935cb7c10a0529b89 Mon Sep 17 00:00:00 2001 From: kinou-p Date: Tue, 6 Jun 2023 13:35:46 +0200 Subject: [PATCH] chat work but no good css --- containers/api/src/app.controller.ts | 13 +- containers/api/src/chat/chat.service.ts | 7 + containers/chat/src/chat/chat.gateway.ts | 208 +++++++++++++++++- .../react/src/components/Messages/Chats.jsx | 107 +++++++-- 4 files changed, 308 insertions(+), 27 deletions(-) diff --git a/containers/api/src/app.controller.ts b/containers/api/src/app.controller.ts index a6a15525..99a90603 100644 --- a/containers/api/src/app.controller.ts +++ b/containers/api/src/app.controller.ts @@ -178,10 +178,17 @@ export class AppController { return await this.chatService.createMessage(message); } - @Post('/getMessage') - async getMessage(@Request() req, @Body() data: any) { + @Post('/member') + async getMember(@Body() data: any) { console.log(data); - console.log(req.query ) + console.log(`get member= ${data.convId}`); + return await this.chatService.findConv(data.convId); + } + + @Post('/getMessage') + async getMessage(@Body() data: any) { + console.log(data); + // console.log(req.query) console.log(`data get /conv= ${data.convId}`); // let test = {id: 2, members: "cc"}; diff --git a/containers/api/src/chat/chat.service.ts b/containers/api/src/chat/chat.service.ts index e05e3aa0..c86389bb 100644 --- a/containers/api/src/chat/chat.service.ts +++ b/containers/api/src/chat/chat.service.ts @@ -37,6 +37,13 @@ export class ChatService { return convs; } +async findConv(number: number){ + // username = "apommier" + console.log(`fincConv; ${number}`) + const conv = await this.chatRepository.findOneBy({id: number}) + return conv; +} + // Usage // const user = 'user1'; // findConvsContainingUser(user) diff --git a/containers/chat/src/chat/chat.gateway.ts b/containers/chat/src/chat/chat.gateway.ts index ff08265f..3e02713a 100644 --- a/containers/chat/src/chat/chat.gateway.ts +++ b/containers/chat/src/chat/chat.gateway.ts @@ -5,7 +5,13 @@ import { v4 as uuidv4 } from 'uuid'; @WebSocketGateway({ cors: true }) export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect { + @WebSocketServer() + server: Server; + private clients: Record = {}; + // private clientsNames: Record = {}; + private clientsNames: Map = new Map(); + // private games: Map = new Map();// Chat en cours, identifiées par un ID afterInit(server: Server) { @@ -15,30 +21,212 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa handleConnection(client: Socket, ...args: any[]) { console.log(`Client connected: ${client.id}`); + // console.log(`Client connected: ${args[0].username}`); - const clientId = uuidv4(); + // const clientId = args[0].username; + const clientId = client.id; this.clients[clientId] = client; - client.emit('chat:clientId', clientId); - + // client.emit('chat:clientId', clientId); console.log(`Total connected clients: ${Object.keys(this.clients).length}`); } handleDisconnect(client: Socket) { - console.log(`Client disconnected: ${client.id}`); + console.log(`Client want to deco: ${client.id}`); - const disconnectedClientId = Object.keys(this.clients).find(clientId => this.clients[clientId] === client); + // const disconnectedClientId = Object.keys(this.clients).find(clientId => this.clients[clientId] === client); + const disconnectedClientId = client.id if (disconnectedClientId) { + this.clientsNames.forEach((clientArray, clientName) => + { + // clientArray. + console.log(`Clients with name ${clientName}:`); + console.log(`array= ${clientArray}`) + console.log(`lenght= ${clientArray.length}`) + clientArray.forEach((targetClient, index) => + { + console.log(`index= ${index}`) + console.log(`lenght2= ${clientArray.length}`) + if (targetClient === disconnectedClientId) + { + console.log("find it") + console.log(`target= ${clientArray[index]}`) + // delete this.clientsNames[clientName][index]; + if (clientArray.length === 1) + { + console.log("delete true") + this.clientsNames.delete(clientName); + return + } + else + { + const newArray = clientArray.filter(item => item !== targetClient); + this.clientsNames.delete(clientName); + this.clientsNames.set(clientName, newArray); + } + // + // this.clientsNames[clientName].delete(index); + // else + + return ; + } + }); + }); delete this.clients[disconnectedClientId]; + // delete this.clientsNames; console.log(`Client disconnected: ${disconnectedClientId}`); console.log(`Total connected clients: ${Object.keys(this.clients).length}`); } } - - @SubscribeMessage('message') - handleMessage(client: any, payload: any): string { - return 'Hello world!'; + @SubscribeMessage('connection') + connectClient(client: any, payload: any): void { + console.log("connect client") + if (this.clientsNames.has(payload.username)) { + console.log("get it") + const clientArray = this.clientsNames.get(payload.username); // Retrieve the array + clientArray.push(client.id); // Add the new client to the array + } else { + console.log("create") + this.clientsNames.set(payload.username, [client.id]); // Create a new array with the new client as the value + } + // let clientLenght = Object.keys(this.clientsNames[payload.username]).length + // const clientArray = this.clientsNames.get(payload.username) + // let clientLenght = clientArray. + // console.log(`lenght= ${clientLenght}`) + + // this.clientsNames[payload.username][clientLenght] = this.clients[client.id]; + // console.log(`clients: ${Object.keys(this.clientsNames).length}`) + // this.clients[clientId] = client; + + //add a new client with socket and name for key + //payload.username } -} + + + // @SubscribeMessage('sendMessage') + // handleMessage(user: any, payload: any): void { + // console.log(`message recceveid: ${payload}`) + // console.log(`message recceveid: ${payload.sender}`) + // console.log(`message recceveid: ${payload.convId}`) + // console.log(`message recceveid: ${payload.members}`) + + // console.log(`client id: ${user.id}`) + + // this.clientsNames.forEach((clientArray, clientName) => { + // console.log(`Clients with name ${clientName}:`); + + // // clientArray.forEach((client) => { + // this.clientsNames[clientName] + // // .forEach(client => { + // // // if(client.id != user.id) + // // // { + // // console.log("send to someone") + // // console.log(client); // Perform actions on each client + // // // clients.emit('message', payload) + // // client.emit('message') + // // // } + // // }); + + // // .forEach((client) => { + // // if(client.id != user.id) + // // { + // // console.log("send to someone") + // // console.log(client); // Perform actions on each client + // // // clients.emit('message', payload) + // // client.emit('message') + // // } + // }); + // }; + + @SubscribeMessage('sendMessage') + handleMessage(client: Socket, payload: any): void { + // console.log(`message received: ${payload}`); + console.log(`message sender: ${payload.sender}`); + console.log(`client id: ${client.id}`); + console.log(`conversation ID: ${payload.convId}`); + console.log(`members: ${payload.members}`); + + this.clientsNames.forEach((clientArray, clientName) => + { + console.log(` 5Clients with name ${clientName}:`); + if (payload.members.includes(clientName)) + { + clientArray.forEach((targetClient, index) => + { + console.log(`client id: ${client.id}`); + console.log(`target: ${targetClient}`); + console.log(`target id: ${targetClient}`); + if (targetClient && targetClient !== client.id) + { + console.log("Sending to someone"); + console.log(`index= ${index}`); + console.log(`target: ${targetClient}`); // Perform actions on each target client + // targetClient.emit('message') + // this.clientsNames[clientName].emit('message') + // this.clientsNames["apommier"].emit('message') + this.clients[targetClient].emit('message', payload) + // console.log(test) + // console.log(test) + // this.clientsNames[clientName][index].emit('message'); + // const socket = this.server.sockets.sockets.get(targetClient.id); + // if (socket) { + // socket.emit('message', payload); + // } else { + // console.log(`Socket with ID ${client.id} not found.`); + // } + // targetClient.emit('message', payload); + // targetClient.emit('message', payload); + } + else { + console.log("not sending"); + } + }); + } + }); + } + + + } + + + + + // for (let key in this.clientsNames) { + // if (payload.members.includes(key)) { + // console.log("Key exists in the array"); + // // if (key !== payload.sender) + // // { + // for (let key2 in this.clientsNames[key]) + // { + // if (client.id !== this.clientsNames[key][key2]) + // { + // console.log("send to someone") + // this.clientsNames[key][key2].emit('message', payload) + // } + // } + // // } + // //if member socket different from mine + // //send + // } else { + // console.log("Key does not exist in the array"); + // } + //if key is in member + + // let socket = this.clients[key]; + // console.log("Clé:", key); + // console.log("Socket:", socket); + // } + // payload.convId // conv user instead ? + //find user to send message to + //const res = { + //convId: payload.convId + //sender: payload.sender + + // } + //while (user of conv)//how to get conv user + // if (user connected) + //send res to user +// } + diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx index 923eede9..3fafae0e 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import '../../styles/Messages.css' import styled from "styled-components"; import DefaultPic from '../../assets/profile.jpg' @@ -24,10 +24,10 @@ const UserChat = styled.div ` } ` -const SideSpan = styled.span` - font-size: 18px; - font-weight: 500; -` +// const SideSpan = styled.span` +// font-size: 18px; +// font-weight: 500; +// ` const SideP = styled.p` font-size: 14px; @@ -35,18 +35,40 @@ const SideP = styled.p` margin-left: 15px; ` -function Chats(){ +//======================================================================================================== +//======================================================================================================== +// Socket handler +//======================================================================================================== +//======================================================================================================== + + + +//======================================================================================================== +//======================================================================================================== +// Logical part +//======================================================================================================== +//======================================================================================================== + + +function Chats(){ + const [conversations, setConversation] = useState([]); - const [user, setUser] = useState([]); + const [user, setUser] = useState(null); const [currentChat, setCurrentChat] = useState(null); const [messages, setMessage] = useState([]); const [newMessages, setNewMessage] = useState(""); - const [socket, setSocket] = useState(null); + const [incomingMessage, setIncomingMessage] = useState(""); + const socket = useRef(); + + // Socket handler - useEffect(()=> { - setSocket(io("http://localhost:4001")); - }, []) + // socket.on('message', (data) => { //data should be a message ? + // console.log(`message received data= ${data}`) + // setMessage([...messages, data]); + // }); + + //End of socket handler useEffect(()=> { @@ -57,14 +79,59 @@ function Chats(){ console.log(convs); setUser(tmpUser); setConversation(convs.data); + // return tmpUser; + + + console.log(`tmpUser= ${tmpUser.data}`); + socket.current = io("http://localhost:4001"); + console.log(`connection....`); + socket.current.emit('connection', {username: tmpUser.data.username}) + // const socket = io("http://localhost:4001", { + // query: { + // username: user.data.username, + // },}); + socket.current.on('message', (data) => { //data should be a message ? + console.log(`message received data= ${data.sender}`) + console.log(`message received data= ${data.convId}`) + console.log(`message received data= ${data.sender}`) + console.log(`curretn chat = ${currentChat}`) + setIncomingMessage(data); + }); + } catch(err){ console.log(err); } }; getConv(); + }, []) + useEffect(()=> { + if (currentChat) + console.log(currentChat.id) + // console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`) + if (currentChat !== null && currentChat.id === incomingMessage.convId) + setMessage((prev) => [...prev, incomingMessage]); + }, [incomingMessage, currentChat]) + + // useEffect(()=> { + + // const getConv = async ()=>{ + // try{ + // const convs = await api.get("/conv") + // const tmpUser = await api.get("/profile") + // console.log(convs); + // setUser(tmpUser); + // setConversation(convs.data); + // } + // catch(err){ + // console.log(err); + // } + // }; + // getConv(); + // }, []) + useEffect(()=> { const getMessage = async ()=> { @@ -81,18 +148,30 @@ function Chats(){ getMessage() }, [currentChat]) + + const handleSubmit = async (e)=>{ e.preventDefault(); const message = { sender: user.data.username, text: newMessages, - convId: currentChat.id + convId: currentChat.id, + members: null }; try{ + console.log(`id= ${currentChat.id}`) const res = await api.post('/message', message); + const convMember = await api.post('/member', message); + message.members = convMember.data.members; + console.log(convMember); + // console.log(`currentChat= ${currentChat.id}`) + setMessage([...messages, res.data]); - } catch(err){ - + setNewMessage(""); + socket.current.emit('sendMessage', message); + } + catch(err){ + console.log(err) } }