Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat work but no good css

Browse Source
This commit is contained in:
kinou-p 2023-06-06 13:35:46 +02:00
parent a5afd9d247
commit 70ebaa5fd3
4 changed files with 308 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
containers/api/src/app.controller.ts
View File

@ -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"};

7
containers/api/src/chat/chat.service.ts
View File

@ -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)

204
containers/chat/src/chat/chat.gateway.ts
View File

@ -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<string, Socket> = {};
// private clientsNames: Record<string, Socket[]> = {};
private clientsNames: Map<string, string[]> = new Map();
// private games: Map<string, Socket[]> = 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('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}`)
@SubscribeMessage('message')
handleMessage(client: any, payload: any): string {
return 'Hello world!';
// 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
// }

105
containers/react/src/components/Messages/Chats.jsx
View File

@ -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;
`
//========================================================================================================
//========================================================================================================
// 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();
useEffect(()=> {
setSocket(io("http://localhost:4001"));
}, [])
// Socket handler
// 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);
setMessage([...messages, res.data]);
} catch(err){
const convMember = await api.post('/member', message);
message.members = convMember.data.members;
console.log(convMember);
// console.log(`currentChat= ${currentChat.id}`)
setMessage([...messages, res.data]);
setNewMessage("");
socket.current.emit('sendMessage', message);
}
catch(err){
console.log(err)
}
}