Server-Sent Events (SSE) is a simple and efficient technology that enables real-time communication from the server to the client over a single HTTP connection. In this lesson, you'll delve into the workings of SSE and understand how it facilitates seamless and continuous updates in web applications.

SSE is a unidirectional communication channel primarily designed for scenarios where the server needs to push updates to the client. It builds upon standard web technologies, leveraging the simplicity of HTTP and the familiarity of event-driven programming.

const eventSource = new EventSource('/sse-endpoint');

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

---
title:  Exploring Server-Sent Events (SSE) Under The Hood
---

## Introduction

Server-Sent Events (SSE) is a simple and efficient technology that enables real-time communication from the server to the client over a single HTTP connection. In this lesson, you'll delve into the workings of SSE and understand how it facilitates seamless and continuous updates in web applications.

### SSE Basics

SSE is a unidirectional communication channel primarily designed for scenarios where the server needs to push updates to the client. It builds upon standard web technologies, leveraging the simplicity of HTTP and the familiarity of event-driven programming.

### Establishing an SSE Connection

1.  **Client Requests SSE Connection:**

    -   The process begins with the client initiating an HTTP request for an SSE connection. This is done by creating an `EventSource` object in JavaScript.

```javascript
const eventSource = new EventSource('/sse-endpoint');
```

2.  **Server Responds with SSE Headers:**
    The server responds to the client's request with the appropriate headers, indicating that this connection will be used for Server-Sent Events.

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

The Content-Type is set to text/event-stream to indicate that the content will be in the form of events.

3.  **Sending Events from Server to Client:**
    Once the SSE connection is established, the server can send events to the client at any time. Each event is a plain-text message with a specific format.

event: update
data: This is a message from the server!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript