Real-Time Collaborative Editing App using React & WebSockets
Last Updated : 13 Mar, 2024
This article will explain about real-time collaborative editor which can be updated by multiple users at the same time. It explains how to do it using a web socket for example - socket.io and react hooks such as useState() and useEffect().
Output Preview: Let us have a look at how the final output will look like.
OUTPUT PREVIEW IMAGE OF COLLABORATIVE EDITORPrerequisites:
Approach to Create Real-Time Collaborative editor:
- Initialize a new node.js project, install express and set up basic express server
- Install socket.io for real time communication
- Use socket.io event listeners to handle all connection and disconnection
- Whenever there is any change in real time editor by client, broadcast it to all other clients
- Implement event handlers to broadcast formatting changes to all the clients
- Set up the new react app (steps are given below in this article)
- Install socket-io.client to connect with the server made using socket.io
- Implement a UI containing textarea and buttons for formatting and style
- Use event handlers to manage the content updation in the editor
- Wait for any updates from server and change the editor content accordingly
- Update the styles of the editor based on the changes received from the server
Steps to create backend -
Step 1: Create backend folder
mkdir backend
Step 2: Change the directory
cd backend
Step 3: Initialize the express app
npm init -y
Step 4: Make server.js file for backend
In this file import all the dependencies and create the server using socket.io
Step 5: Install the required dependencies for backend
npm install express cors socket.io nodemon
Project Structure(Backend):
PROJECT STRUCTURE FOR BACKENDUpdated Dependencies in package.json file for backend:
"dependencies": { "cors": "^2.8.5", "express": "^4.18.3", "nodemon": "^3.1.0", "socket.io": "^4.7.4" } Example: Below is the code example:
JavaScript // server.js (backend) const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const cors = require('cors'); const app = express(); app.use(cors()); const server = http.createServer(app); const io = socketIo(server, { cors: { origin: '*', methods: ['GET', 'POST'], credentials: true } }); io.on('connection', (socket) => { console.log('New client connected'); socket.on('edit', (content) => { io.emit('updateContent', content); }); socket.on('bold', (bold) => { io.emit('updateStyleBold', bold); }) socket.on('italic', (italic) => { io.emit('updateStyleItalic', italic); }) socket.on('underline', (underline) => { io.emit('updateStyleUnderline', underline); }) socket.on('disconnect', () => { console.log('Client disconnected'); }); }); const PORT = 5000; server.listen(PORT, () => console.log(`Server running on port ${PORT}`)); Steps to run backend:
nodemon server.js or node server.js
Output:
OUTPUT OF BACKEND CODESteps to Create Frontend -
Step 1: Create react app
npx create-react-app frontend
Step 2: Change the directory
cd frontend
Step 3: Install all the dependencies
npm install socket-io.client
Project Structure(Frontend):
PROJECT STRUCTURE FOR FRONTENDUpdated Dependencies in package.json for frontend -
"dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "socket.io-client": "^4.7.4" }, Example: Below is the code example
CSS .App { display: flex; flex-direction: column; align-items: center; padding: 20px; font-family: Arial, sans-serif; } h1 { margin-bottom: 20px; } .controls { display: flex; margin-bottom: 20px; } .controls button { margin-right: 10px; padding: 5px 10px; border: none; border-radius: 5px; background-color: darkslategray; color: white; cursor: pointer; } .controls button:hover { background-color: darkslategrey; } .controls select, .controls input[type="color"] { margin-right: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } .controls select:focus, .controls input[type="color"]:focus { outline: none; border-color: #007bff; } textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; resize: vertical; } textarea:focus { outline: none; border-color: cadetblue; } // App.js (frontend) import React, { useState, useEffect } from 'react'; import io from 'socket.io-client'; import './App.css'; const socket = io('http://localhost:5000'); function App() { const [content, setContent] = useState(''); const [bold, setBold] = useState(false); const [italic, setItalic] = useState(false); const [underline, setUnderline] = useState(false); useEffect(() => { socket.on('updateContent', (updatedContent) => { setContent(updatedContent); }); socket.on('updateStyleBold', (bold) => { setBold(bold); }); socket.on('updateStyleItalic', (italic) => { setItalic(italic); }); socket.on('updateStyleUnderline', (underline) => { setUnderline(underline); }); return () => { socket.off('updateContent'); }; }, [bold, italic, underline]); const handleEdit = (event) => { const updatedContent = event.target.value; setContent(updatedContent); socket.emit('edit', updatedContent); }; const handleBold = () => { if (!bold) { setBold(true); socket.emit('bold', true); } else { setBold(false); socket.emit('bold', false); } } const handleItalic = () => { if (!italic) { setItalic(true); socket.emit('italic', true); } else { setItalic(false); socket.emit('italic', false); } } const handleUnderline = () => { if (!underline) { setUnderline(true); socket.emit('underline', true); } else { setUnderline(false); socket.emit('underline', false); } } return ( <div className="App"> <h1>Real-time Collaborative Editor</h1> <div className='controls'> <button onClick={() => handleBold()}> BOLD </button> <button onClick={() => handleItalic()}> ITALIC </button> <button onClick={() => handleUnderline()}> UNDERLINE </button> </div> <textarea value={content} onChange={handleEdit} rows={10} cols={50} style={{ fontWeight: bold ? 'bold' : 'normal', fontStyle: italic ? 'italic' : 'normal', textDecoration: underline ? 'underline' : 'none' }} /> </div> ); } export default App; Steps to Run Frontend:
npm start
Output:
OUTPUT GIF FOR REAL-TIME COLLABORATIVE EDITOR Similar Reads
Real-time Updates with WebSockets and React Hooks
The WebSocket protocol provides continuous, real-time, full-duplex communication between a client and server over a single TCP socket connection. The WebSocket protocol has only two plans: opening a handshake and facilitating data transfer. After the server receives the handshake request sent by the
5 min read
Project Idea | Collaborative Editor Framework in Real Time
NOTE: Most of the contents are taken from Project Report.So you can also download it from drop box links are given down in (Following additional topics may also be provided) Block . Simply you can read it out . Collaborative Editor Framework in Real Time Introduction: A collaborative editor is a for
8 min read
Simple chat Application using Websockets with FastAPI
In this article, we'll delve into the concept of WebSockets and their role in facilitating bidirectional communication between clients and servers. Subsequently, we'll embark on the journey of building a real-time multi-client chat application. This application will empower numerous users to connect
6 min read
Create a Real-Time Weather Forecast App with React
Real-time weather forecast app with React involves integrating with a weather API to fetch weather data and display it in the UI. Individuals can use the app to check the current weather conditions, temperature, humidity, and other relevant weather data for their location or any city they are intere
5 min read
Real-Time Polling App with Node and React
In this article, we’ll walk through the step-by-step process of creating a Real-Time Polling App using NodeJS, ExpressJS, and socket.io. This project will showcase how to set up a web application where users can perform real-time polling. Preview of final output: Let us have a look at how the final
5 min read
Realtime chat app using Django
Chat Room has been the most basic step toward creating real-time and live projects. The chat page that we will create will be a simple HTML boilerplate with a simple h1 text with the name of the current user and a link to log out to the user who is just logged in. You may need to comment on the line
11 min read
Create a Video Editor using React
Video Editor is one of the useful apps in day-to-day life. In this article, we’ll walk you through the process of building a basic video editing app using React Native. The application enables users to upload, trim, and convert specific scenes to GIFs and then download the final edited file directly
6 min read
Create a News Reader app using React-Native
Creating the News Reader application using React-Native language is an exciting project. Using this project, the users can read the news in the application itself, by filtering them according to the categories as per their interest. In this article, we will develop the complete News Reader applicati
5 min read
Create a Text Editor App using React-Native
In this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor." Preview of final output: Let us have a look at
3 min read
Explain the Benefits and Challenges of Using WebSockets in Redux Applications.
WebSockets provide a full-duplex communication channel over a single TCP connection, allowing for real-time, bidirectional communication between the client and server. When integrated with a Redux application, WebSockets can enable continuous data updates and improve user experience by providing rea
5 min read