Skip to main content

WebSocket or Socket io in nodejs

The choice between using raw WebSockets and Socket.IO in Node.js depends on the specific requirements of the application and the developer's preferences.
WebSockets:
  • Nature: 
    WebSocket is a low-level communication protocol providing a full-duplex communication channel over a single TCP connection.
  • Performance: 
    Offers higher performance and lower latency due to minimal overhead and direct protocol implementation.
  • Control & Flexibility: 
    Provides more control over the connection lifecycle and allows for custom implementations of features like reconnection, fallback, and broadcasting.
  • Simplicity: 
    Requires less memory and can be simpler to use for basic real-time communication if you manage the complexities yourself.
  • Use Cases: 
    Ideal for applications where performance and minimal overhead are critical, and developers are comfortable handling the underlying complexities.
  • Nature: 
    Socket.IO is a library built on top of the WebSocket protocol, offering a higher-level abstraction.
  • Features: 
    Provides built-in features like automatic reconnection, fallback mechanisms (e.g., long-polling when WebSockets are unavailable), broadcasting, rooms, and acknowledgements.
  • Ease of Use: 
    Simplifies development by abstracting away many complexities of real-time communication, offering a more developer-friendly API.
  • Reliability: 
    Enhances reliability through features like automatic reconnection and buffering.
  • Use Cases: 
    Well-suited for complex real-time applications requiring robust features, simplified development, and broader browser compatibility, even if it introduces slightly more overhead.
Conclusion:
  • Choose WebSockets 
    if:
    • Maximum performance and minimal overhead are paramount.
    • You require fine-grained control over the communication and are willing to implement features like reconnection and fallbacks manually.
    • Your application has specific, performance-critical needs that benefit from a raw protocol implementation.
  • Choose Socket.IO 
    if:
    • You prioritize ease of development and want built-in features like automatic reconnection, fallbacks, and broadcasting.
    • You need to support a wider range of client environments, including those with limited WebSocket support.
    • You are building a complex real-time application where the added features and abstractions of Socket.IO simplify development and enhance reliability.

     

WebSocket Sample Code (Node.js)
Server (server.js)
JavaScript
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  ws.on('message', message => {
    console.log(`Received message: ${message}`);
    // Broadcast the message to all connected clients
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });

  ws.on('error', error => {
    console.error('WebSocket error:', error);
  });

  ws.send('Welcome to the WebSocket server!');
});

console.log('WebSocket server listening on port 8080');
Client (client.html)
Code
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <input type="text" id="messageInput" placeholder="Type your message...">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>

    <script>
        const ws = new WebSocket('ws://localhost:8080');
        const messageInput = document.getElementById('messageInput');
        const messagesDiv = document.getElementById('messages');

        ws.onopen = () => {
            console.log('Connected to WebSocket server');
        };

        ws.onmessage = event => {
            const message = document.createElement('p');
            message.textContent = event.data;
            messagesDiv.appendChild(message);
        };

        ws.onclose = () => {
            console.log('Disconnected from WebSocket server');
        };

        ws.onerror = error => {
            console.error('WebSocket error:', error);
        };

        function sendMessage() {
            const message = messageInput.value;
            ws.send(message);
            messageInput.value = ''; // Clear input field
        }
    </script>
</body>
</html>
Socket.IO Sample Code (Node.js)
Server (server.js)
JavaScript
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);

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

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

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

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

server.listen(3000, () => {
  console.log('Socket.IO server listening on port 3000');
});
Client (client.html)
Code
<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO Chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <h1>Socket.IO Chat</h1>
    <ul id="messages"></ul>
    <input id="m" autocomplete="off" /><button onclick="sendMessage()">Send</button>

    <script>
        const socket = io();
        const messages = document.getElementById('messages');
        const input = document.getElementById('m');

        socket.on('chat message', msg => {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });

        function sendMessage() {
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        }
    </script>
</body>
</html>

Back to top