The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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.

JS wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reply to this topicStart new topic
post Sep 10 2020, 09:39 PM
Post #2

🌟Computer says no🌟

Group: WDG Moderators
Posts: 19,769
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...).

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.

  source.onmessage = function(event) {
    document.getElementById("result").innerHTML = ''; //Add this line
    document.getElementById("result").innerHTML += + "<br>";
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic

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: 24th July 2021 - 03:55 PM