Sse Vs Websocket

title: "SSE vs WebSocket" description: "Compare Server-Sent Events and WebSocket to understand their differences, strengths, weaknesses, and when to use each for real-time communication." weight: 12 date: 2026-06-28 lastmod: 2026-06-28 tags: ["apis", "sse"]

SSE and WebSocket both enable real-time communication but serve different purposes. Understanding their trade-offs helps you choose the right technology for your use case.

## What You'll Learn

- SSE vs WebSocket feature comparison
- Unidirectional vs bidirectional trade-offs
- Performance and resource comparison
- Browser compatibility differences
- When to choose SSE over WebSocket

## Why It Matters

Choosing the wrong real-time technology leads to unnecessary complexity, higher resource usage, or missing features your application needs.

## Real-World Use

A stock market dashboard uses SSE for price updates (server-to-client only) and WebSocket for trading (bidirectional). Each technology handles its strength: SSE for simple updates, WebSocket for interactive trading.

## Flow Chart

```mermaid
flowchart LR
    A[Real-Time Need] --> B{Communication Pattern}
    B -->|Server to Client Only| C[SSE]
    B -->|Bidirectional| D[WebSocket]
    C --> E[Simple HTTP]
    C --> F[Auto-Reconnect]
    D --> G[Full Duplex]
    D --> H[Binary Support]

Code Examples

Example 1: Same Functionality in SSE vs WebSocket

// SSE Implementation (Server to Client)
// Server
app.get('/events', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });

  db.on('update', (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  });
});

// Client
const source = new EventSource('/events');
source.onmessage = (e) => updateUI(JSON.parse(e.data));

// WebSocket Implementation (Bidirectional)
// Server
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  db.on('update', (data) => {
    ws.send(JSON.stringify(data));
  });
  
  ws.on('message', (msg) => {
    // Handle client messages
  });
});

// Client
const ws = new WebSocket('ws://server:8080');
ws.onmessage = (e) => updateUI(JSON.parse(e.data));

Expected output: SSE requires less code for server-to-client updates. WebSocket requires more setup but supports bidirectional communication.

Example 2: Feature Comparison Matrix

// SSE - Simple server push
const sseSource = new EventSource('/api/notifications');
sseSource.onmessage = (e) => {
  showNotification(JSON.parse(e.data));
};

// Attempting bidirectional with SSE (workaround)
// This uses separate HTTP requests for client-to-server
async function sendToServer(data) {
  await fetch('/api/action', {
    method: 'POST',
    body: JSON.stringify(data),
  });
}

// WebSocket - Full duplex
const ws = new WebSocket('ws://server/ws');
ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'notifications' }));
};
ws.onmessage = (e) => {
  showNotification(JSON.parse(e.data));
};

Expected output: SSE with separate fetch calls for client-to-server communication vs WebSocket with native bidirectional messaging.

Example 3: Resource Usage Comparison

// SSE - one HTTP connection, minimal server resources
// Server
app.get('/stream', (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/event-stream' });
  const timer = setInterval(() => {
    res.write(`data: ${Date.now()}\n\n`);
  }, 1000);
  req.on('close', () => clearInterval(timer));
});

// WebSocket - full duplex, more overhead
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
  const timer = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ timestamp: Date.now() }));
    }
  }, 1000);
  ws.on('close', () => clearInterval(timer));
  ws.on('message', (msg) => {
    // Handle incoming messages
  });
});

Expected output: Both achieve the same result, but SSE uses standard HTTP while WebSocket requires a separate server with custom protocol handling.

Common Mistakes

Practice Questions

1. When would you choose SSE over WebSocket?
2. What are the limitations of SSE compared to WebSocket?
3. How does SSE handle reconnection compared to WebSocket?
4. Which technology has better performance for many concurrent connections?
5. Can SSE be used for bidirectional communication?

Challenge

Design a real-time system for an auction platform. Determine which parts should use SSE and which should use WebSocket. Justify each choice based on communication patterns, latency requirements, and complexity.

FAQ

Mini Project

Build a hybrid real-time application that uses SSE for live notifications and WebSocket for a chat feature. Compare the implementation complexity and performance of both approaches in the same application.

What's Next

Learn the SSE event stream format