diff --git a/backend/server.js b/backend/server.js index a45de26..1633b9e 100644 --- a/backend/server.js +++ b/backend/server.js @@ -16,11 +16,8 @@ const io = new Server(server, { io.on("connection", (socket) => { console.log(`User connected ${socket.id}`); - - // Handle 'send_message' event socket.on('send_message', (data) => { - console.log(`Received message: ${data.message}`); - // Broadcast the message to all connected clients + console.log("Data:", data); io.emit('recive_message', data); }); diff --git a/frontend/README.md b/frontend/README.md deleted file mode 100644 index f768e33..0000000 --- a/frontend/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# React + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..9840dee 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,13 +1,16 @@ - - - - - Vite + React - - -
- - - + + + + + + chat + + + +
+ + + + \ No newline at end of file diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/frontend/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 62e6481..7d3c291 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,8 +1,8 @@ import { io } from "socket.io-client"; import { useState, useEffect } from 'react' import './App.css' -const socket = io.connect("http://localhost:3001"); +const socket = io.connect("http://localhost:3001"); function App() { const [username, setusername] = useState(''); @@ -10,26 +10,22 @@ function App() { const [data_rcv, setdata_rcv] = useState([]); const sendMessage = () => { - socket.emit('send_message', { - username: username, - message: msg - }); - } - useEffect(() => { - try { - socket.on("recive_message", (data) => { - setdata_rcv((state) => [ - ...state, - { - username: data.username, - message: data.message - } - ]) + if (username && msg) { + socket.emit('send_message', { + username: username, + message: msg }); - } catch (error) { - console.log(error) + setmsg(''); } - }, [socket]) + } + useEffect(() => { + socket.on("recive_message", (data) => { + setdata_rcv((prevMessages) => [...prevMessages, data]); + }); + return () => { + socket.off("recive_message"); + }; + }, []); return ( <>
@@ -38,18 +34,22 @@ function App() { setmsg(e.target.value)} />
-
+

Chat Room

+
{data_rcv.map((msg, i) => ( -
- {i}. - {msg.username} : +
+ {i + 1}.  + {msg.username} :   {msg.message}
))}
-
+
) } -export default App +export default App; diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/frontend/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file