Real Time Messaging with Socket.IO in NodeJS using WebSockets

WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. It allows for real-time, bi-directional communication between a server and clients. In this tutorial, we will be using Node.js and Socket.IO to implement WebSocket in a Node.js application for real-time messaging.

Prerequisites

Before we get started, make sure you have Node.js and npm installed on your system.

Installing Socket.IO

Socket.IO is a JavaScript library that enables real-time, bidirectional and event-based communication. To install Socket.IO, run the following command in your terminal:

npm install socket.io

Creating a WebSocket Server

To create a WebSocket server in Node.js using Socket.IO, follow these steps:

1. Create a new Node.js project by running the following command in your terminal:

   mkdir websocket-example
   cd websocket-example
   npm init -y

2. Create a new JavaScript file, server.js, and open it in your code editor.

3. Import the required modules at the beginning of your server.js file:

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

4. Create an Express app and a HTTP server:

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

5. Create a Socket.IO server and attach it to the HTTP server:

   const io = socketIo(server);

6. Now, you can listen to connection events and handle messages in your Socket.IO server:

   io.on('connection', (socket) => {
   console.log('A user connected');
   
   socket.on('message', (data) => {
   console.log('Message received:', data);
   
   // Broadcast the message to all connected clients
   io.emit('message', data);
   });
   
   socket.on('disconnect', () => {
   console.log('A user disconnected');
   });
   });

7. Start the server and listen on a port (e.g., 3000):

   
   const PORT = 3000;

server.listen(PORT, () => {
console.log(Server running on port ${PORT});
});

### Creating a WebSocket Client
To create a WebSocket client in Node.js using Socket.IO, follow these steps:

1. Create a new JavaScript file, `client.js`, and open it in your code editor.

2. Import the required modules and connect to the WebSocket server:
```javascript
const io = require('socket.io-client');
const socket = io('http://localhost:3000');

1. Listen to the message event and send messages to the server:

   
   socket.on('message', (data) => {
   console.log('Message received:', data);
   });

// Send a message to the server
socket.emit(‘message’, ‘Hello, world!’);

4. Run the client script using Node.js:
```bash
node client.js

Testing the WebSocket Connection

To test the WebSocket connection, open multiple instances of the client.js script in separate terminal windows. You should see the messages being sent and received in real-time between the clients.

Conclusion

In this tutorial, we covered how to create a WebSocket server and client using Node.js and Socket.IO for real-time messaging. WebSocket enables bi-directional communication between a server and clients, allowing for real-time updates and interactions in web applications. Socket.IO simplifies the implementation of WebSocket by providing a high-level API and handling the underlying WebSocket protocol details. Try experimenting with different events and message formats to build more complex real-time applications using WebSocket in Node.js.