

Mastering Real-Time Collaboration: Building a Collaborative Editor with Socket.IO and React

Online collaboration is quickly becoming a must-have feature for modern web applications. As more teams work remotely, the ability to collaborate in real-time becomes increasingly important to stay productive and efficient. In this tutorial, we'll walk you through the process of building a collaborative editor using Socket.IO, React, and Express. This will enable users to simultaneously edit a document in real-time, making collaboration seamless and easy.

What is Socket.IO?

Socket.IO is a JavaScript library that enables real-time, bidirectional and event-based communication between web clients and servers. It makes it possible for the server to push data to clients in real-time and receive data back from them. This is especially useful for building real-time applications that requires live updates, such as collaborative editors.

Getting Started

Before we dive into coding our application, we need to make sure we have the necessary tools installed. In this tutorial, we'll be using Node.js and NPM to manage our dependencies, and we'll use create-react-app to bootstrap our React application. Make sure you have both of these tools installed before continuing with this tutorial.

To get started, let's create a new directory called “collaborative-editor” and inside it, open the terminal and run the following command to create a new React application:

npx create-react-app client

This will create a new React application in a folder called “client”, which we'll use as the frontend of our collaborative editor. We'll use Node.js and Express to build the backend of our application.

Now, let's create a new directory called “server” and navigate into it. Run the following command to initialize a new Node.js project:

npm init -y

This will create a new package.json file, which we'll use to manage our server-side dependencies.

Let's install the following dependencies:


  express
  socket.io
  cors


You can do this by running the following command:

npm install express socket.io cors

This installs Express, Socket.IO, and CORS as dependencies in our server-side application.

Creating Our Server-Side Application

Let's start by creating our server-side application. Create a new file called “index.js” in the “server” directory, and add the following code:


// Import the necessary node modules
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');

// Create a new express application
const app = express();

// Create a new http server using the express app
const server = http.createServer(app);

// Create a new socket.io server using the http server
const io = socketIo(server, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST']
  }
});

// Define a callback function for socket connections
io.on('connection', (socket) => {
  console.log('A new client has connected');
});

// Start the server listening on port 5000
server.listen(5000, () => {
  console.log('Server listening on port 5000');
});


This code imports the necessary modules, creates an Express application, creates an HTTP server using the Express application, and creates a Socket.IO server using the HTTP server. We also define a callback function for socket connections, which is called each time a new client connects to the server.

Before we start the server, we need to add a script to our package.json file. Open your package.json file and add the following line to the scripts object:

"start": "node index.js"

This will allow us to start our server by running the following command:

npm start

If you open your browser and go to http://localhost:5000, you should see a message in the console that says “Server listening on port 5000”.

Creating Our Frontend Application

Now that we have our server-side application running, let's create our frontend application. Navigate to the “client” directory and open the “src” folder. Create a new file called “App.js” and add the following code:


import React from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:5000');

function App() {
  return (
    
      Congratulations! You've successfully set up a React app with a Socket.IO client.
    
  );
}

export default App;


This code imports the necessary modules and creates a new Socket.IO instance that connects to the server that we created earlier. We then create a basic React component that displays a message indicating that we've successfully set up a React app with a Socket.IO client.

To ensure that everything is working as expected, let's run our React application by running the following command in the terminal:

npm start

This will start the development server and open up a new browser window at http://localhost:3000 showing our React application. If everything is working correctly, you should see the message we defined earlier.

Building Our Collaborative Editor

Now that we have our front and backends set up and communicating with each other, let's start building our collaborative editor. We'll create a component called “TextEditor” that will allow users to edit text in real-time and notify other users of changes.

Let's start by creating a new component called “TextEditor” and importing it into our App.js file. Inside our TextEditor component, we'll use a contenteditable HTML element to allow users to edit the text. We'll also add an event listener that listens for changes to the content of the element and emits those changes to the server via Socket.IO. Here's the code for our TextEditor component:


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

const socket = io('http://localhost:5000');

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

  useEffect(() => {
    // Add event listener for changes to the contenteditable element
    const textEditor = document.getElementById('text-editor');
    textEditor.addEventListener('input', handleInput);

    // Remove event listener when the component is unmounted
    return () => {
      textEditor.removeEventListener('input', handleInput);
    };
  }, []);

  const handleInput = (e) => {
    // Emit the new content to all connected clients
    socket.emit('contentChange', e.target.innerHTML);
  };

  const handleContentChange = (newContent) => {
    // Update the state with the new content received from the server
    setContent(newContent);
  };

  return (
    
  );
}

