# Server-Sent Events (SSE)

Server-Sent Events (SSE) allow a web page to get updates from a server. Unlike WebSockets, which offer full-duplex communication, SSE is a **unidirectional** channel where the server sends data to the client.

## 1. The Concept

SSE is built on top of standard HTTP. The client opens a persistent connection to the server, and the server keeps it open, pushing text-based data whenever it has new information.

*   **Unidirectional:** Server -> Client only.
*   **Text-based:** Only sends text (usually JSON).
*   **Automatic Reconnection:** Built-in retry mechanism if the connection drops.
*   **Standard HTTP:** Works easily over HTTP/2 and doesn't require special protocols like WebSockets.

## 2. Client-Side Implementation

The `EventSource` interface is used to receive server-sent events.

```javascript
const eventSource = new EventSource('/api/stream');

// 1. Listen for generic messages
eventSource.onmessage = (event) => {
  console.log('New message:', event.data);
  const data = JSON.parse(event.data);
  // Update UI
};

// 2. Listen for connection open
eventSource.onopen = () => {
  console.log('Connection to server opened.');
};

// 3. Listen for errors
eventSource.onerror = (err) => {
  console.error('EventSource failed:', err);
  // EventSource automatically tries to reconnect, but you can close it here if needed.
  // eventSource.close();
};
```

## 3. Named Events

The server can send specific event types (not just generic messages). You can listen for these using `addEventListener`.

```javascript
eventSource.addEventListener('ping', (event) => {
  console.log('Ping received:', event.data);
});

eventSource.addEventListener('update', (event) => {
  console.log('Update received:', event.data);
});
```

## 4. SSE vs. WebSockets

| Feature | Server-Sent Events (SSE) | WebSockets |
| :--- | :--- | :--- |
| **Direction** | One-way (Server to Client) | Two-way (Bidirectional) |
| **Protocol** | HTTP | WebSocket (TCP) |
| **Data Type** | Text (UTF-8) | Binary & Text |
| **Reconnection** | Automatic | Manual implementation required |
| **Complexity** | Low (Simple HTTP) | Medium/High |
| **Use Case** | News feeds, stock tickers, notifications | Chat apps, multiplayer games |

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/websockets]]
[[programming/javascript/vanilla/ajax-fetch]]