Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Server-side Scripting _ Server Side Events to update data display

Posted by: John Santana Sep 10 2020, 08:01 PM

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.
JS wacko.gif

Posted by: pandy Sep 10 2020, 09:39 PM

I've never used SSE so I guess I should shut up, but that's against my nature. tongue.gif Don't know about the second part of your question, about the polling, but I think the first part, about multiple lines can be fixed by clearing what innerHTML wrote previously.

When I googled I found this demo at w3schools (not my favourite source, but it came up...).
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse

If you add a line before the one with innerHTML that sort of clears div#result and then run the script again, it will look like the same line gets updated and no multiple lines will be printed. Like this.

CODE
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML = ''; //Add this line
    document.getElementById("result").innerHTML += event.data + "<br>";
  };

Posted by: John Santana Sep 14 2020, 08:00 PM

Well you did it. I don't know why I didn't think of that simple thing. But I didn't so you saved the day and I'm making great headway.

Many thanks. JS

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)