Integrated Socket.io | Updated Readme.md

.env.example

@@ -3,5 +3,11 @@ REACT_APP_RAPID_API_KEY=
 REACT_APP_RAPID_API_URL=
 JUDGE0_SUBMISSION_URL=
 
-# Docker Compose Project Name (Optional) eg.custom_code_editor
 COMPOSE_PROJECT_NAME=my_project_name
+REACT_APP_BACKEND="https://webservice-nbbv.onrender.com"
+REACT_APP_FIREBASE_API_KEY=""
+REACT_APP_FIREBASE_AUTH_DOMAIN=""
+REACT_APP_FIREBASE_PROJECT_ID=""
+REACT_APP_FIREBASE_STORAGE_BUCKET=""
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
+REACT_APP_FIREBASE_APP_ID="

README.md

@@ -41,6 +41,24 @@ To Start project
 ```
 npm run start
 ```
+
+## Server is being hosted at render with domain name 
+https://webservice-nbbv.onrender.com
+## To set up the server 
+Inside root directory of the project run these commands
+```
+   cd server
+   npm install
+   node index.js
+```
+
+## Setting up the database 
+```
+Use your own mongodb connection uri and update in the index.js 
+```
+<p>Server would be running on port 5000</p>
+
+
 # With Docker
 ## Prerequisites
 Before starting with the project, ensure you have Docker installed. If not, follow these steps to install Docker:
@@ -118,6 +136,7 @@ REACT_APP_FIREBASE_PROJECT_ID=""
 REACT_APP_FIREBASE_STORAGE_BUCKET=""
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
 REACT_APP_FIREBASE_APP_ID=""
