diff options
Diffstat (limited to 'views/client.html')
-rw-r--r-- | views/client.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/views/client.html b/views/client.html new file mode 100644 index 0000000..c322042 --- /dev/null +++ b/views/client.html | |||
@@ -0,0 +1,83 @@ | |||
1 | <h2>Test client</h2> | ||
2 | |||
3 | <form> | ||
4 | <label for="channelField">Channel</label> | ||
5 | <input type="text" id="channelField"> | ||
6 | <label for="passwordField">Password (optional)</label> | ||
7 | <input type="password" id="passwordField"> | ||
8 | <input type="submit" value="Connect" id="connectButton"> | ||
9 | </form> | ||
10 | <br> | ||
11 | <form> | ||
12 | <label for="messageField">Message</label> | ||
13 | <input type="text" disabled id="messageField"> | ||
14 | <input type="submit" value="Send" disabled id="sendButton"> | ||
15 | </form> | ||
16 | |||
17 | <hr> | ||
18 | <span>Log</span> | ||
19 | <pre id="console"></pre> | ||
20 | |||
21 | <script src="/socket.io/socket.io.js"></script> | ||
22 | <script type="text/javascript"> | ||
23 | var console = document.getElementById("console"); | ||
24 | |||
25 | function println(str) { | ||
26 | console.innerHTML = str + "\n" + console.innerHTML; | ||
27 | } | ||
28 | |||
29 | function changeControlState(connected) { | ||
30 | socketConnected = connected; | ||
31 | channelField.disabled = connected; | ||
32 | passwordField.disabled = connected; | ||
33 | if (connected) { | ||
34 | connectButton.value = "Disconnect"; | ||
35 | } else { | ||
36 | connectButton.value = "Connect"; | ||
37 | } | ||
38 | |||
39 | messageField.disabled = !connected; | ||
40 | sendButton.disabled = !connected; | ||
41 | } | ||
42 | |||
43 | var socket; | ||
44 | var socketConnected = false; | ||
45 | |||
46 | function connectSocket(channel, password) { | ||
47 | socket = io.connect("/", { | ||
48 | "query" : "channel=" + channel + "&password=" + password, | ||
49 | "force new connection" : true | ||
50 | }); | ||
51 | |||
52 | socket.on("connect", function() { | ||
53 | changeControlState(true); | ||
54 | println("connected"); | ||
55 | }); | ||
56 | |||
57 | socket.on("disconnect", function() { | ||
58 | changeControlState(false); | ||
59 | println("disconnected"); | ||
60 | }); | ||
61 | |||
62 | socket.on("message", function(message) { | ||
63 | println(message); | ||
64 | }); | ||
65 | } | ||
66 | |||
67 | |||
68 | connectButton.addEventListener("click", function(event) { | ||
69 | event.preventDefault(); | ||
70 | if (socketConnected) { | ||
71 | socket.disconnect(); | ||
72 | } else { | ||
73 | connectSocket(channelField.value, passwordField.value); | ||
74 | } | ||
75 | }); | ||
76 | |||
77 | sendButton.addEventListener("click", function(event) { | ||
78 | event.preventDefault(); | ||
79 | socket.emit("message", messageField.value); | ||
80 | messageField.value = ""; | ||
81 | }); | ||
82 | |||
83 | </script> \ No newline at end of file | ||