-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
107 lines (90 loc) · 3.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Asyncio Client Interface</title>
<style>
div {
font-size: 2em;
float: left;
border: 1px solid gray;
min-width: 200px;
min-height: 200px;
margin-left: 20px;
margin-bottom: 20px;
padding: 15px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<script>
var onCreated = function(evt){
// create div with id; insert into body
var data = JSON.parse(evt.data);
var newDiv = document.createElement('div');
newDiv.id = data.id;
newDiv.innerHTML = 'connected';
// newDiv.appendChild(document.createTextNode('div with id ' + index));
document.body.appendChild(newDiv);
onText(evt);
onColor(evt);
onWidth(evt);
};
var onUpdated = function(evt){
onText(evt);
onColor(evt);
onWidth(evt);
};
var onText = function(evt){
// find div with id; change text
var data = JSON.parse(evt.data);
var innerHTML = '<p>' + data.server + '</p><p>' + data.text + '</p>';
document.getElementById(data.id).innerHTML = innerHTML;
};
var onColor = function(evt){
// find div with id; change color attribute
var data = JSON.parse(evt.data);
document.getElementById(data.id).style.backgroundColor = data.color;
};
var onWidth = function(evt){
// find div with id; change width attribute
var data = JSON.parse(evt.data);
document.getElementById(data.id).style.width = data.width;
};
var onDeleted = function(evt){
// find div with id; remove div from body
var data = JSON.parse(evt.data);
document.body.removeChild(document.getElementById(data.id));
};
var sourceURLs = [
'http://159.203.72.183:8000/events',
// 'http://159.203.72.183:8097/events',
// 'http://159.203.72.183:8098/events',
// 'http://159.203.72.183:8099/events'
// 'http://10.0.1.68:8000/events'
// 'http://127.0.0.1:8000/events'
];
for(index in sourceURLs){
var URL = sourceURLs[index];
var evtSource = new EventSource(URL, {withCredentials: true});
evtSource.onopen = function(evt) {
this.addEventListener('created', onCreated, false);
this.addEventListener('updated', onUpdated, false);
this.addEventListener('deleted', onDeleted, false);
}
evtSource.onerror = function(evt) {
// find div with id; remove div from body
console.log('error', evt);
// var divs = document.querySelectorAll('div');
// [].forEach.call(divs, function(div){
// document.body.removeChild(div);
// });
}
};
</script>
</body>
</html>