export default TextEditor;


Here, we're using the useState and useEffect hooks to manage the component's state and register an event listener for changes to the contenteditable element. When a change occurs, we emit the new content to all connected clients via Socket.IO.

We also define a callback function, handleContentChange(), that will update the component's state with the new content when it's received from the server. We'll define this callback function in our App.js file shortly.

Now that we have our TextEditor component set up, let's import it into our App.js file and define a callback function for handling content changes received from the server:


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

const socket = io('http://localhost:5000');

function App() {
  const [content, setContent] = useState('');

  useEffect(() => {
    // Define the callback for handling content changes
    socket.on('contentChange', handleContentChange);

    // Remove the event listener when the component is unmounted
    return () => {
      socket.off('contentChange', handleContentChange);
    };
  }, []);

  const handleContentChange = (newContent) => {
    // Update the state with the new content received from the server
    setContent(newContent);
  };

  return (
    
      
    
  );
}

export default App;


Here, we're defining a callback function, handleContentChange(), that will update our component's state with the new content received from the server via Socket.IO. We're also registering this callback function as an event listener for the 'contentChange' event. This way, when a change is made to the content of the TextEditor element, the component's state is updated and the new content is sent to the server via Socket.IO.

That's it! We've successfully created a collaborative editor using Socket.IO and React that enables users to simultaneously edit a document in real-time. If you open two windows and navigate to http://localhost:3000, you should be able to see updates made to the TextEditor element in one window reflected in the other window in real-time.

Conclusion

Collaboration and real-time updates are becoming increasingly important for modern web applications, and Socket.IO is an excellent tool for achieving these features. In this tutorial, we walked you through the process of building a collaborative editor using Socket.IO, React, and Express. We demonstrated how to set up a real-time communication channel between the server and the client and how to use this to enable multiple users to simultaneously edit a document in real-time.



<div>

<h2>Mastering Real-Time Collaboration: Building a Collaborative Editor with Socket.IO and React</h2>

<p>Online collaboration is quickly becoming a must-have feature for modern web applications. As more teams work remotely, the ability to collaborate in real-time becomes increasingly important to stay productive and efficient. In this tutorial, we'll walk you through the process of building a collaborative editor using Socket.IO, React, and Express. This will enable users to simultaneously edit a document in real-time, making collaboration seamless and easy.</p>

<h3>What is Socket.IO?</h3>

<p>Socket.IO is a JavaScript library that enables real-time, bidirectional and event-based communication between web clients and servers. It makes it possible for the server to push data to clients in real-time and receive data back from them. This is especially useful for building real-time applications that requires live updates, such as collaborative editors.</p>

<h3>Getting Started</h3>

<p>Before we dive into coding our application, we need to make sure we have the necessary tools installed. In this tutorial, we'll be using Node.js and NPM to manage our dependencies, and we'll use create-react-app to bootstrap our React application. Make sure you have both of these tools installed before continuing with this tutorial.</p>

<p>To get started, let's create a new directory called “collaborative-editor” and inside it, open the terminal and run the following command to create a new React application:</p>

<code>npx create-react-app client</code>

<p>This will create a new React application in a folder called “client”, which we'll use as the frontend of our collaborative editor. We'll use Node.js and Express to build the backend of our application.</p>

<p>Now, let's create a new directory called “server” and navigate into it. Run the following command to initialize a new Node.js project:</p>

<code>npm init -y</code>

<p>This will create a new package.json file, which we'll use to manage our server-side dependencies.</p>

<p>Let's install the following dependencies:</p>

<ul>
  <li>express</li>
  <li>socket.io</li>
  <li>cors</li>
</ul>

<p>You can do this by running the following command:</p>

<code>npm install express socket.io cors</code>

<p>This installs Express, Socket.IO, and CORS as dependencies in our server-side application.</p>

<h3>Creating Our Server-Side Application</h3>

<p>Let's start by creating our server-side application. Create a new file called “index.js” in the “server” directory, and add the following code:</p>

<code>
// Import the necessary node modules
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');

