bug fixed and improvement

same message is printing two times : fixed
sankhadip-roy · Apr 26, 2024 · d5b4ed7 · d5b4ed7
1 parent 878ba41
commit d5b4ed7
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 50 deletions.
diff --git 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
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>chat</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,35 +1,31 @@
 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('');
   const [msg, setmsg] = useState('');
 
   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 (
     <>
       <div className='App'>
@@ -38,18 +34,22 @@ function App() {
           <input type="text" placeholder='Write your message' value={msg} onChange={(e) => setmsg(e.target.value)} />
           <button onClick={sendMessage}>Send</button>
         </div>
-        <div>
+        <h3>Chat Room</h3>
+        <div style={{
+          border: '1px solid black',
+          padding: '10px'
+        }}>
           {data_rcv.map((msg, i) => (
-            <div>
-              {i}.
-              <span>{msg.username}</span> :
+            <div key={i}>
+              {i + 1}.&nbsp;
+              <span>{msg.username}</span> : &nbsp;
               <span>{msg.message}</span>
             </div>
           ))}
         </div>
-      </div>
+      </div >
     </>
   )
 }
 
-export default App
+export default App;
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg