update

backend/server.js

@@ -1,11 +1,10 @@
-const express = require('express')
 const http = require("http");
 const cors = require('cors');
+const express = require('express')
+const mongoose = require("mongoose")
 const { Server } = require("socket.io");
-const { log } = require('console');
 const userModel = require("./model/userDb")
 
-const mongoose = require("mongoose")
 
 const app = express();
 app.use(express.json())
@@ -15,28 +14,40 @@ mongoose.connect("mongodb+srv://sankhadiproy23:[email protected]
 
 const server = http.createServer(app);
 const io = new Server(server, {
+    pingTimeout: 60000,
     cors: {
-        origin: 'http://localhost:5173',
+        origin: (origin, callback) => {
+            const allowedOrigins = [
+                'https://0dab-2405-201-8011-60aa-b7c8-583e-3cf9-4ba2.ngrok-free.app',
+                'http://localhost:5173'
+            ];
+            if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
+                callback(null, true);
+            } else {
+                callback(new Error('Not allowed by CORS'));
+            }
+        },
+
         methods: ['GET', 'POST'],
     },
 });
 
-const onlineUsers = new Set()
+const onlineUsers = new Set();
 
 io.on("connection", (socket) => {
-    console.log(`User connected ${socket.id}`);
     onlineUsers.add(socket.id);
-    const userList = Array.from(onlineUsers);
-    io.emit('online-users', userList);
+    const usersList = Array.from(onlineUsers);
+    console.log(`✔ ${socket.id} :` + usersList); //log
+    io.emit('online-users', usersList);
     socket.on('send_message', (data) => {
-        console.log("Data:", data);
+        // console.log("Data:", data); //log
         io.emit('recive_message', data);
     });
 
     socket.on('disconnect', () => {
-        console.log('User disconnected');
         onlineUsers.delete(socket.id);
         const usersList = Array.from(onlineUsers);
+        console.log(`✘ ${socket.id} :` + usersList) //log
         io.emit('online-users', usersList);
     });
 });
@@ -63,6 +74,4 @@ app.post("/register", (req, res) => {
         .catch(err => res.json(err))
 })
 
-server.listen(3001, () => {
-    console.log(`Example app listening on port 3001`);
-});
+server.listen(3001, () => console.log('Server is running on port 3001'));

frontend/src/atom/onlineUsersAtom.js

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const onlineUsersData = atom({
+    key: 'onlineUsersList1',
+    default: [],
+})

frontend/src/components/Login.jsx

@@ -1,33 +1,29 @@
-import React, { useState, useMemo } from "react";
-import { Link } from "react-router-dom";
-import axios from 'axios'
-import { useNavigate } from "react-router-dom";
-
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import axios from 'axios';
 import { useRecoilState } from 'recoil';
 
-import { userloggedin } from '../atom/userAtom'
-
+import { userloggedin } from '../atom/userAtom';
 
 
-const Login = React.memo(() => {
+export default function Login() {
 
     const [email, setEmail] = useState()
     const [password, setPassword] = useState()
 
     const [user, setUser] = useRecoilState(userloggedin)
 
-
     const navigate = useNavigate()
 
     const handleSubmit = (e) => {
         e.preventDefault()
         axios.post("http://localhost:3001/login", { email, password })
             .then(result => {
-                // console.log(result)
+                // console.log(result) //log
                 if (result.data.stat === "Success") {
                     setUser(result.data.user);
                     navigate("/")
-                    // console.log(user);
+                    // console.log(user); //log
                     alert('login successful: ' + result.data.user) //using result.data.user instead of user because useRecoilState is a asyncronous function taking time in updating the user variable
                 } else {
                     navigate("/register")
@@ -84,5 +80,4 @@ const Login = React.memo(() => {
             </div>
         </div>
     );
-});
-export default Login;
+};

frontend/src/components/OnlineUsers.jsx

@@ -1,32 +1,35 @@
 import { io } from "socket.io-client";
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useRecoilState } from "recoil";
+import { onlineUsersData } from "../atom/onlineUsersAtom";
+
 const socket = io.connect("http://localhost:3001");
 
 const OnlineUsers = React.memo(() => {
-    const [onlineUsers, setOnlineUsers] = useState([]);
+    const [onlineUsersList, setOnlineUsersList] = useRecoilState(onlineUsersData);
 
     useEffect(() => {
         socket.on("online-users", (data) => {
-            setOnlineUsers(data);
+            setOnlineUsersList(data);
         });
         return () => {
-            socket.off("online-users");
+            socket.off("online-users"); //run before component removed from the ui
         };
-    }, []);
+    }, [onlineUsersList]); //tracking onlineUsers array
 
     const memoizedUsers = useMemo(() => {
-        return onlineUsers.map((user, index) => (
+        return onlineUsersList.map((user, index) => (
             <div key={index} className="">
                 {index + 1}.&nbsp;
                 <span>{user}</span>
             </div>
         ));
-    }, [onlineUsers]);
+    }, [onlineUsersList]);
 
     return (
         <>
             <div className="p-3 w-72">
-                <h3 className="font-bold pb-2">Online Users Socket Id [{onlineUsers.length}]</h3>
+                <h3 className="font-bold pb-2">Online Users Socket Id [{Math.floor(onlineUsersList.length / 2)}]</h3>
                 <div className="rounded-md  overflow-y-auto max-h-64" style={{
                     border: '1px solid black',
                     padding: '10px'