// Create a new express application
const app = express();

// Create a new http server using the express app
const server = http.createServer(app);

// Create a new socket.io server using the http server
const io = socketIo(server, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST']
  }
});

// Define a callback function for socket connections
io.on('connection', (socket) => {
  console.log('A new client has connected');
});

// Start the server listening on port 5000
server.listen(5000, () => {
  console.log('Server listening on port 5000');
});
</code>

<p>This code imports the necessary modules, creates an Express application, creates an HTTP server using the Express application, and creates a Socket.IO server using the HTTP server. We also define a callback function for socket connections, which is called each time a new client connects to the server.</p>

<p>Before we start the server, we need to add a script to our package.json file. Open your package.json file and add the following line to the scripts object:</p>

<code>"start": "node index.js"</code>

<p>This will allow us to start our server by running the following command:</p>

<code>npm start</code>

<p>If you open your browser and go to <code>http://localhost:5000</code>, you should see a message in the console that says “Server listening on port 5000”.</p>

<h3>Creating Our Frontend Application</h3>

<p>Now that we have our server-side application running, let's create our frontend application. Navigate to the “client” directory and open the “src” folder. Create a new file called “App.js” and add the following code:</p>

<code>
import React from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:5000');

function App() {
  return (
    <div>
      Congratulations! You've successfully set up a React app with a Socket.IO client.
    </div>
  );
}

export default App;
</code>

<p>This code imports the necessary modules and creates a new Socket.IO instance that connects to the server that we created earlier. We then create a basic React component that displays a message indicating that we've successfully set up a React app with a Socket.IO client.</p>

<p>To ensure that everything is working as expected, let's run our React application by running the following command in the terminal:</p>

<code>npm start</code>

<p>This will start the development server and open up a new browser window at <code>http://localhost:3000</code> showing our React application. If everything is working correctly, you should see the message we defined earlier.</p>

<h3>Building Our Collaborative Editor</h3>

<p>Now that we have our front and backends set up and communicating with each other, let's start building our collaborative editor. We'll create a component called “TextEditor” that will allow users to edit text in real-time and notify other users of changes.</p>

<p>Let's start by creating a new component called “TextEditor” and importing it into our App.js file. Inside our TextEditor component, we'll use a contenteditable HTML element to allow users to edit the text. We'll also add an event listener that listens for changes to the content of the element and emits those changes to the server via Socket.IO. Here's the code for our TextEditor component:</p>

<code>
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:5000');

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

  useEffect(() => {
    // Add event listener for changes to the contenteditable element
    const textEditor = document.getElementById('text-editor');
    textEditor.addEventListener('input', handleInput);

    // Remove event listener when the component is unmounted
    return () => {
      textEditor.removeEventListener('input', handleInput);
    };
  }, []);

  const handleInput = (e) => {
    // Emit the new content to all connected clients
    socket.emit('contentChange', e.target.innerHTML);
  };

  const handleContentChange = (newContent) => {
    // Update the state with the new content received from the server
    setContent(newContent);
  };

  return (
    <div id="text-editor" contentEditable="true" dangerouslySetInnerHTML={{ __html: content }}></div>
  );
}

export default TextEditor;
</code>

<p>Here, we're using the useState and useEffect hooks to manage the component's state and register an event listener for changes to the contenteditable element. When a change occurs, we emit the new content to all connected clients via Socket.IO.</p>

<p>We also define a callback function, <code>handleContentChange()</code>, that will update the component's state with the new content when it's received from the server. We'll define this callback function in our App.js file shortly.</p>

<p>Now that we have our TextEditor component set up, let's import it into our App.js file and define a callback function for handling content changes received from the server:</p>

<code>
import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import TextEditor from './TextEditor';

const socket = io('http://localhost:5000');

function App() {
  const [content, setContent] = useState('');

  useEffect(() => {
    // Define the callback for handling content changes
    socket.on('contentChange', handleContentChange);

    // Remove the event listener when the component is unmounted
    return () => {
      socket.off('contentChange', handleContentChange);
    };
  }, []);

  const handleContentChange = (newContent) => {
    // Update the state with the new content received from the server
    setContent(newContent);
  };

  return (
    <div>
      <TextEditor />
    </div>
  );
}

export default App;
</code>