+REACT_APP_BACKEND=""
 ```
 
 ## Local Configuration

package.json

@@ -1,5 +1,4 @@
 {
-  "name": "CustomCodeEditor",
   "version": "stable",
   "private": true,
   "dependencies": {
@@ -10,7 +9,7 @@
     "@mui/material": "^6.1.1",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@snaddyvitch-dispenser/react-router-sitemap": "^1.2.6",
-    "CustomCodeEditor": "file:",
+    "axios": "^1.7.7",
     "firebase": "^10.14.0",
     "monaco-themes": "^0.4.4",
     "notistack": "^3.0.1",
@@ -19,6 +18,7 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "socket.io-client": "^4.8.0",
     "styled-components": "^6.1.11"
   },
   "scripts": {

server/.gitignore

@@ -0,0 +1 @@
+/node_modules

server/controllers/codeController.js

@@ -0,0 +1,36 @@
+const Code=require('../models/Code');
+
+const getCode=async(req,res)=>{
+    try{
+        const {id,language}=req.query;
+        console.log(decodeURIComponent(language));
+        const code=await Code.findOne({room:id,language:language});
+        if(!code){
+            let codeValue='';
+            if(language==='javascript'){
+                codeValue="console.log('Hello Worlds')";
+            }
+            else if(language==='python'){
+                codeValue="print('Hello World')";
+            }
+            else if(language==='java'){
+                codeValue="public class HelloWorld{public static void main(String[] args){System.out.println('Hello World');}}";
+            }
+            else if(language==="C++(Clang 7.0.1)"){
+                codeValue="#include<iostream>using namespace std;int main(){cout<<'Hello World'<<endl;return 0;}";
+            }
+            const newCode=await Code.create({
+                room:id,
+                language:language,
+                code:codeValue
+            })
+            return res.status(201).json({code:newCode});
+        }
+        return res.status(200).json({code});
+    }catch(err){
+        console.log(err);
+        return res.status(400).json({msg:"Error in fetching the code"})
+    }
+}
+
+module.exports={getCode};

server/controllers/roomController.js

@@ -0,0 +1,54 @@
+const Room = require('../models/Room');
+
+const createRoom = async (req, res) => {
+    const { roomName } = req.body;
+    if (!roomName ) return res.status(400).json({ msg: "Enter all Fields" });
+    try {
+        // add the user who has created this room automatically
+       // const user = req.user;
+        const newRoom = await Room.create({ roomName })
+        return res.status(200).json({ newRoom })
+    } catch (err) {
+        console.log(err);
+        res.status(500).json({ msg: "Error in creating room" });
+    }
+}
+
+const joinRoom = async (req, res) => {
+    const { roomId } = req.body;
+    try {
+        //const user = req.user;
+        const room = await Room.findById({ _id: roomId })
+        if (!room) return res.status(404).json({ msg: "Room not found" });
+
+        return res.status(200).json({ room });
+    } catch (err) {
+        console.log(err);
+        res.status(400).json({ msg: "Error in joining room" });
+    }
+}
+
+const getAllRoom=async(req,res)=>{
+    try {
+        const rooms = await Room.find({}).sort({ createdAt: -1 });;
+        return res.status(200).json({ rooms });
+    } catch (err) {
+        console.log(err);
+        res.status(400).json({ msg: "Error in getting all rooms" });
+    }
+}
+
+const getRoomById=async(req,res)=>{
+    try{    
+        const {id,language}=req.query
+        const room=await Room.findOne({_id:id,language:language});
+        if(!room) return res.status(404).json({ msg: "Room not found" });
+        return res.status(200).json({ room });
+    }catch(err){
+        console.log(err);
+        res.status(400).json({ msg: "Error in getting room by id" });
+    }
+}
+
+
+module.exports = { joinRoom, createRoom,getAllRoom,getRoomById }

server/index.js

@@ -0,0 +1,95 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const cookieParser = require('cookie-parser');
+const cors = require('cors');
+const http = require('http');
+const { Server } = require("socket.io");
+const Room = require('./models/Room');
+const Code = require('./models/Code')
+//routers
+
+const roomRouter = require('./routes/roomRoute');
+const codeRouter = require('./routes/codeRoute');
+
+const port = 5000;
+
+const app = express();
+const server = http.createServer(app);
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(cors({
+    origin: "http://localhost:3000",
+    credentials: true,
+    allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Authorization"]
+}));
+
+
+app.use('/api/room', roomRouter);
+app.use('/api/code',codeRouter);
+
+
+mongoose.connect("mongodb+srv://testing_node:[email protected]/customDb?retryWrites=true&w=majority&appName=Cluster0")
+    .then((success) => console.log("Connected to MongoDB"))
+    .catch(err => console.log("Error connecting"));
+
+server.listen(port, () => {
+    console.log(`Running on port ${port}`);
+})
+
+const io = new Server(server, {
+    cors: {
+        origin: "http://localhost:3000",
+        credentials: true,
+        allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Authorization"]
+    }
+})
+
+//Mapping room to the list of socket user
+let userRoomMap = new Map();
+let socketIdMap = new Map();
+
+
+io.on('connection', (socket) => {
+    console.log(`${socket.id} connected`);
+    socket.on('joinroom', async ({ roomId }) => {
+        if (!userRoomMap.get(roomId)) {
+            userRoomMap.set(roomId, [socket.id]);
+            socketIdMap.set(socket.id, roomId);
+            socket.join(roomId);
+        }
+        else {
+            const socketIds = userRoomMap.get(roomId);
+            if (!socketIds.includes(socket.id)) {
+                socketIds.push(socket.id);
+                socketIdMap.set(socket.id, roomId);
+                socket.join(roomId);
+            }
+        }
+        socket.emit('welcomeToRoom', { userlist: userRoomMap.get(roomId) })
+        //console.log(userRoomMap);
+    })
+
+    socket.on('codeChange', async ({ roomId, code, lang }) => {
+        const decodedLang=decodeURIComponent(lang);
+        await Code.findOneAndUpdate({ room: roomId,language:decodedLang},
+
+            { $set: { code: code } },
+            { new: true }
+        )
+        socket.to(roomId).emit('syncCode', { code });
+    })
+
+
+    socket.on('disconnect', async () => {
+
+        const roomId = socketIdMap.get(socket.id);
+
+        if (userRoomMap.get(roomId)) {
+            const arr = userRoomMap.get(roomId);
+            userRoomMap.set(roomId, arr.filter(id => id != socket.id))
+        }
+        //console.log(userRoomMap);
+    })
+})

server/models/Code.js

@@ -0,0 +1,18 @@
+const mongoose=require('mongoose');
+const CodeSchema=mongoose.Schema({
+    language:{
+        type:String,
+        required:true
+    },
+    code:{
+        type:String,
+    },
+    room:{
+        type:mongoose.Schema.Types.ObjectId,
+        ref:'Room'
+    }
+},{timestamps:true})
+
+const Code=mongoose.model('Code',CodeSchema);
+
+module.exports=Code;

server/models/Room.js

@@ -0,0 +1,13 @@
+const mongoose=require('mongoose');
+
+const RoomSchema=mongoose.Schema({
+    roomName:{
+        type:String,
+        required:true
+    },
+
+
+},{ timestamps: true })
+
+const Room=mongoose.model('Room',RoomSchema);
+module.exports= Room;