Implementing Real-time Features with WebSockets

From live chats and multiplayer games to dashboards and collaborative editing—real-time features are essential in modern applications. WebSockets provide a persistent connection between client and server, enabling bi-directional communication with minimal latency.

In this post, we’ll explore how to implement WebSockets effectively using Node.js, along with practical use cases and best practices.

What Are WebSockets?

WebSockets enable full-duplex communication channels over a single TCP connection. Unlike HTTP, which is stateless and request-response based, WebSockets keep the connection alive.

Key Features:

• Low latency
• Bi-directional communication
• Persistent connection
• Ideal for real-time data delivery

Setting Up WebSocket with Node.js

1. Using the ws Library

npm install ws

// server.js
import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8080 })

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

  ws.on('message', (message) => {
    console.log('Received:', message)
    ws.send(`Echo: ${message}`)
  })

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

2. Simple Client

<script>
  const socket = new WebSocket('ws://localhost:8080')

  socket.onmessage = (event) => {
    console.log('Server says:', event.data)
  }

  socket.onopen = () => {
    socket.send('Hello Server')
  }
</script>

Real-World Use Cases

1. Chat Application

• Join rooms with socket.io or custom logic
• Store chat history in a database
• Broadcast messages to room participants

2. Live Notifications

Push alerts to users:

ws.send(JSON.stringify({ type: 'NEW_MESSAGE', content: 'You’ve got mail!' }))

3. Live Dashboards

Stream updates from backend processes or metrics tools.

4. Collaborative Tools

Enable Google Docs–like real-time editing using CRDTs or OT (operational transforms).

WebSocket vs Alternatives

Technology	Use Case
WebSocket	Bi-directional real-time
Server-Sent Events	Uni-directional (server → client)
HTTP Polling	Fallback/legacy
WebRTC	Peer-to-peer media/data

Using socket.io for Simplified Setup

Socket.IO abstracts away reconnections, fallbacks, and broadcasting:

npm install socket.io

import { Server } from 'socket.io'
const io = new Server(3000)

io.on('connection', (socket) => {
  console.log('User connected:', socket.id)

  socket.on('chat-message', (msg) => {
    io.emit('chat-message', msg)
  })

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

Client

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

  socket.on('chat-message', (msg) => {
    console.log(msg)
  })

  socket.emit('chat-message', 'Hello!')
</script>

Security Considerations

• Authentication: Use JWT or session cookies
• Rate limiting: Prevent abuse/spam
• Validation: Sanitize all incoming messages
• Origin checks: Avoid cross-site attacks

io.use((socket, next) => {
  const token = socket.handshake.auth.token
  // Verify token logic here
  next()
})

Scaling WebSockets

Challenges:

• Sticky sessions in multi-node setups
• Horizontal scaling needs a shared pub/sub system

Solutions:

• Redis Pub/Sub for multi-node communication
• WebSocket gateways or load balancers with sticky sessions
• Use managed services like Ably, Pusher, or Socket.IO with Redis adapter

npm install socket.io-redis

Performance Tips

• Keep payloads minimal (JSON > stringified objects > binary for large data)
• Close unused connections
• Debounce high-frequency events (e.g., mouse movement)

Conclusion

WebSockets unlock powerful real-time capabilities for your apps. Whether it's a chat app, stock ticker, or live feed, using WebSockets the right way ensures responsiveness and a smooth user experience.

Resources

• MDN WebSocket Docs
• Socket.IO Documentation
• Ably Real-Time Platform
• WebSocket Benchmarking

---

Real-time apps are the future. Follow the blog for in-depth tutorials on CRDTs, collaborative editing models, and scalable WebSocket architectures.