Harness the power of Server-Sent Events (SSE) in Node.js & React

4 min readApr 23, 2022

--

There are lots of powerful APIs that have been introduced in HTML5 like Geolocation, Drag/Drop, Web-Storage, Web-Workers, etc. SSE (Server-Sent Events) is one of those powerful APIs that provides the uni-directional communication feature (unlike WebSocket which is bi-directional).

What is SSE?

Let's understand this concept with a scenario, your webpage wants the update from the server then you have below two ways to get the update.
1. Polling
2. Establishing a live Server-Client connection (Websocket)
But both the approaches have their cons, in the polling mechanism, your client application asks for the updates in a particular interval of time which may increase the unnecessary load on the server. In the second approach, you are creating a bi-direction connection which you won’t leverage at its fullest as in our scenario we only want one-way communication (Server to Client).

So here SSE comes to rescue us “With server-sent events, it’s possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page. ”

Let's develop a Backend server having an SSE feature in Node.js

At this point, I am assuming that readers have the experience to work with Express in Node.js. I’ll be mentioning important steps only, if you want a fully-fledged working app you can visit this Github Repo.

1. Create a uni-directional connection (server to client) using the ‘/events’ route that creates an event stream connection with the client

Using this route client application can establish a uni-directional connection with the server. In this example, I have stored the response stream in an array to identify and send the updates to clients (refer to client array variable).

2. Send events to registered clients

This is the step where you send the data that the client wants. In this example,
we will leverage the client array variable that we created earlier.

To simulate the behavior (async operation completion or DB update) I have explicitly created a route, to post the data which our server will send to our registered clients. You need to identify the time/place based on your requirement when you’ll send the data to the requestor ( in our case it is a web application).

This is how our whole code looks like

Let’s create frontend code for some visuals

1. Open a terminal and run the below command to create react app.

2. Edit the App.js file as below

3. Launch frontend server

> npm start

Call /movie API to simulate event trigger scenario which will eventually send the data to registered clients

Here I am using curl ( make sure it is installed on your machine) to call http://localhost:3000/movie API. You can use postman as an alternate to curl to fire this API.

Note: This endpoint is just to make the demo workable. In your case, any async operation completion or any DB update event will be the right place to send events to your registered clients (which has been mentioned in the 2nd point in server implementation)