Dealing with huge amount of continuous data (data streams) is a challenge for enterprise applications.
Fortunately , reactive programming provides a standard solution to this problem.
You can generate and consume data streams without blocking the user and without overwhelming the server or client.
This post explains how to do reactive programming on the server side :
Now let’s see how to consume data streams in java script reactively.
Steps :
- Create an event source object
- Use onMessage() method to retrieve the data stream
- Use onError() to close event source on any error
Create an event source object
Create an event source object using constructor and pass the API which produces the datastream:
const eventsource = new EventSource("http://localhost:8088/superhero");
I deployed a reactive API which sends a data stream of superheroes (one record every 3 seconds) at my localhost. This API is passed as a parameter to the constructor of event source object above.
Use onMessage() method to retrieve the data stream
eventsource.onmessage = function (event) {
var json = JSON.parse(event.data);
}
Once you retrieve the data as shown above you can use it to present in the way you want to the user.
Here is a sample code which just populates a table:
eventsource.onmessage = function (event) {
var json = JSON.parse(event.data);
var row = document.createElement("tr");
var name_column = document.createElement("td");
var name_text = document.createTextNode(json.name);
var age_column = document.createElement("td");
var age_text = document.createTextNode(json.age);
name_column.appendChild(name_text);
age_column.appendChild(age_text);
row.appendChild(name_column);
row.appendChild(age_column);
document.getElementById("herotable").appendChild(row);
}
Use onError() to close event source on any error
eventsource.onerror = function (error) {
eventsource.close();
}
Here is the entire code:
<html>
<script>
function fetchSuperHeroes() {
const eventsource = new EventSource("http://localhost:8088/superhero");
eventsource.onmessage = function (event) {
var json = JSON.parse(event.data);
var row = document.createElement("tr");
var name_column = document.createElement("td");
var name_text = document.createTextNode(json.name);
var age_column = document.createElement("td");
var age_text = document.createTextNode(json.age);
name_column.appendChild(name_text);
age_column.appendChild(age_text);
row.appendChild(name_column);
row.appendChild(age_column);
document.getElementById("herotable").appendChild(row);
}
eventsource.onerror = function (error) {
eventsource.close();
}
}
</script>
<body>
<br>
<button style="width: 100px; height:50px;" onclick="fetchSuperHeroes()">Get SuperHeroes</button>
<br>
<br>
<table id="herotable" style="border: 1px solid black">
<thead>
<th>Name</th>
<th>Age</th>
</thead>
</table>
</body>
</html>
Here is the output:
By default event source expects an infinite data stream, so if the data stream gets closed at the server end for some reason , event source tries to reconnect.
In the above example, the server sends a finite stream of data .
And when it closes , an error is thrown and the event source object tries to connect again to the server and fetch the same data stream again. To prevent this I have closed the event source on error. This is not needed if the server never closes the data stream.
That’s it!
Leave a Reply