Server-Sent Events vs. WebSockets

What is SSE?

Server-Sent Events (SSE) is a standard that enables a web server to push data to a client unidirectionally once an initial client connection has been established. This means data flows exclusively from the server to the client over a single, long-lived HTTP connection.

SSE is designed to be simple and efficient for scenarios where the client primarily needs to receive updates from the server, such as notifications, live news feeds, or stock price updates. It leverages the existing HTTP protocol, making it easier to integrate with existing infrastructure compared to WebSockets.

How SSE Works

The process begins with the client initiating a connection to an SSE endpoint on the server using the JavaScript EventSourceA JavaScript API that provides an interface for receiving server-sent events from a specific URL. API.

1. Client Connection: The client creates an EventSource object, pointing to a URL on the server that is set up to stream events.
2. Server Response: The server responds with a special MIME type, text/event-stream, and keeps the connection open.
3. Data Streaming: The server sends data messages to the client periodically. These messages are plain text and follow a specific format (e.g., lines starting with data:, event:, id:, retry:).
4. Client Handling: The client's EventSource object listens for these messages and triggers corresponding events (e.g., onmessage, or custom named events).

Client-side JavaScript example:

// Connect to an SSE endpoint
const eventSource = new EventSource('/sse-endpoint');

// Handle incoming messages (default event)
eventSource.onmessage = function(event) {
  console.log('New message:', event.data);
  // Update UI with event.data
};

// Handle named events
eventSource.addEventListener('newsUpdate', function(event) {
  console.log('News update:', event.data);
  // Update UI with news data
});

// Handle errors
eventSource.onerror = function(err) {
  console.error('EventSource failed:', err);
  if (eventSource.readyState === EventSource.CLOSED) {
    // Connection was closed, perhaps server shut down
  }
};

// To close the connection:
// eventSource.close();

Key Features of SSE

Pros & Cons of SSE

Interactive SSE Demo

What are WebSockets?

The WebSocket API is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

WebSockets provide a bidirectional, full-duplexCommunication can occur in both directions simultaneously over a single connection, much like a telephone call. communication channel over a single, long-lived TCP connection. This means both the client and server can send data to each other at any time, making it ideal for applications requiring low-latency, high-frequency, two-way communication.

How WebSockets Work

The WebSocket protocol involves an initial handshake over HTTP, after which the connection is "upgraded" to a WebSocket connection.

1. Client Handshake: The client sends an HTTP request to the server. This request includes an Upgrade: websocket header, indicating the client's desire to establish a WebSocket connection.
2. Server Handshake Response: If the server supports WebSockets and agrees to the upgrade, it responds with an HTTP 101 Switching Protocols status. This response also includes an Upgrade: websocket header.
3. Connection Established: Once the handshake is complete, the initial HTTP connection is replaced by a WebSocket connection using the same underlying TCP/IP connection. This connection uses the ws://The WebSocket protocol scheme, similar to http://. or wss://The secure WebSocket protocol scheme, similar to https://. protocol.
4. Data Exchange: Both client and server can now send and receive messages (text or binary) over this persistent connection until it's explicitly closed by either party or due to network issues.

Client-side JavaScript example:

// Create WebSocket connection.
const socket = new WebSocket('wss://your-websocket-server.com');

// Connection opened
socket.onopen = function(event) {
  console.log('WebSocket connection established.');
  socket.send('Hello Server!');
};

// Listen for messages
socket.onmessage = function(event) {
  console.log('Message from server: ', event.data);
  // Handle incoming message
};

// Listen for errors
socket.onerror = function(error) {
  console.error('WebSocket Error: ', error);
};

// Connection closed
socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    // e.g. server process killed or network down
    console.error('Connection died');
  }
};

// To send a message:
// socket.send('Another message');

// To close the connection:
// socket.close();

Key Features of WebSockets

Pros & Cons of WebSockets

Interactive WebSocket Demo