Creating Real-Time Applications with WebSockets

Urbancode June 03, 2025

 


Creating Real-Time Applications with WebSockets

In today’s digital world, users expect instant updates—whether it’s a message in a chat app, a stock market dashboard, or a multiplayer game. Traditional HTTP protocols just don’t cut it when it comes to real-time communication. This is where WebSockets shine.

In this blog, we’ll explore what WebSockets are, how they work, and how you can create real-time applications using them.

What Are WebSockets?

WebSockets are a communication protocol that enables bi-directional, full-duplex communication between a client (usually a browser) and a server over a single long-lived connection.

Unlike HTTP, which is request-response based (client initiates everything), WebSockets allow both the client and server to send messages anytime, making them ideal for real-time use cases.

How WebSockets Work

  1. Initial Handshake: A WebSocket connection starts as an HTTP request with an Upgrade header.

  2. Protocol Upgrade: The server switches protocols and opens a persistent TCP connection.

  3. Open Channel: Both sides can now send and receive data at any time.

  4. Close Connection: Either the client or server can terminate the connection.

When to Use WebSockets

Use WebSockets when:

  • You need low latency communication

  • The server should push updates without polling

  • You're building:

    • Real-time notifications

    • Chat applications

    • Live dashboards

    • Multiplayer games

    • Collaborative tools (like Google Docs)

Setting Up WebSockets: A Simple Example

Let’s build a basic chat application using Node.js and Socket.IO (a popular WebSocket wrapper library).

1. Install Dependencies

bash

npm init -y
npm install express socket.io

2. Server Code (server.js)

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);

app.use(express.static('public'));

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

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // broadcast to all clients
  });

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

server.listen(3000, () => {
  console.log('Listening on http://localhost:3000');
});

3. Client Code (public/index.html)

html

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <input id="m" autocomplete="off" /><button>Send</button>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const form = document.querySelector('button');
    const input = document.getElementById('m');
    const messages = document.getElementById('messages');

    form.addEventListener('click', () => {
      socket.emit('chat message', input.value);
      input.value = '';
    });

    socket.on('chat message', function(msg){
      const item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
    });
  </script>
</body>
</html>

Open your browser at http://localhost:3000, and try it in two tabs. You now have a real-time chat app!

WebSocket vs HTTP Polling vs SSE

FeatureWebSocketsHTTP PollingServer-Sent Events (SSE)
Bi-directional✅ Yes❌ No❌ No
Latency⚡ Low🐢 High⚡ Low
Browser Support✅ Wide✅ Wide🔶 Good (but not IE)
Complexity⚠️ Moderate✅ Simple✅ Simple
Use caseReal-time chat, gamesSimple updatesNotifications, Feeds

Real-World Examples

  • WhatsApp Web: Uses WebSockets to sync chats across devices.

  • Trading apps: Real-time stock/crypto updates.

  • Google Docs: Real-time document collaboration.

  • Slack: Real-time team messaging and presence detection.

Security and Best Practices

  • Always use WSS (WebSocket over TLS) in production.

  • Set up heartbeat/ping intervals to detect dropped connections.

  • Implement authentication and rate-limiting.

  • Use libraries like Socket.IO, WS, or SockJS to ease implementation and improve compatibility.

Final Thoughts

WebSockets unlock a whole new level of interactivity and responsiveness in web applications. From live support widgets to gaming platforms, they enable real-time experiences that users love.

If you're building modern applications that need fast and two-way communication, it’s time to ditch the request-response model and embrace WebSockets.

Bonus: Tools & Libraries to Explore

Post a Comment

0 Comments

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)