apsinghdev · Aug 20, 2024 · Aug 22, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 3, 2024
diff --git a/README.md b/README.md
@@ -2,12 +2,16 @@
 
 A real-time collaboration project to draw with your friends.
 
-![](./drawRTC.png)
+![Collaboration Demo](./collaboration.gif)
 
 ## Demo
 (click on the thumbnail below)
 
-[![Demo video](https://img.youtube.com/vi/74T8SncLnE8/maxresdefault.jpg)](https://youtu.be/74T8SncLnE8?si=T-uwfenkqrkfhn9q?autoplay=1)
+[![Demo video](./demoVideoThumbnail.jpeg)](https://youtu.be/HuAL1eiMnSw)
+
+### Note
+
+> Unfortunately, Vercel's free plan does not support WebSocket functionality, so I was unable to deploy the backend to production. To use the collaborative features of the app, you'll need to set up the application locally. The setup steps are provided below, and I've also included a demonstration video of the local setup process above. Thank you!
 
 ## Instructions
 

diff --git a/api/.dockerignore b/api/.dockerignore
@@ -0,0 +1,20 @@
+# Ignore node_modules
+node_modules
+
+# Ignore logs
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Ignore environment files
+.env
+
+
+# Ignore git files
+.git
+.gitignore
+
+# Ignore build artifacts
+dist
+build
+coverage
diff --git a/api/index.js b/api/index.js
@@ -27,26 +27,40 @@ app.get('/test', (res) => {
 })
 
 io.on('connection', (socket) => {
-    console.log('user connected socket')
+
+    socket.on('joinRoom', ({room_id}) => {
+        socket.join(room_id);
+        console.log(`User ${socket.id} joined room ${room_id}`);
+    })
+
     socket.on('draw', (data)=>{
-        socket.broadcast.emit('draw', data);
+        const room = data.room_id;
+        socket.to(room).emit('draw', data);
     })
 
-    socket.on('clear', () => {
-        io.emit('clear');
+    socket.on('clear', (data) => {
+        const room = data.room_id;
+        socket.to(room).emit('clear');
     })
 
     socket.on('open-text-editor', data => {
-        socket.broadcast.emit("open-text-editor", data);
+        const room = data.room_id;
+        socket.to(room).emit("open-text-editor", data);
     })
 
     socket.on('close-text-editor', data => {
-        socket.broadcast.emit("close-text-editor", data);
+        const room = data.room_id;
+        socket.to(room).emit("close-text-editor", data);
     })
 
     socket.on("text-updated", (data) => {
-      socket.broadcast.emit("text-updated", data);
+        const room = data.room_id;
+        socket.to(room).emit("text-updated", data);
     });
+
+    socket.on("disconnect", () => {
+        console.log(`${socket.id} disconnected`);
+    })
 })
 
 server.listen(PORT, ()=>{

diff --git a/client/.dockerignore b/client/.dockerignore
@@ -0,0 +1,20 @@
+# Ignore node_modules
+node_modules
+
+# Ignore logs
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Ignore environment files
+.env
+
+
+# Ignore git files
+.git
+.gitignore
+
+# Ignore build artifacts
+dist
+build
+coverage
diff --git a/client/index.html b/client/index.html
@@ -9,6 +9,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
-    <script src="./src/socket.js"></script>
   </body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -16,6 +16,7 @@
     "react-icons": "^5.2.0",
     "recoil": "^0.7.7",
     "socket.io-client": "^4.7.4",
+    "uuid": "^10.0.0",
     "y-socket.io": "^1.1.3",
     "yjs": "^13.6.15"
   },

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,24 +1,29 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState } from "react";
+import { io } from "socket.io-client";
 import "./App.css";
-import socket from "./socket";
-
+import InfoMsg from "./components/InfoMsg";
 import Sidebar from "./components/Sidebar";
 import Canvas from "./components/Canvas";
 import Menu from "./components/Menu";
 import EraserCursor from "./components/EraserCursor";
 import TextEditor from "./components/TextEditor";
-import { useRecoilValue, useRecoilState } from "recoil";
+import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import {
   eraserState,
   cursorPosition,
   canvasColors,
   canvasState,
   showMenuState,
   showTextEditor,
+  collaborationStarted,
+  showMsg,
+  roomIdAtom,
+  messageTxtAtom
 } from "./atoms";
+import { useSocket } from "./Context";
 
-socket.connect();
+const PORT = "http://localhost:8000"; 
 
 function App() {
   const [showMenu, setShowMenu] = useRecoilState(showMenuState);
@@ -32,7 +37,13 @@ function App() {
   const canvasColor = useRecoilValue(canvasColors);
   const [currentCanvas, setCanvas] = useRecoilState(canvasState);
   const textEditor = useRecoilValue(showTextEditor);
-
+  const setTextEditor = useSetRecoilState(showTextEditor);
+  const hasCollaborationStarted = useRecoilValue(collaborationStarted);
+  const setCollaborationFlag = useSetRecoilState(collaborationStarted);
+  const [showMessage, setShowMsg] = useRecoilState(showMsg);
+  const [roomId, setRoomId] = useRecoilState(roomIdAtom);
+  const { socket, setSocket } = useSocket();
+  const [ messageText, setMessageText ] = useRecoilState(messageTxtAtom);
 
   function toggleMenu() {
     setShowMenu(!showMenu);
@@ -76,7 +87,9 @@ function App() {
       const endX = e.clientX - canvas.getBoundingClientRect().left;
       const endY = e.clientY - canvas.getBoundingClientRect().top;
       drawLine(startX, startY, endX, endY, penColor);
-      socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth });
+      if (hasCollaborationStarted && socket) {
+        socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth, room_id: roomId });
+      }
       setStartX(endX);
       setStartY(endY);
     }
@@ -104,29 +117,31 @@ function App() {
       canvas.removeEventListener("mousedown", handleMousedown);
       canvas.removeEventListener("mouseup", handleMouseup);
     };
-  }, [penColor, eraserMode, position, ctx, isDrawing, startX, startY]);
+  }, [socket, penColor, eraserMode, position, ctx, isDrawing, startX, startY]);
 
   useEffect(() => {
-    socket.on("draw", (data) => {
-      drawLine(
-        data.startX,
-        data.startY,
-        data.endX,
-        data.endY,
-        data.penColor,
-        data.lineWidth
-      );
-    });
-
-    socket.on("clear", () => {
-      clearRect();
-    });
-
-    return () => {
-      socket.off("draw");
-      socket.off("clear");
-    };
-  }, [socket, ctx]);
+    if (hasCollaborationStarted && socket) {
+      socket.on("draw", (data) => {
+        drawLine(
+          data.startX,
+          data.startY,
+          data.endX,
+          data.endY,
+          data.penColor,
+          data.lineWidth
+        );
+      });
+
+      socket.on("clear", () => {
+        clearRect();
+      });
+
+      return () => {
+        socket.off("draw");
+        socket.off("clear");
+      };
+    }
+  }, [socket, ctx, hasCollaborationStarted]);
 
   function clearRect() {
     if (ctx) {
@@ -136,7 +151,10 @@ function App() {
 
   function clearOnClick() {
     clearRect();
-    socket.emit("clear");
+    if (hasCollaborationStarted && socket) {
+      const data = {room_id: roomId};
+      socket.emit("clear", data);
+    }
   }
 
   function addStroke(e) {
@@ -158,6 +176,90 @@ function App() {
     }
   }
 
+  const closeMsg = () => {
+    setMessageText(null);
+    setShowMsg(false);
+  }
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const roomID = urlParams.get("roomID");
+    const RETRIES = 5;
+    const DELAY_DURATION = 2000;
+    let attempts = 0;
+
+    const closeConnection = (socket) => {
+      if (attempts >= RETRIES) {
+        socket.disconnect();
+        setCollaborationFlag(false);
+        console.log("Max socket calls exceeded. Please try connecting again.")
+      }
+    }
+
+    if (roomID) {
+      const collaborationLink = window.location.href;
+      setRoomId(roomID);
+      setCollaborationFlag(true);
+      const newSocket = io(PORT);
+
+      try {
+        newSocket.on("connect", () => {
+          console.log("connected");
+          try {
+            newSocket.emit("joinRoom", { room_id: roomID });
+            console.log(`joined room ${roomID}`);
+            setSocket(newSocket);
+            setMessageText(`Collaboration Link : ${collaborationLink}`);
+            setShowMsg(true);
+          } catch (error) {
+            console.log("Can't join the room", error);
+          }
+        });
+
+        newSocket.on("connect_error", (error) => {
+          attempts++;
+          console.log("Failed to connect to the socket server. Retrying...")
+          setTimeout(() => closeConnection(newSocket), DELAY_DURATION);
+        })
+
+      } catch (error) {
+        console.log("Can't connect", error);
+      }
+    }
+  }, []);
+
+  // Hook to listen the events emitted by the server
+  useEffect(() => {
+    if (hasCollaborationStarted && socket) {
+      socket.on("open-text-editor", () => {
+        setTextEditor(true);
+      });
+
+      return () => {
+        socket.off("open-text-editor");
+      };
+    }
+  }, [showTextEditor, socket, hasCollaborationStarted]);
+
+  // Hook to display a message when someone opens the app through vercel's url
+  useEffect(() => {
+    const isVercel = window.location.hostname === "drawrtcbyajeet.vercel.app"
+    if (isVercel) {
+      setMessageText("Collaborative features require local installation. For more information, please visit our GitHub repository (linked in the menu).");
+      setShowMsg(true);
+    }
+  }, []);
+
+  // Hook to hide the menu when user click elsewhere on the screen
+  useEffect(() => {
+    const canvas = document.getElementById("canvas");
+    canvas.addEventListener("click", () => {
+      if (showMenu) {
+        setShowMenu(false);
+      }
+    })
+  }, [showMenu]);
+
   return (
     <div id="container">
       <Sidebar
@@ -172,6 +274,7 @@ function App() {
       {eraserMode && <EraserCursor></EraserCursor>}
       {showMenu && <Menu></Menu>}
       {textEditor && <TextEditor></TextEditor>}
+      {showMessage && <InfoMsg message={messageText} clickHandler={closeMsg}></InfoMsg>}
     </div>
   );
 }

diff --git a/client/src/Context.jsx b/client/src/Context.jsx
@@ -0,0 +1,20 @@
+import React, { createContext, useContext, useState } from 'react';
+
+// Create a Context for the socket
+const SocketContext = createContext(null);
+
+// Create a custom hook to use the SocketContext
+export const useSocket = () => {
+    return useContext(SocketContext);
+};
+
+// Create a provider component
+export const SocketProvider = ({ children }) => {
+    const [socket, setSocket] = useState(null);
+
+    return (
+        <SocketContext.Provider value={{ socket, setSocket }}>
+            {children}
+        </SocketContext.Provider>
+    );
+};