Implementing Server-Sent Events (SSE) with NestJS and React

When pushing data to browsers, many think of WebSocket, which provides full‑duplex communication, but for one‑way server‑to‑client messages the HTTP protocol already offers Server‑Sent Events (SSE).

SSE works by returning a response with the Content‑Type: text/event‑stream header; the connection stays open and the server can send multiple JSON payloads over time.

Typical use cases include CI/CD build logs, real‑time chat responses (e.g., ChatGPT), and site notifications, where only the server needs to push updates.

Implementation steps with NestJS:

npx nest new sse-test
npm run start:dev

Add an endpoint marked with the @Sse('stream') decorator that returns an Observable and calls observer.next() to emit messages at desired intervals:

@Sse('stream')
stream() {
  return new Observable(observer => {
    observer.next({ data: { msg: 'aaa' } });
    setTimeout(() => {
      observer.next({ data: { msg: 'bbb' } });
    }, 2000);
    setTimeout(() => {
      observer.next({ data: { msg: 'ccc' } });
    }, 5000);
  });
}

On the frontend, create a React TypeScript project and use the native EventSource API to listen for onmessage events:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const eventSource = new EventSource('http://localhost:3000/stream');
    eventSource.onmessage = ({ data }) => {
      console.log('New message', JSON.parse(data));
    };
  }, []);

  return
hello
;
}

export default App;

Enable CORS in the Nest application so the browser can access the SSE endpoint.

Running the React app (usually on port 3001) and opening the browser shows incremental messages “aaa”, “bbb”, “ccc” arriving in the console and the network devtools display the text/event-stream content type.

Compatibility is good: according to MDN, all modern browsers support SSE except older versions of Internet Explorer and Edge.

Beyond plain text, SSE can also transmit binary data by converting a Buffer to JSON on the server and sending it as part of the event payload.

const { readFileSync } = require('fs');
const buffer = readFileSync('./package.json');
console.log(buffer);

By exposing a @Sse('stream3') endpoint that reads a file, converts it with toJSON() , and emits the result, any JSON‑serializable data—including binary content—can be streamed to the client.

@Sse('stream3')
stream3() {
  return new Observable(observer => {
    const json = readFileSync('./package.json').toJSON();
    observer.next({ data: { msg: json } });
  });
}

In summary, Server‑Sent Events provide a lightweight, reliable alternative to WebSocket for one‑way real‑time data push, with simple NestJS backend code, native browser support via EventSource , and broad applicability such as notifications, log streaming, and incremental AI responses.