1<!DOCTYPE html>
2<html>
3 <head>
4<style>
5img {
6 #width: 100%;
7 border: 3px solid #000;
8}
9h1 {
10 font-size: 20px;
11 font-weight: 300;
12 margin-bottom: 0;
13}
14#slide_label {
15 float: right;
16 font-size: 16px;
17}
18::-webkit-scrollbar {
19 display: none;
20}
21body {
22 background: #3a393a;
23 color: #efefef;
24 font-family: sans-serif;
25 #max-width: 500px;
26}
27</style>
28 <title>WebSocket demo</title>
29 </head>
30 <body>
31 <div>
32 <h1>Current slide</h1>
33 <img id="current_img" src="/current.jpg" />
34 </div>
35 <div>
36 <h1>Next slide</h1>
37 <img id="next_img" src="/next.jpg" />
38 </div>
39 <p>
40 <button id="prev">Prev</button>
41 <button id="next">Next</button>
42 <button id="first">First</button>
43 <button id="last">Last</button>
44 <span id="slide_label">Current: <span id="slide"></span>
45 </p>
46 <div class="state">
47 <span class="users">?</span>
48 </div>
49
50 <script>
51 function imageRefresh(id) {
52 img = document.getElementById(id);
53 var d = new Date;
54 var http = img.src;
55 if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; }
56 img.src = http + '?t=' + d.getTime();
57 }
58 var prev = document.querySelector('#prev'),
59 next = document.querySelector('#next'),
60 first = document.querySelector('#first'),
61 last = document.querySelector('#last'),
62 slide = document.querySelector('#slide'),
63 users = document.querySelector('.users'),
64 websocket = new WebSocket("ws://" + window.location.host + ":5678/");
65 prev.onclick = function (event) {
66 websocket.send(JSON.stringify({action: 'prev'}));
67 }
68 next.onclick = function (event) {
69 websocket.send(JSON.stringify({action: 'next'}));
70 }
71 first.onclick = function (event) {
72 websocket.send(JSON.stringify({action: 'first'}));
73 }
74 last.onclick = function (event) {
75 websocket.send(JSON.stringify({action: 'last'}));
76 }
77 websocket.onmessage = function (event) {
78 data = JSON.parse(event.data);
79 switch (data.type) {
80 case 'state':
81 slide.textContent = data.value;
82 imageRefresh("current_img");
83 imageRefresh("next_img");
84 break;
85 case 'users':
86 users.textContent = (
87 data.count.toString() + " client" +
88 (data.count == 1 ? "" : "s"));
89 break;
90 default:
91 console.error(
92 "unsupported event", data);
93 }
94 };
95 </script>
96 </body>
97</html>