Summary

This article explains the use of Server-Sent Events (SSE) in Angular, providing a real-life use case, code, and authorization token, along with a comparison to WebSocket and a discussion on the benefits and limitations of SSE.

Abstract

The article begins by introducing a use case for Server-Sent Events (SSE) in Angular, where the author needed to display real-time progress for pushing data from a CSV file to a database. The author then explains what SSE is, comparing it to WebSocket and highlighting its unidirectional stream feature. The article also discusses the limitations of SSE, such as lack of support in Microsoft IE and Edge browsers, no support for custom headers, and no support for binary data. The author then explains why they chose SSE for their use case, emphasizing the need for real-time progress and log details. The article concludes with a step-by-step guide on how to implement SSE in Angular, including installing SSE, creating a custom source event service, creating an ImportFile service, and seeing SSE in action.

Bullet points

The author needed to display real-time progress for pushing data from a CSV file to a database.
SSE is a server push technology that allows a client to receive automatic updates from a server via HTTP connection.
SSE allows a web application to receive events called from the server in a unidirectional stream.
SSE has limitations, such as lack of support in Microsoft IE and Edge browsers, no support for custom headers, and no support for binary data.
The author chose SSE for their use case due to the need for real-time progress and log details.
The article provides a step-by-step guide on how to implement SSE in Angular.

How Do Server-Sent Events (SSE) or EventSource Work in Angular?

+Real use case provided with code and authorization token

I come across SSE through my client's business user story (need). Here is the use case where I used it. Imagine you need to add some data to the database. Let’s say you have a CSV file containing each line an article that you need to push to the database’s articles table. It would be better to see a real-time progress bar that shows how much the server has processed so far. Right?

So, in this article, I’m explaining:

What’s SSE?
Why I’m using SSE?
How did it work?

What’s SEE?

Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5 by the W3C. — Wikipedia

So Server-Sent-Events allows an HTTP connection. Good! But, not really different than WebSocket, right? What’s more important is that it allows your web application to receive events called sent by the server in a unidirectional stream. Here is what I needed in my user story:

Let’s make a mental picture to understand the difference. I’ll be comparing SSE with WebSocket.

Here is what happens in a WebSocket connection vs. an SSE connection:

In the WebSocket case, we have to call the server each time to get an answer. The communication is bi-directional. Whereas, in the SSE case, we need to ask for progress percentage one time and get several answers each time telling us the progress percentage.

B’s and C’s for the SSE solution

Of course, there are always B’s and C’s for a solution. For SSE, here are some of its C’s:

Microsoft IE and Edge browser are not compatible with SSE. We then need to use polyfills to make SSE working on these browsers.
The EventSource API has no support for custom headers.
No support for binary data like it’s the case with WebSocket. All events in SSE are encoded in UTF-8.
Since a browser has a limited number of connections per hostname, we should pay attention to the number of opened SSE streams at the same time.

Why I chose SSE?

We mainly have 2 constrains that made us choose this solution:

We need to display a percentage of the processed data among the file content.
We need to receive a log detail about lines where we have errors with time.

Server-Sent Event is a good solution for implementing this use case. First, because we need to display real-time progress. Second, because it’s about the progress for the same HTTP request, we don’t want to send an HTTP request each time to get the progress and do the same for the log details.

What we want is something like below :

SSE can do that, and that’s why we chose it.

By the way, sometimes we also call SSE by Source Event.

How does it work?

To enable servers to push data to web pages over HTTP or using dedicated server-push protocols (SSE), this specification introduces the EventSource interface. In my case, I use keycloak to allow SSO (single sign-on) to identify users and give access. Therefore, the standard EventSource won’t do the job for me since I need to pass the token to access the resource I want.

To resolve this problem, I needed to install an SSE package that will allow me to pass the token.

Here are the guidelines for using SSE:

Install SSE with NPM or Yarn
Create your custom source event Service
Create ImportFile Service
See SSE in action

If you don’t need a token, you can then use the standard HTML EventSource, no need to install extra packages. But, in real applications, we certainly need a token for security issues, right?

Let’s see a real case example.

The implementation

1- Install SSE in the Angular application

To use SSE, we need to install it. There are actually many packages. I chose a simple js package wish is sse.js.

npm install sse.js

2- Create your custom source event Service

We’ll create a SseService and the ImportService that needs to use SSE to get the progress percentage.

Let’s start with our custom SseService:

3- Create ImportFile Service

4- SSE in action

As you see this code is only for the client-side. We still need to implement the back-side or the server that will receive our call asking for the progress.

Here there are different implementations based on your backend technology. I listed the most used technologies example in these references :

For Java and Spring users: link.
For Express backend and NodeJS users: link

Dear readers and friends, thank you for your support and your precious time. I hope this was useful and helpful for you.

Follow me on Medium, Linkedin, Facebook, and Twitter for more articles.

See you soon (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

FAM