Server Side Events for data update

[CJS Santana]

I'm just learning SSE and find plenty of tutorials demonstrating how to create a web page that displays messages one after another.
For example, lots of examples show how to display the current time every few seconds. Each event adds a line below the previous one like:

The time is 1:00
The time is 1:01
The time is 1:02

What I want to do is receive data that I can use to update text on a page that does not show as multiple lines.
I would like to be able to handle the received data by SSE and handle the text just like any other.
There are a few examples of sending xml or json as the data, but I can't figure out how to parse it out of the
received message and apply it to elements of a page.

I'm trying to keep this short, but I hope you can see what I'm trying to do.
On a previous page that I created, I used polling to update inner html and that works, except the polling is
not the best way to go. I really only send messages every several minutes, but when I do I want them to appear
within a few seconds, so I would have to be polling all the time just to do a few updates now and then.

The SSE method looks really useful, but I just need to be able to grab the data and format it.

Thanks.

 

[Malcolm]

Hi there!

Welcome to Code Forum!

I'm too familiar with the SSE yet, could you please rephrase on what you're asking?

 

[CJS Santana]

Thank you very much for your help. I hope I can explain what I'm trying to do.

On a web page, I've created a div that displays some data received as a text file from the server:

<div class="row" id="perfInfo1div">
   <div id="perfInfo1" class="mainNowPlaying col-sm-10 col-11 col-lg-10 col-xl-9 col-md-9">
      <p class="infoBoxTitle">Stand by for music...</p>
      <h2 class="composerText">Connecting to music source</h2>
      <h1 class="titleText">Music Radio</h1>
      <h3 class="performerText">(This should not take long)</h3>
   </div>               
</div>

My "bigger hammer" method of getting the data is to have the client check for a new text file every second.
If the file content changes, the the text in the file is used to update the div on the page. This is not elegant, but
it does work.

   /* ============ MAIN METADATA CONTROLLER =============== */
                var prevReq1 = ''; /* Holds previous metadata value */
                function refresh() {
                        var req1 = new XMLHttpRequest(); /* Main metadata display */
                        var req2 = new XMLHttpRequest(); /* Footer metadata display */
                        console.log("Grabbing Value");
                        req1.onreadystatechange = function() {
                                if (req1.readyState == 4 && req1.status == 200) {
                                        document.getElementById('perfInfo1').innerHTML = req1.responseText;

                                        /* ===== Animate metadata window on data change ===== */
                                        if (prevReq1.length != req1.responseText.length) {
                                                prevReq1 = req1.responseText;
                                                animateMetaData1();
                                        }
                                }
                        }
                        req2.onreadystatechange = function() {
                                if (req2.readyState == 4 && req2.status == 200) {
                                        document.getElementById('perfInfo2').innerHTML = req2.responseText;
                                }
                        }
                        req1.open("GET", 'reload.txt', true);
                        req1.send(null);
                        req2.open("GET", 'reScroll.txt', true);
                        req2.send(null);
                }

                function init() {
                        refresh()
                        var int = self.setInterval(function() {
                                refresh()
                        }, 1000);
                }

I would like to replace all that client activity with an SSE event (or whatever it takes) to update the displayed
data only when it gets the message from the server. The server can send any type of data. Right now, it's
just a text file, but it could send xml, json, csv, or html.

Whatever. The question I have is how to grab the data and format it onto my page. The examples I've found only show
how to echo the data to the end of the page, like messaging apps. I want to REPLACE the displayed data in the div.

I hope this is clear and I sure appreciate your help.
Thanks. JS