Streaming Data Over HTTP with Server-Sent Events

Last reviewed on November 25, 2021

Recently I learned about server-sent events, which allow for a server to send new data to the browser at any time by pushing messages over a persistent connection. This persistent connection can be created with the browser's EventSource class.

In this post, I wanted to show a simple counter application using this technique, where the state of the count is stored in-memory on the server and each increment is streamed to the frontend.

Here is a full demo where you can see this in action:

If you open up the Network tab in Chrome Dev Tools and click on the /count URL, you can see the data being streamed in:

Network panel

The Frontend

For the frontend I used React. I did everything in the App component in just a few lines.

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const source = new EventSource("http://localhost:7000/count");

    source.addEventListener("open", () => {
      console.log("EventSource connection opened");

    source.addEventListener("message", message => {

    source.addEventListener("error", error => {
      console.error("Error: ", error);

    return () => {
  }, []);

  return <div>{count}</div>;

The Backend

For the backend, I used Node.js and Express.

const express = require("express");
const cors = require("cors");

const app = express();


app.get("/count", function (request, response) {
  let count = 0;

  response.writeHead(200, {
    Connection: "keep-alive",
    "Content-Type": "text/event-stream",

  setInterval(() => {
    response.write(`data: ${count}\n\n`);
  }, 1000);


Each streamed message can have a combination of the following fields:

  • id
  • data
  • retry
  • event

In this example, I'm only using the data field. Each field must be on its own line, and each message must have a line in between them, hence the two newline characters (\n\n). For example, the messages streamed in this application look like the following:

data: 1

data: 2

data: 3

You can read more about the other fields for messages here.

All of the code to get this application running can be found at the following repos:

Shout-out to Eric for writing the blog post, Implement Server-Sent Events in Node.js and React, where I learned about all of this.