16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
* data-live property, an html element registers itself for live
* updates from the server. this is pretty straightforward: we
* retrieve this url from the server as a get request, create a
* tree from its html, find the element in question, ferret out
* any deltas, and apply them. */
document.querySelectorAll('*[data-live]').forEach(function(container) {
let interv = parseFloat(container.attributes.getNamedItem('data-live').nodeValue) * 1000;
container._liveLastArrival = '0'; /* TODO include header for this */
window.setInterval(function() {
var req = new Request(window.location, {
method: 'GET',
headers: {
'X-Live-Last-Arrival': container._liveLastArrival
}
})
fetch(req).then(function(resp) {
if (!resp.ok) return;
let newest = resp.headers.get('X-Live-Newest-Artifact');
if (newest <= container._liveLastArrival) {
resp.body.cancel();
return;
}
container._liveLastArrival = newest
resp.text().then(function(htmlbody) {
var parser = new DOMParser();
var newdoc = parser.parseFromString(htmlbody,'text/html')
// console.log(newdoc.getElementById(container.id).innerHTML)
container.innerHTML = newdoc.getElementById(container.id).innerHTML
})
})
}, interv)
});
});
|
|
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
* data-live property, an html element registers itself for live
* updates from the server. this is pretty straightforward: we
* retrieve this url from the server as a get request, create a
* tree from its html, find the element in question, ferret out
* any deltas, and apply them. */
document.querySelectorAll('*[data-live]').forEach(function(container) {
let interv = parseFloat(container.attributes.getNamedItem('data-live').nodeValue) * 1000;
container._liveLastArrival = 0; /* TODO include initial value in document */
window.setInterval(function() {
var req = new Request(window.location, {
method: 'GET',
headers: {
'X-Live-Last-Arrival': container._liveLastArrival
}
})
fetch(req).then(function(resp) {
if (!resp.ok) return;
let newest = parseInt(resp.headers.get('X-Live-Newest-Artifact'));
if (newest <= container._liveLastArrival) {
resp.body.cancel();
return;
}
container._liveLastArrival = newest
resp.text().then(function(htmlbody) {
var parser = new DOMParser();
var newdoc = parser.parseFromString(htmlbody,'text/html')
container.innerHTML = newdoc.getElementById(container.id).innerHTML
})
})
}, interv)
});
});
|