Server Sent Events

Rui Barbosa
ITNEXT
Published in
5 min readOct 26, 2021

--

Photo by Pavan Trikutam on Unsplash

How can we keep the information on our applications up to date, in real time, without constantly polling the server?

There are several technologies around this concept, including WebSockets or more sophisticated protocols like MQTT.

In this article we are going to explore something simpler that is already available on your browser.

Server Sent Events

The browser Web API Server Sent Events has an EventSource JavaScript interface that will allow you to subscribe to a text/event-stream and bubble up these events to your web app.

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. 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.

Receiving events

In order to receive events, all you need to do is to point the EventSource object to the URL of the text/event-stream page and implement the listeners for the type of event your are interested in.

Warning: When not used over HTTP/2, SSE suffers from a limitation to the maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6). The issue has been marked as “Won’t fix” in Chrome and Firefox. This limit is per browser + domain, which means that you can open 6 SSE connections across all of the tabs to www.example1.com and another 6 SSE connections to www.example2.com (per Stackoverflow). When using HTTP/2, the maximum number of simultaneous HTTP streams is negotiated between the server and the client (defaults to 100).

Sending events

Only the server can send events, this is not a two way street.

Not only the MIME type has to be text/event-stream, but also each notification is sent as a block of text terminated by a pair of newlines.

A crude example of NodeJs code to generate a message would look like this:

If you point your browser directly to such a page you’ll get this as an example:

“event: message” or “event: “ represent the same concept. If you do not specify what to subscribe you will get these types of messages, i.e., messages without an event or with an event set to “message”.

You can subscribe multiple events, for example “est” or “pdt” or both on the examples.

No matter what your subscribe you’ll always get the “message” or unspecified events.

OutSystems Implementation

Implementing this in OutSystems is strait forward.

We have a block with a few parameter as the source of the events and what type of events to subscribe a few block events to bubble up what we receive from the EventSource to our app.

Dealing with the JavaScript

We instantiate the EventSource mapping the event listeners to the event triggering methods on our app:

And we release those events on the OnDestroy:

The Demo App

I came up with the simplest but least useful demo.

The server side will send an UTC date every second on an unspecified event and also an “est” event with the date for eastern daylight savings time and finally a “pdt” event with the date for pacific daylight savings.

The EventSource block is set to subscribe to my text/event-stream page done in NodeJs and I also want to subscribe both “est” and “pdt”.

Then we implement the event handlers:

On Message handler

The result is a web page that shows in real time the date events being sent by the server.

Check out this page live

Applications

So where can or should we use this?

First remember, this is a one way communication system, from server to clients, so if you need both ways you’re probably better using WebSockets, MQTT or similar.

There is no QOS control over if the client actually received the message, this is essentially a fire and forget kind of thing.

I do see plenty of use cases where you want your web apps to fetch in real time the absolute latest information.

You could even just send a ping, telling the app that there is new information about something, so go and get the latest. You could send enough information on the ping so that the app refreshes just what has changed (remember the QOS though).

As usual the component and demo can be found on the forge along with a couple more on this topic.

Now all you need to do is register for the OutSystems Developer Conference.

Register here

and obviously go and build some apps.

--

--