How to Call Event-Stream APIs in Angular

Listen to Server-Sent Events (SSE) in Your Angular Project

Photo by Steven Kamenar on Unsplash

I implemented a Zimbra (an e-mail server/client software) Extension that extends MailboxListener class. This extension would register itself as Zimbra starts up and all accounts’ mail events (such as read, delete, move, trash, flag, unflag, etc.). These events then are being sent to Kafka. With a Spring Boot project, I implemented an API that returns text/event-stream type data as a response. For the back-end side, you can check my other post, here:

How to Create a Server-Sent Events API with Spring Webflux and Kafka

Here, in this post, I will tell you how this API was called in Angular (to refresh inbox when a new mail arrives or a mail is sent to trash in another device, etc.)

Firstly, install event-source-polyfill from npm:

npm i event-source-polyfill

EventSourcePolyfill enables you to send header parameters. Below is the service implementation:

You should call “close()” method if you want to end your event-stream connection. You may have created a Subscription and have “unsubscribed” it in your ngOnDestroy method but this will not close the connection. In your case, “if” condition in “closeEventSource” method may differ but do not forget to call “close()” when you no longer need data from SSE (you can maybe check error reason to close or try to reconnect).

Happy Coding!