How to consume a data stream in javascript?

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 :

  1. Create an event source object
  2. Use onMessage() method to retrieve the data stream
  3. 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.

Advertisements

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();
        }

Advertisements

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s