<p>Here, we're defining a callback function, <code>handleContentChange()</code>, that will update our component's state with the new content received from the server via Socket.IO. We're also registering this callback function as an event listener for the 'contentChange' event. This way, when a change is made to the content of the TextEditor element, the component's state is updated and the new content is sent to the server via Socket.IO.</p>

<p>That's it! We've successfully created a collaborative editor using Socket.IO and React that enables users to simultaneously edit a document in real-time. If you open two windows and navigate to <code>http://localhost:3000</code>, you should be able to see updates made to the TextEditor element in one window reflected in the other window in real-time.</p>

<h3>Conclusion</h3>

<p>Collaboration and real-time updates are becoming increasingly important for modern web applications, and Socket.IO is an excellent tool for achieving these features. In this tutorial, we walked you through the process of building a collaborative editor using Socket.IO, React, and Express. We demonstrated how to set up a real-time communication channel between the server and the client and how to use this to enable multiple users to simultaneously edit a document in real-time.</p>

</div>

Learn how to create a collaborative editor using Socket.IO, React, and Express, enabling users to simultaneously edit a document in real-time.

Mastering Real-Time Collaboration: Building a Collaborative Editor with Socket.IO and React

Building Interactive Web Applications with WebSockets and Socket.IOWith the continuous development and advancement of the web, a high standard of user experiences is expected. One of the crucial aspects of a great experience is real-time communication between server and client-side. WebSockets and the popular library, Socket.IO, come to the rescue for these real-time and low latency use cases.In this tutorial, we will learn about the WebSocket protocol and how it works. We will then build a simple interactive web application using Node.js, Express, and Socket.IO.What are WebSockets?WebSocket is a communication protocol designed for bidirectional and full-duplex communication between a server and a client over a persistent connection. Typical web communication happens over HTTP protocol where the client sends a request to the server, and the server responds. With WebSocket, the server can also initiate communication with the client without waiting for the client's request, providing real-time updates and interactions.WebSocket connections are established through a process called a WebSocket handshake. The handshake is done over HTTP protocol, and once the connection is established, the communication switches to WebSocket protocol.Socket.IOSocket.IO is a library built on top of the WebSocket protocol, which makes it easier for developers to work with WebSockets. The library offers features such as auto-reconnecting, broadcasting, namespaces, and more. Socket.IO is platform-independent, and the server-side library is compatible with Node.js while the client-side library is compatible with all modern browsers.Let's Build an Interactive Web ApplicationFor this tutorial, we will build a simple real-time chat application using Node.js, Express, and Socket.IO. The chat application will allow multiple users to open the web page, enter their username, and send messages to the chatroom. Each message is broadcasted to all connected users in real-time, providing a great interactive experience.PrerequisitesBefore we start, make sure you have Node.js installed on your computer. Knowledge of basic Node.js, Express, JavaScript, and HTML/CSS is recommended but not mandatory.Create a new Node.js projectStart by creating a new directory for our chat app and initializing a new Node.js project:mkdir websocket-chat-cd websocket-chat-npm init -yThis will create a new package.json file. Next, we will install the required dependencies:npm install express socket.ioSetting up our Express serverCreate a new file called server.js in the project directory and add the following code:const express = require('express');const app = express();const http = require('http');const server = http.createServer(app);const { Server } = require('socket.io');const io = new Server(server);const PORT = process.env.PORT || 3000;app.use(express.static(__dirname + '/public'));server.listen(PORT, () => {console.log(`Server listening on port ${PORT}`);});The code above sets up an Express server to serve the static assets from /public directory, and it creates a new Socket.IO server that listens for the WebSocket connections.Creating the HTML structureCreate a new directory called public and inside it create a new file called index.html with the following content:&lt;!DOCTYPE html&gt;&lt;html lang='en'&gt;&lt;head&gt;  &lt;meta charset='UTF-8'&gt;  &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;  &lt;title&gt;WebSocket Chat&lt;/title&gt;  &lt;link rel='stylesheet' href='styles.css'&gt;&lt;/head&gt;&lt;body&gt;  &lt;div class='container'&gt;    &lt;h1&gt;WebSocket Chat&lt;/h1&gt;    &lt;p&gt;Enter your username:&lt;/p&gt;    &lt;input type='text' id='username'&gt;    &lt;button id='submit'&gt;Submit&lt;/button&gt;    &lt;div id='chat'&gt;      &lt;div id='messages'&gt;&lt;/div&gt;      &lt;input type='text' id='message'&gt;      &lt;button id='send'&gt;Send&lt;/button&gt;    &lt;/div&gt;  &lt;/div&gt;  &lt;script src='/socket.io/socket.io.js'&gt;&lt;/script&gt;  &lt;script src='script.js'&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;This creates the basic structure of our chat app. The user will first need to enter their username before they can start chatting. Add some basic CSS for styling in a new file called styles.css.The client-side JavaScriptCreate a new file called script.js inside the public directory and add the following code:document.addEventListener('DOMContentLoaded', () =&gt; {const socket=io();let username;document.querySelector('#submit').addEventListener('click', () =&gt; {username=document.querySelector('#username').value.trim();if(username){document.querySelector('#chat').style.display='block';document.querySelector('#username').disabled=true;document.querySelector('#submit').disabled=true;}});document.querySelector('#send').addEventListener('click', () =&gt; {const message=document.querySelector('#message').value.trim();if(message){socket.emit('sendMessage', {username, message});}});socket.on('receiveMessage', data =&gt; {const div=document.createElement('div');div.innerHTML=`${data.username}: ${data.message}`;document.querySelector('#messages').appendChild(div);});});This code handles the user interactions and sends the message to the server using the sendMessage event through Socket.IO. It also sets up an event listener for the message received from the server using the socket.on('receiveMessage', ...).Handling the message on the serverNow, let's handle the message on the server-side. Go back to your server.js file and add the following:io.on('connection', socket =&gt; {socket.on('sendMessage', data =&gt; {io.emit('receiveMessage', data);});});This code listens for the incoming sendMessage event and broadcasts the message to all connected clients using the receiveMessage event.Testing the applicationNow your application is complete. To test it, run the following command:node server.jsOpen the browser and visit localhost:3000. Test the chat application with multiple browser windows.ConclusionIn this tutorial, you've learned about the WebSocket protocol, Socket.IO library, and built an interactive chat application using WebSockets, Socket.IO, Node.js, and Express. You can further extend this application to add more features or build different applications such as real-time dashboards, gaming, and more.

