Brian Shisia

Posted on May 28

Getting Started with WebSockets: Real-Time Web Communication Made Easy

#websockets #javascript #webdev #realtime

In today’s web, real-time features like live chat, notifications, and multiplayer games are everywhere. But how do these apps update instantly — without needing to refresh the page?

The secret is WebSockets — a powerful technology that lets the browser and server talk to each other instantly.

In this beginner-friendly guide, we’ll explain what WebSockets are, when to use them, and how to build a tiny real-time app to see them in action.

💡 What Are WebSockets?

WebSockets let your browser and server send messages back and forth over a single, always-open connection.

Compare that to regular HTTP:

Protocol	Behavior
HTTP	Client sends a request → Server responds. Then it’s over.
WebSocket	Connection stays open → Client & Server can send messages anytime.

Why is that cool?
Because it means instant updates without waiting for the browser to "ask" again — perfect for real-time apps.

🧠 When Should You Use WebSockets?

Use WebSockets when your app needs instant communication:

🗨️ Live chat apps
🎮 Multiplayer games
📍 Real-time location tracking
📈 Live stock/crypto prices
🔔 Instant notifications

For simpler updates that aren’t frequent, HTTP polling or Server-Sent Events (SSE) might be enough.

🛠️ Let’s Build a Simple WebSocket App

We’ll use Node.js and a WebSocket library called ws.

1. Create a WebSocket Server

Make a new file called server.js:

// server.js
const WebSocket = require('ws');

// Create WebSocket server on port 8080
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
  console.log('🔌 New client connected');

  socket.on('message', message => {
    console.log('Received:', message);
    socket.send(`Server received: ${message}`);
  });

  socket.on('close', () => console.log('❌ Client disconnected'));
});

Install the required package:

npm install ws
node server.js

2. Connect From Your Browser

Open your browser’s DevTools and paste this into the console:

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('✅ Connected to server');
  socket.send('Hello from the browser!');
};

socket.onmessage = (event) => {
  console.log('💬 Message from server:', event.data);
};

socket.onclose = () => {
  console.log('🔒 Connection closed');
};

You’ll see real-time communication between your browser and the Node.js server — no refreshing, no reloading.

How It Works (In Simple Terms)

The browser (client) opens a WebSocket connection to the server.
The server accepts it and keeps the connection open.
Either side can send messages at any time.
The connection stays open until one side closes it.

Quick Tips for Real Projects

Use wss:// (WebSockets over HTTPS) in production for security.
Handle disconnections and retries (networks aren’t perfect).
WebSockets are great for live features, but don’t overuse them if polling would do the job.

Real-World Example: Real Time Forum

To test WebSockets in a real-world app, I built SocialSphere — a mini social network with live features like:

Real-time chat
Create and interact with posts
Likes and 💬 comments
Instant notifications for:
- New messages
- Likes/comments
- New posts by friends

Tech Used

Frontend: JavaScript (React), HTML, CSS
Backend: Node.js, Express
WebSocket Engine: ws / Socket.io
Database: MongoDB

How WebSockets Power It

New messages are pushed instantly to users.
Likes/comments send real-time notifications.
No need to refresh — updates just appear.

🔗 GitHub Repo

🎯 Final Thoughts

WebSockets can seem complex at first — but once you try a simple example, you'll get it.

They’re incredibly useful when you want instant communication between users and your server.

Whether you're building a chat app or a dashboard, learning WebSockets is a great way to level up your web dev skills.

Got Questions?

Drop a comment below if you need help or want to share how you're using WebSockets in your projects!

DEV Community