|
3 | 3 | <head> |
4 | 4 | <title>WebSocket Chat Client</title> |
5 | 5 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 6 | + |
| 7 | + <script type="text/javascript" src="prototype.js"></script> |
6 | 8 | <script type="text/javascript"> |
7 | | - if (!window.WebSocket) alert("Your browser doesn't support the WebSocket API!"); |
8 | | - var ws; |
9 | | - |
10 | | - function connect() { |
11 | | - ws = new WebSocket(document.getElementById("uri").value); |
12 | | - ws.onopen = function() { |
13 | | - document.getElementById("uri").enabled = false; |
14 | | - document.getElementById("connectButton").enabled = false; |
| 9 | + document.observe("dom:loaded", function() { |
| 10 | + function log(text) { |
| 11 | + $("log").innerHTML = (new Date).getTime() + ": " + (!Object.isUndefined(text) && text !== null ? text.escapeHTML() : "null") + $("log").innerHTML; |
15 | 12 | } |
16 | | - ws.onmessage = function(e) { |
17 | | - var logArea = document.getElementById("log"); |
18 | | - logArea.innerHTML += e.data + "\n"; |
| 13 | + |
| 14 | + if (!window.WebSocket) { |
| 15 | + var head = $$("head")[0]; |
| 16 | + head.insert(new Element("script", { type: "text/javascript", src: "swfobject.js" })); |
| 17 | + head.insert(new Element("script", { type: "text/javascript", src: "FABridge.js" })); |
| 18 | + head.insert(new Element("script", { type: "text/javascript", src: "web_socket.js" })); |
| 19 | + log("WebSocket not natively supported, falling back to Flash"); |
| 20 | + } else { |
| 21 | + log("Using browser's native WebSocket implementation") |
19 | 22 | } |
20 | | - ws.onclose = function() { |
21 | | - document.getElementById("uri").enabled = true; |
22 | | - document.getElementById("connectButton").enabled = true; |
| 23 | + |
| 24 | + var ws; |
| 25 | + |
| 26 | + function connect() { |
| 27 | + ws = new WebSocket($F("uri")); |
| 28 | + ws.onopen = function() { |
| 29 | + log("[WebSocket#onopen] called.\n"); |
| 30 | + $("uriForm").enable(); |
| 31 | + } |
| 32 | + ws.onmessage = function(e) { |
| 33 | + log("[WebSocket#onmessage] called.\n\tMessage: " + e.data + "\n"); |
| 34 | + } |
| 35 | + ws.onclose = function() { |
| 36 | + log("[WebSocket#onclose] called.\n"); |
| 37 | + $("uriForm").disable(); |
| 38 | + ws = null; |
| 39 | + } |
23 | 40 | } |
24 | | - } |
25 | 41 |
|
26 | | - function send() { |
27 | | - if (ws) { |
28 | | - var textField = document.getElementById("textField"); |
29 | | - ws.send(textField.value); |
30 | | - textField.value = ""; |
| 42 | + function send() { |
| 43 | + if (ws) { |
| 44 | + var textField = $("textField"); |
| 45 | + ws.send(textField.value); |
| 46 | + log("[WebSocket#send] called.\n\tSent string: " + textField.value + "\n"); |
| 47 | + textField.value = ""; |
| 48 | + textField.focus(); |
| 49 | + } |
31 | 50 | } |
32 | | - } |
| 51 | + |
| 52 | + $("uriForm").observe("submit", function(e) { |
| 53 | + e.stop(); |
| 54 | + connect(); |
| 55 | + }); |
| 56 | + |
| 57 | + $("sendForm").observe("submit", function(e) { |
| 58 | + e.stop(); |
| 59 | + send(); |
| 60 | + }); |
| 61 | + |
| 62 | + $("disconnect").observe("click", function() { |
| 63 | + if (ws) { |
| 64 | + ws.close(); |
| 65 | + } |
| 66 | + }); |
| 67 | + }); |
33 | 68 | </script> |
34 | 69 | </head> |
35 | 70 | <body> |
36 | | - <input type="text" id="uri" value="ws://localhost" style="width:200px;"> <input type="button" onclick="connect()" value="Connect" id="connectButton"><br> |
| 71 | + <form id="uriForm"><input type="text" id="uri" value="ws://localhost" style="width:200px;"> <input type="submit" value="Connect"><input type="button" id="disconnect" value="Disconnect"></form><br> |
| 72 | + <form id="sendForm"><input type="text" id="textField" value="" style="width:200px;"> <input type="submit" value="Send"></form><br> |
37 | 73 | <textarea id="log" rows="50" cols="100"></textarea><br> |
38 | | - <input type="text" id="textField" value="" style="width:200px;"> <input type="button" onclick="send()" value="Send" id="send"><br> |
39 | 74 | </body> |
40 | 75 | </html> |
0 commit comments