Essentially, I am receiving a sequence of 5-10 events from an external server in the following format:
event: add
data: { "hostname":"name", "properties": {"info": "50"}}
event: add
data: { "hostname":"name2", "properties": {"info": "45"}}
event: add
data: { "hostname":"name3", "properties": {"info": "67"}}
and so on...
Using EventSource JS, I process these events as shown below:
var source = new EventSource("http://XXX.XXX.XXX.XXX:PORT/")
source.addEventListener('add', onAdd)
function onAdd(e) {
var data = parse(e)
var output = document.getElementById('append');
var ele = document.createElement("div");
var frag = document.createDocumentFragment();
frag.appendChild(ele);
ele.setAttribute("class", 'row sub-item');
ele.innerHTML ="<ul>"
+"<li>" + "<span id=name>" + data.hostname + "</span>" + "</li>"
+"<li>" + "INFO: " + "<span id=info>" + data.properties.info + "</span>" + "</li>"
+"</ul>"
+"</div>"
output.appendChild(frag);
}
This implementation successfully displays each event as a div containing an unordered list on the page.
However, I encounter difficulty with a separate set of future events like:
event: update
data: { "hostname":"name", "properties": {"info": "65"}}
event: update
data: { "hostname":"name2", "properties": {"info": "35"}}
event: update
data: { "hostname":"name3", "properties": {"info": "15"}}
and so forth...
These updates are received periodically from the server, but I struggle to find a way to individually update the info properties using a span class (<span class="info"). Using class changes all info properties to the same value (name1 45 name2 45 name3 45), while using id (<span id="info") only updates the first occurrence.
I believe there must be a straightforward solution that eludes me. Thank you for your assistance!