<h1>Building Interactive Web Applications with WebSockets and Socket.IO</h1><p>With the continuous development and advancement of the web, a high standard of user experiences is expected. One of the crucial aspects of a great experience is real-time communication between server and client-side. WebSockets and the popular library, Socket.IO, come to the rescue for these real-time and low latency use cases.</p><p>In this tutorial, we will learn about the WebSocket protocol and how it works. We will then build a simple interactive web application using Node.js, Express, and Socket.IO.</p><h2>What are WebSockets?</h2><p>WebSocket is a communication protocol designed for bidirectional and full-duplex communication between a server and a client over a persistent connection. Typical web communication happens over HTTP protocol where the client sends a request to the server, and the server responds. With WebSocket, the server can also initiate communication with the client without waiting for the client's request, providing real-time updates and interactions.</p><p>WebSocket connections are established through a process called a WebSocket handshake. The handshake is done over HTTP protocol, and once the connection is established, the communication switches to WebSocket protocol.</p><h2>Socket.IO</h2><p>Socket.IO is a library built on top of the WebSocket protocol, which makes it easier for developers to work with WebSockets. The library offers features such as auto-reconnecting, broadcasting, namespaces, and more. Socket.IO is platform-independent, and the server-side library is compatible with Node.js while the client-side library is compatible with all modern browsers.</p><h2>Let's Build an Interactive Web Application</h2><p>For this tutorial, we will build a simple real-time chat application using Node.js, Express, and Socket.IO. The chat application will allow multiple users to open the web page, enter their username, and send messages to the chatroom. Each message is broadcasted to all connected users in real-time, providing a great interactive experience.</p><h3>Prerequisites</h3><p>Before we start, make sure you have <a href='https://nodejs.org/en/'>Node.js</a> installed on your computer. Knowledge of basic Node.js, Express, JavaScript, and HTML/CSS is recommended but not mandatory.</p><h3>Create a new Node.js project</h3><p>Start by creating a new directory for our chat app and initializing a new Node.js project:</p><pre><code>mkdir websocket-chat-cd websocket-chat-npm init -y</code></pre><p>This will create a new <code>package.json</code> file. Next, we will install the required dependencies:</p><pre><code>npm install express socket.io</code></pre><h3>Setting up our Express server</h3><p>Create a new file called <code>server.js</code> in the project directory and add the following code:</p><pre><code>const express = require('express');const app = express();const http = require('http');const server = http.createServer(app);const { Server } = require('socket.io');const io = new Server(server);const PORT = process.env.PORT || 3000;app.use(express.static(__dirname + '/public'));server.listen(PORT, () => {console.log(`Server listening on port ${PORT}`);});</code></pre><p>The code above sets up an Express server to serve the static assets from <code>/public</code> directory, and it creates a new Socket.IO server that listens for the WebSocket connections.</p><h3>Creating the HTML structure</h3><p>Create a new directory called <code>public</code> and inside it create a new file called <code>index.html</code> with the following content:</p><pre><code>&lt;!DOCTYPE html&gt;&lt;html lang='en'&gt;&lt;head&gt;  &lt;meta charset='UTF-8'&gt;  &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;  &lt;title&gt;WebSocket Chat&lt;/title&gt;  &lt;link rel='stylesheet' href='styles.css'&gt;&lt;/head&gt;&lt;body&gt;  &lt;div class='container'&gt;    &lt;h1&gt;WebSocket Chat&lt;/h1&gt;    &lt;p&gt;Enter your username:&lt;/p&gt;    &lt;input type='text' id='username'&gt;    &lt;button id='submit'&gt;Submit&lt;/button&gt;    &lt;div id='chat'&gt;      &lt;div id='messages'&gt;&lt;/div&gt;      &lt;input type='text' id='message'&gt;      &lt;button id='send'&gt;Send&lt;/button&gt;    &lt;/div&gt;  &lt;/div&gt;  &lt;script src='/socket.io/socket.io.js'&gt;&lt;/script&gt;  &lt;script src='script.js'&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</code></pre><p>This creates the basic structure of our chat app. The user will first need to enter their username before they can start chatting. Add some basic CSS for styling in a new file called <code>styles.css</code>.</p><h3>The client-side JavaScript</h3><p>Create a new file called <code>script.js</code> inside the <code>public</code> directory and add the following code:</p><pre><code>document.addEventListener('DOMContentLoaded', () =&gt; {const socket=io();let username;document.querySelector('#submit').addEventListener('click', () =&gt; {username=document.querySelector('#username').value.trim();if(username){document.querySelector('#chat').style.display='block';document.querySelector('#username').disabled=true;document.querySelector('#submit').disabled=true;}});document.querySelector('#send').addEventListener('click', () =&gt; {const message=document.querySelector('#message').value.trim();if(message){socket.emit('sendMessage', {username, message});}});socket.on('receiveMessage', data =&gt; {const div=document.createElement('div');div.innerHTML=`${data.username}: ${data.message}`;document.querySelector('#messages').appendChild(div);});});</code></pre><p>This code handles the user interactions and sends the message to the server using the <code>sendMessage</code> event through Socket.IO. It also sets up an event listener for the message received from the server using the <code>socket.on('receiveMessage', ...)</code>.</p><h3>Handling the message on the server</h3><p>Now, let's handle the message on the server-side. Go back to your <code>server.js</code> file and add the following:</p><pre><code>io.on('connection', socket =&gt; {socket.on('sendMessage', data =&gt; {io.emit('receiveMessage', data);});});</code></pre><p>This code listens for the incoming <code>sendMessage</code> event and broadcasts the message to all connected clients using the <code>receiveMessage</code> event.</p><h3>Testing the application</h3><p>Now your application is complete. To test it, run the following command:</p><pre><code>node server.js</code></pre><p>Open the browser and visit <a href='http://localhost:3000'>localhost:3000</a>. Test the chat application with multiple browser windows.</p><h2>Conclusion</h2><p>In this tutorial, you've learned about the WebSocket protocol, Socket.IO library, and built an interactive chat application using WebSockets, Socket.IO, Node.js, and Express. You can further extend this application to add more features or build different applications such as real-time dashboards, gaming, and more.</p>

In this tutorial, learn about the WebSocket protocol and how it works. Build a simple interactive web application using Node.js, Express, and Socket.IO, allowing real-time communication between server and client-side.