How to use Socket.io for real-time communication in Node.js



Image not found!!

Socket.io is a popular library for real-time web applications. It enables bidirectional communication between clients and servers, allowing for real-time updates and interactions. Here's a step-by-step guide on how to use Socket.io for real-time communication in a Node.js application:

Step 1: Install Socket.io

You need to install the socket.io package. Open your terminal and run:

bash
npm install socket.io

Step 2: Set Up the Server

Create a Node.js server using Express and integrate Socket.io.

javascript
// server.js
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

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

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

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

  // Handle events here

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

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

Step 3: Set Up the Client

Create an HTML file that includes the Socket.io client library. This file can be served by the Express server.

html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.io Example</title>
</head>
<body>
  <h1>Hello, Socket.io!</h1>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    // Handle events here

  </script>
</body>
</html>

Step 4: Handling Events

In both the server and client, you can define custom events and handle them.

On the server side:

javascript
// Inside io.on('connection', ...)
socket.on('chat message', (msg) => {
  console.log('message: ' + msg);
  io.emit('chat message', msg); // Broadcast the message to all connected clients
});

On the client side:

javascript
// Inside the <script> tag in index.html
const messageForm = document.querySelector('form');
const messageInput = document.querySelector('#message');

messageForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const message = messageInput.value.trim();
  if (message !== '') {
    socket.emit('chat message', message); // Send the message to the server
    messageInput.value = '';
  }
});

socket.on('chat message', (msg) => {
  // Handle the received message
  console.log('Received message: ' + msg);
});

Step 5: Run Your Application

Start your Node.js server:

bash
node server.js

Open your browser and navigate to http://localhost:3000. Open multiple browser tabs or windows to simulate different clients. You should see real-time communication between them.

This is a basic example, and you can extend it to meet your specific requirements. Socket.io provides a powerful and flexible API for real-time communication in Node.js applications.

Category List