Real-time data streaming to UI using SSE for IoT applications

Vasudev Tadavarthy
Jul 4 · 4 min read

A use case without streaming-data is a thing of the past. Especially in this digital age, data streaming is highly pervasive and ubiquitous. Anything ranging from content streaming, sensor data capturing , real-time chatting to active surveillance, data streaming is a major part of these solutions. And building such a software solution requires choosing the right mechanism of data streaming.

The current blog post is centered over building a real-time dashboard built to update sensors data for an IoT application using front-end JavaScript and a spring boot backend server through Nginx reverse proxy server. The current problem statement is to stream uni-directional data from the back-end server to the dashboard. The plausible options to do so are using, long polling, web-sockets & server-sent events. Let’s understand each one of them.

Long Polling:

The client polls the server for data. The server without closes the request sends new data when available. When the client receives the new information, it sends another request to the server again. This cycle is repeated endlessly until either of them closes the connection. A few of the drawbacks of this mechanism are message sequence and delivery guarantees along with scalability & performance issues.

Image for post
Image for post
source: https://shyamapadabatabyal.files.wordpress.com/2015/05/http-long-polling.png?w=634

Web-Sockets:

is a protocol, providing full-duplex communication channels over a single TCP connection. In simpler terms, bi-directional data transfer is possible between client & server.

Image for post
Image for post
Source: https://www.pubnub.com/blog/

Server-Sent Events:

Similar to web-sockets, SSE is also used for real-time data transmission use cases. But the main difference is that SSE is restricted to unidirectional communication wherein data is sent from server to client. And in most IoT use cases, real-time data has to be transmitted to the client and this is the most appropriate and best-suited solution out of these three ways. Server-Sent Events allows browser-based clients to receive a stream of events from a server over an HTTP connection without polling.

Image for post
Image for post
Source: https://images.ctfassets.net/3prze68gbwl1/assetglossary-17su9wok1ui0z7n/a4e56c7eb90218cf4e30ca72eb2285ec/what-are-server-sent-events-sse.png

The following block shows the dependencies version for spring-boot parent & spring-cloud-starter-netflix-zuul in a pom.xml

<>
<>org.springframework.boot</>
<>spring-boot-starter-parent</>
<>2.1.8.RELEASE</>
</> <!-- lookup parent from repository -->
</>
<>
<>
<>org.springframework.cloud</>
<>spring-cloud-starter-netflix-zuul</>
</>
.
.
.
</>

The following is REST API endpoint to send sensor events with an interval of 350 mill-seconds using Flux interval method

@RestController
@RequestMapping()
SensorApi {

@Autowired
ISensor ;

@CrossOrigin(origins = )
@GetMapping(value = ,
produces = )
Flux<SensorDTO> getEventsAssetById(
@PathVariable String sensorId) {
log.info();
Flux.interval(Duration.ofMillis(350))
.map(it -> .getSensorById(sensorId));
}
}

In Nginx configuration make sure to add this under server block to enable SSE through Nginx

server{
location /sensor/v1.0/sse {
proxy_buffering off;
proxy_cache off;
proxy_set_header Connection;
proxy_http_version1.1;
chunked_transfer_encoding off;
proxy_pass http://<IP-address of back-end service>;
}
}

var eventSource = EventSource(+ sensorId );
eventSource.onmessage = function(event) {
var sensorData = JSON.parse(event.data);
console.log(, sensorData);
}


eventSource.onerror = function(event) {
console.error(, err);
eventSource.close();
}

EventSource is a JavaScript interface that is web content’s interface to server-sent events. In this basic example, an EventSource is created to receive unnamed events from the server; an endpoint with the name “ is responsible for generating the events.

In the below video, we can see the behaviour of a Server-Sent Event connection as a single connection with the server acting as a unidirectional data source.

References:

technoVert

Connecting technology to people.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store