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
|
<html>
<head>
<style type="text/css">
#changes div {
border-bottom: 1px solid gray;
margin-bottom: 1em;
}
</style>
</head>
<body>
<div id="body">
<div id="changes">
<h4>Changes</h4>
{% for change in changes %}
{% raw change['html'] %}
{% end %}
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
updater.start();
});
var updater = {
socket: null,
start: function() {
var url = "ws://" + location.host + "/socket";
updater.socket = new WebSocket(url);
updater.socket.onmessage = function(event) {
updater.showMessage(JSON.parse(event.data));
}
},
showMessage: function(change) {
var container = $("#changes");
var existing = $("#change-" + change.id);
if (existing.length > 0) return;
while (container.find('div').length >= 5) {
container.find('div:first').remove();
}
var node = $(change.html);
container.append(node);
}
};
</script>
</body>
</html>
|
