The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Server Side Events to update data display, Not for messaging and the like.
John Santana
post Sep 10 2020, 08:01 PM
Post #1





Group: Members
Posts: 2
Joined: 10-September 20
Member No.: 27,535



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 10 2020, 09:39 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?fi...me=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>";
  };
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
John Santana
post Sep 14 2020, 08:00 PM
Post #3





Group: Members
Posts: 2
Joined: 10-September 20
Member No.: 27,535



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:54 PM