Building a Real-Time Collaborative Text Editor with Node.js and Socket.io

Introduction

Building a Real-Time Collaborative Text Editor with Node.js and Socket.io

Introduction

In the fast-paced world of software development, collaboration is key. Real-time collaborative tools have become essential in many applications, from coding environments to document editors. In this blog, we’ll create a real-time collaborative text editor using Node.js, Express, and Socket.io.

Prerequisites

Basic understanding of Node.js and Express.js.
Familiarity with React for the frontend.
A working Node.js environment.

Backend: Node.js Server

Step 1: Set Up the Project

Create a new project directory and initialize it:

mkdir collaborative-editor
cd collaborative-editor
npm init -y

Step 2: Install Dependencies

Install the required dependencies:

npm install express socket.io

Step 3: Create `server.js`

Create a file named server.js in your project directory and add the following code:

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
    console.log('New client connected');

    socket.on('editorChange', (data) => {
        socket.broadcast.emit('editorChange', data);
    });

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Frontend: React Application

Step 1: Set Up the React Project

Create a new React project using Create React App:

npx create-react-app collaborative-editor-frontend
cd collaborative-editor-frontend

Step 2: Install Socket.io Client

Install the Socket.io client to enable real-time communication between the frontend and the backend:

npm install socket.io-client

Step 3: Create the Editor Component

Create a new file named Editor.js in the src directory and add the following code:

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import './Editor.css';

const socket = io.connect('http://localhost:3000');

const Editor = () => {
  const [content, setContent] = useState('');

  useEffect(() => {
    socket.on('editorChange', (data) => {
      setContent(data);
    });

    return () => {
      socket.off('editorChange');
    };
  }, []);

  const handleChange = (e) => {
    const newContent = e.target.value;
    setContent(newContent);
    socket.emit('editorChange', newContent);
  };

  return (
    <div id="editor-container">
      <textarea
        id="editor"
        value={content}
        onChange={handleChange}
      />
    </div>
  );
};

export default Editor;

Step 4: Style the Editor Component

Create a Editor.css file in the src directory and add the following styles:

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

#editor-container {
  width: 600px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 5px;
}

#editor {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border-radius: 5px;
}

Step 5: Update the App Component

Modify the App.js file to include the Editor component:

import React from 'react';
import Editor from './Editor';
import './App.css';

function App() {
  return (
    <div className="App">
      <Editor />
    </div>
  );
}

export default App;

Step 6: Run Both the Backend and Frontend

Make sure your backend server is running:

node server.js

Start your React application:

npm start

Conclusion

You have now built a real-time collaborative text editor with a Node.js backend and a React frontend. This tool allows multiple users to edit a document simultaneously, with changes reflected in real-time for all connected clients. Such collaborative tools are becoming increasingly important in various applications, from coding environments to document editing.

Code Intel Hub

Building a Real-Time Collaborative Text Editor with Node.js and Socket.io

Building a Real-Time Collaborative Text Editor with Node.js and Socket.io