Integrated backend for WebSocket and half-way done with frontend

client/package.json

@@ -19,11 +19,12 @@
     "express": "^4.21.1",
     "jsonwebtoken": "^9.0.2",
     "mailtrap": "^3.4.0",
-    "mongoose": "^8.7.0",
+    "mongoose": "^8.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
-    "react-toastify": "^10.0.6"
+    "react-toastify": "^10.0.6",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

client/src/main.jsx

@@ -12,3 +12,4 @@ createRoot(document.getElementById('root')).render(
     </BrowserRouter>
   </StrictMode>,
 )
+

client/src/pages/Chat.jsx

@@ -0,0 +1,131 @@
+// import React, { useState, useEffect } from 'react';
+// import { useWebSocket } from './websocket_client';
+
+// const Chat = ({ userID }) => {
+//   const [toUser, setToUser] = useState('');
+//   const [messageContent, setMessageContent] = useState('');
+//   const [messages, setMessages] = useState([]);
+//   const socket = useWebSocket();
+
+//   useEffect(() => {
+//     if (socket) {
+//       socket.onmessage = (event) => {
+//         const message = JSON.parse(event.data);
+//         if (message.error) {
+//           console.error("Error:", message.error);
+//         } else {
+//           setMessages((prev) => [...prev, message]);
+//         }
+//       };
+//     }
+//   }, [socket]);
+
+//   const sendMessage = () => {
+//     if (socket && toUser && messageContent) {
+//       const message = { from: userID, to: toUser, content: messageContent };
+//       socket.send(JSON.stringify(message));
+//       setMessageContent('');
+//     }
+//   };
+
+//   return (
+//     <div>
+//       <div>
+//         <label>To User ID:</label>
+//         <input
+//           type="text"
+//           value={toUser}
+//           onChange={(e) => setToUser(e.target.value)}
+//         />
+//       </div>
+//       <div>
+//         <label>Message:</label>
+//         <input
+//           type="text"
+//           value={messageContent}
+//           onChange={(e) => setMessageContent(e.target.value)}
+//         />
+//         <button onClick={sendMessage}>Send</button>
+//       </div>
+//       <div id="chatBox" style={{ border: '1px solid black', height: '300px', overflowY: 'scroll' }}>
+//         {messages.map((msg, index) => (
+//           <div key={index}>
+//             <strong>{msg.from}</strong>: {msg.content} <em>({new Date(msg.timestamp).toLocaleTimeString()})</em>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Chat;
+
+import React, { useState, useEffect } from 'react';
+
+const Chat = ({ userID }) => {
+  const [socket, setSocket] = useState(null);
+  const [toUser, setToUser] = useState('');
+  const [messageContent, setMessageContent] = useState('');
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    // Establish WebSocket connection
+    const ws = new WebSocket(`ws://localhost:8080?userID=${userID}`);
+    setSocket(ws);
+
+    ws.onopen = () => console.log("Connected to WebSocket server");
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      if (message.error) {
+        console.error("Error:", message.error);
+      } else {
+        setMessages((prev) => [...prev, message]);
+      }
+    };
+
+    ws.onclose = () => console.log("Disconnected from WebSocket server");
+
+    // Cleanup on component unmount
+    return () => ws.close();
+  }, [userID]);
+
+  const sendMessage = () => {
+    if (socket && toUser && messageContent) {
+      const message = { from: userID, to: toUser, content: messageContent };
+      socket.send(JSON.stringify(message));
+      setMessageContent('');
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <label>To User ID:</label>
+        <input
+          type="text"
+          value={toUser}
+          onChange={(e) => setToUser(e.target.value)}
+        />
+      </div>
+      <div>
+        <label>Message:</label>
+        <input
+          type="text"
+          value={messageContent}
+          onChange={(e) => setMessageContent(e.target.value)}
+        />
+        <button onClick={sendMessage}>Send</button>
+      </div>
+      <div id="chatBox" style={{ border: '1px solid black', height: '300px', overflowY: 'scroll' }}>
+        {messages.map((msg, index) => (
+          <div key={index}>
+            <strong>{msg.from}</strong>: {msg.content} <em>({new Date(msg.timestamp).toLocaleTimeString()})</em>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Chat;

client/src/pages/Login.jsx

@@ -84,7 +84,7 @@ function Login() {
         </div>
         <button type='submit'>Login</button>
         <span>Don't have an account?
-            <Link to="/register">Login</Link>
+            <Link to="/register">Sign up</Link>
         </span>
       </form>
       <ToastContainer />

client/websocket_client.js

@@ -0,0 +1,67 @@
+// // // 
+
+// // const userID = 'user1'; // unique user ID
+// // const socket = new WebSocket(`ws://localhost:8080?userID=${userID}`);
+
+// // socket.onopen = () => {
+// //   console.log("Connected to the WebSocket server");
+// // };
+
+// // socket.onmessage = (event) => {
+// //   const message = JSON.parse(event.data);
+
+// //   if (message.error) {
+// //     console.error("Error:", message.error);
+// //   } else {
+// //     displayMessage(message);
+// //   }
+// // };
+
+// // socket.onclose = () => {
+// //   console.log("Disconnected from WebSocket server"); // we can also add reconnection logic if needed
+// // };
+
+// // function sendMessage(to, content) {
+// //   const message = { from: userID, to, content };
+// //   socket.send(JSON.stringify(message));
+// // }
+
+// // function displayMessage(message) {
+// //   const chatBox = document.getElementById('chatBox');
+// //   const messageElement = document.createElement('div');
+// //   messageElement.innerText = `[${message.from}] ${message.content} (${new Date(message.timestamp).toLocaleTimeString()})`;
+// //   chatBox.appendChild(messageElement);
+// // }
+
+// // // Sending a message
+// // document.getElementById('sendButton').onclick = () => {
+// //   const toUser = document.getElementById('toUser').value;
+// //   const messageContent = document.getElementById('messageContent').value;
+// //   sendMessage(toUser, messageContent);
+// // };
+
+// import React, { createContext, useContext, useEffect, useState } from 'react';
+
+// const WebSocketContext = createContext();
+
+// export const WebSocketProvider = ({ userID, children }) => {
+//   const [socket, setSocket] = useState(null);
+
+//   useEffect(() => {
+//     const ws = new WebSocket(`ws://localhost:8080?userID=${userID}`);
+
+//     ws.onopen = () => console.log("Connected to WebSocket server");
+//     ws.onclose = () => console.log("Disconnected from WebSocket server");
+//     setSocket(ws);
+
+//     return () => ws.close();
+//   }, [userID]);
+
+//   return (
+//     <WebSocketContext.Provider value={socket}>
+//       {children}
+//     </WebSocketContext.Provider>
+//   );
+// };
+
+// export const useWebSocket = () => useContext(WebSocketContext);