socket-io server refraction

.gitignore

@@ -18,6 +18,8 @@
 # misc
 .DS_Store
 
+/.vscode
+
 # debug
 .yarn
 npm-debug.log*

components/Chat/ChatHome.js

@@ -25,8 +25,10 @@ const ChatHome = () => {
      * Initializing socket
      * Handling socket events
      */
-    const initSocket = () => {
-        var socket = io();
+    const initSocket = async () => {
+        // initialize Socket-io server
+        await fetch("/api/socket");
+        let socket = io();
 
         const { CHAT_MESSAGE, ROOM_USERS } = SOCKET_EVENTS;
 

components/Chat/ChatSidePanel.js

@@ -27,7 +27,6 @@ const ChatSidebar = ({ roomUsers, isVisible }) => {
     return (
         <div
             className={`chat-sidebar secondary-bg col-sm-3 pt-3 pb-3 ${barAnimation} `}>
-            {/* <div className="row"> */}
             <div className="d-flex flex-column">
                 <h5 className="mb-3">
                     <i className="fa fa-home pr-2"></i>Room Name
@@ -54,13 +53,14 @@ const ChatSidebar = ({ roomUsers, isVisible }) => {
                 <h5 className="mt-3 mb-3">
                     <i className="fa fa-users pr-2"></i>Users
                 </h5>
-                <ul>
-                    {roomUsers.map((user) => {
-                        return <li key={user.id}>{user.username}</li>;
-                    })}
-                </ul>
+                {roomUsers?.length > 0 && (
+                    <ul>
+                        {roomUsers.map((user) => {
+                            return <li key={user.id}>{user.username}</li>;
+                        })}
+                    </ul>
+                )}
             </div>
-            {/* </div> */}
         </div>
     );
 };

package.json

@@ -11,8 +11,8 @@
     "scripts": {
         "format": "prettier \"*/**.{js,scss}\" --write",
         "build": "next build",
-        "start": "node server.js -p $PORT",
-        "dev": "node server.js",
+        "start": "next start",
+        "dev": "next",
         "test": "jest",
         "test:watch": "jest --watchAll"
     },
@@ -25,8 +25,8 @@
         "node-sass": "^4.14.1",
         "react": "16.13.1",
         "react-dom": "16.13.1",
-        "socket.io": "^2.4.0",
-        "socket.io-client": "^2.3.0"
+        "socket.io": "4.5.4",
+        "socket.io-client": "4.5.4"
     },
     "devDependencies": {
         "@babel/core": "^7.11.1",

pages/api/socket.js

@@ -0,0 +1,111 @@
+import { Server } from "socket.io";
+
+import { SOCKET_EVENTS } from "../../utils/Constants";
+import { Message, TextMessage } from "../../utils/Message";
+import {
+    addUser,
+    getCurrentUser,
+    removeUser,
+    getRoomUsers,
+} from "../../utils/user";
+
+const SocketHandler = (req, res) => {
+    if (res.socket.server.io) {
+        console.log("Socket is already running");
+    } else {
+        console.log("Socket is initializing");
+        const io = new Server(res.socket.server);
+        res.socket.server.io = io;
+
+        // Run when client connnects
+        io.on("connection", (socket) => {
+            const {
+                CHAT_MESSAGE,
+                JOIN_ROOM,
+                ROOM_USERS,
+                DISCONNECT,
+            } = SOCKET_EVENTS;
+
+            // joining room
+            socket.on(JOIN_ROOM, ({ username, room }) => {
+                socket.join(room);
+
+                // add user to users list
+                addUser(socket.id, username, room);
+
+                // sent to single client connected client
+                socket.emit(
+                    CHAT_MESSAGE,
+                    new TextMessage(
+                        "CHAT_BOT",
+                        `Welcome to Anomly ${username}!`,
+                        Message.BOT
+                    )
+                    // formatMessage(CHAT_BOT, `Welcome to Anomly ${username}!`)
+                );
+
+                // Broasdcast to all user except client when a user is joined
+                socket.broadcast
+                    .to(room)
+                    .emit(
+                        CHAT_MESSAGE,
+                        new TextMessage(
+                            "CHAT_BOT",
+                            `${username} has joined the room`,
+                            Message.BOT
+                        )
+                    );
+
+                // send room users info
+                io.to(room).emit(ROOM_USERS, {
+                    room: room,
+                    users: getRoomUsers(room),
+                });
+            });
+
+            /**
+             * listen chat Message
+             * @param  {SOCKET_EVENTS} CHAT_MESSAGE
+             * @param  {Message} message Instance of message class
+             */
+            socket.on(CHAT_MESSAGE, (message) => {
+                var cur_user = getCurrentUser(socket.id);
+
+                const { room } = cur_user;
+
+                // emit this message to everyone
+                io.to(room).emit(CHAT_MESSAGE, message);
+            });
+
+            // Broadcast
+            socket.on(DISCONNECT, () => {
+                var cur_user = getCurrentUser(socket.id);
+
+                if (cur_user) {
+                    const { id, username, room } = cur_user;
+                    // sent to all
+                    io.to(room).emit(
+                        CHAT_MESSAGE,
+                        // formatMessage(CHAT_BOT, `${username} has left the room`)
+                        new TextMessage(
+                            "CHAT_BOT",
+                            `${username} has left the room`,
+                            Message.BOT
+                        )
+                    );
+                    // remove user from list of current online users
+                    removeUser(id);
+
+                    // send room users info
+                    io.to(room).emit(ROOM_USERS, {
+                        room: room,
+                        users: getRoomUsers(room),
+                    });
+                }
+            });
+        });
+    }
+    res.end();
+};
+
+export default SocketHandler;

styles/chatSidepanel.scss

@@ -26,7 +26,7 @@
 
     .custom-tooltip-top {
         &::before {
-            @include tooltip-position($top: -15px);
+            @include tooltip-position($top: -30px);
         }
 
         .btn {