WebSocket vs Server-Sent Events: choosing the right tool
Not every real-time feature needs WebSocket. Here's how to pick the right technology.
Quick Comparison
| WebSocket | SSE | |
|---|---|---|
| Direction | Bidirectional | Server → Client only |
| Protocol | ws:// | HTTP |
| Reconnection | Manual | Automatic |
| Binary data | Yes | No (text only) |
| Browser support | All modern | All modern |
| Through proxies | Sometimes issues | Works everywhere |
| Complexity | Higher | Lower |
Server-Sent Events (SSE)
Perfect for: notifications, live feeds, dashboards, progress bars.
Server (Node.js)
app.get('/events', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
const sendEvent = (data) => {
res.write(`data: ${JSON.stringify(data)}\n\n`);
};
// Send initial data
sendEvent({ type: 'connected', time: Date.now() });
// Send updates
const interval = setInterval(() => {
sendEvent({ type: 'update', value: Math.random() });
}, 1000);
req.on('close', () => {
clearInterval(interval);
});
});
```
### Client
```javascript
const source = new EventSource('/events');
source.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};
source.onerror = () => {
console.log('Connection lost, reconnecting...');
// EventSource reconnects automatically!
};
```
That's it. No library needed. Auto-reconnection built in.
## WebSocket
Perfect for: chat, gaming, collaborative editing, trading platforms.
### Server (ws library)
```javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
const data = JSON.parse(message);
// Broadcast to all clients
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
user: data.user,
message: data.message,
time: Date.now()
}));
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
```
### Client
```javascript
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => {
ws.send(JSON.stringify({ user: 'Alice', message: 'Hello!' }));
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
displayMessage(data);
};
// Manual reconnection needed
ws.onclose = () => {
setTimeout(() => {
// Reconnect logic here
}, 1000);
};
```
## Decision Framework
```
Do you need client → server communication?
├── Yes → Do you need it frequently (>1/sec)?
│ ├── Yes → WebSocket
│ └── No → SSE + regular HTTP POST
└── No → SSE
```
### Use SSE when:
- Server pushes updates to client
- Client actions use normal HTTP requests
- You want simplicity and auto-reconnection
- Examples: stock ticker, notifications, live scores
### Use WebSocket when:
- Both sides send messages frequently
- Low latency matters (<50ms)
- Binary data needed
- Examples: multiplayer games, chat, live collaboration
## The Hybrid Approach
Most apps benefit from combining both:
```javascript
// SSE for real-time updates (notifications, feed)
const events = new EventSource('/api/events');
// Regular HTTP for user actions
async function sendMessage(text) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify({ text })
});
// Server broadcasts via SSE to all connected clients
}
```
Simpler than WebSocket, works through all proxies, auto-reconnects.
---
What do you use for real-time features? WebSocket, SSE, or something else?All Rights Reserved
