| <html> |
| <head> |
| <title>WebSocket Chat Client</title> |
| </head> |
| <body> |
| <h1>WebSocket Chat Client</h1> |
| <p> |
| Host: <input id="webSocketHost" type="text" value="localhost:1234"/> |
| </p> |
| <p> |
| <button onClick="initWebSocket();">Connect</button> |
| <button id="disconnectButton" onClick="stopWebSocket();" disabled>Disconnect</button> |
| <button onClick="checkSocket();">State</button> |
| </p> |
| <p> |
| <textarea id="debugTextArea" style="width:400px;height:200px;" readonly></textarea> |
| </p> |
| <p> |
| <input type="text" id="inputNick" value="nickname" /> |
| <input type="text" id="inputText" onkeydown="if(event.keyCode==13)sendMessage();"/> |
| <button id="sendButton" onClick="sendMessage();" disabled>Send</button> |
| </p> |
| |
| <script type="text/javascript"> |
| var debugTextArea = document.getElementById("debugTextArea"); |
| function debug(message) { |
| debugTextArea.value += message + "\n"; |
| debugTextArea.scrollTop = debugTextArea.scrollHeight; |
| } |
| |
| function sendMessage() { |
| var nickname = document.getElementById("inputNick").value; |
| var msg = document.getElementById("inputText").value; |
| var strToSend = nickname + ": " + msg; |
| if ( websocket != null ) |
| { |
| document.getElementById("inputText").value = ""; |
| websocket.send( strToSend ); |
| console.log( "string sent :", '"'+strToSend+'"' ); |
| debug(strToSend); |
| } |
| } |
| |
| var websocket = null; |
| |
| function initWebSocket() { |
| try { |
| if (typeof MozWebSocket == 'function') |
| WebSocket = MozWebSocket; |
| if ( websocket && websocket.readyState == 1 ) |
| websocket.close(); |
| var wsUri = "ws://" + document.getElementById("webSocketHost").value; |
| websocket = new WebSocket( wsUri ); |
| websocket.onopen = function (evt) { |
| debug("CONNECTED"); |
| document.getElementById("disconnectButton").disabled = false; |
| document.getElementById("sendButton").disabled = false; |
| }; |
| websocket.onclose = function (evt) { |
| debug("DISCONNECTED"); |
| document.getElementById("disconnectButton").disabled = true; |
| document.getElementById("sendButton").disabled = true; |
| }; |
| websocket.onmessage = function (evt) { |
| console.log( "Message received :", evt.data ); |
| debug( evt.data ); |
| }; |
| websocket.onerror = function (evt) { |
| debug('ERROR: ' + evt.data); |
| }; |
| } catch (exception) { |
| debug('ERROR: ' + exception); |
| } |
| } |
| |
| function stopWebSocket() { |
| if (websocket) |
| websocket.close(); |
| } |
| |
| function checkSocket() { |
| if (websocket != null) { |
| var stateStr; |
| switch (websocket.readyState) { |
| case 0: { |
| stateStr = "CONNECTING"; |
| break; |
| } |
| case 1: { |
| stateStr = "OPEN"; |
| break; |
| } |
| case 2: { |
| stateStr = "CLOSING"; |
| break; |
| } |
| case 3: { |
| stateStr = "CLOSED"; |
| break; |
| } |
| default: { |
| stateStr = "UNKNOW"; |
| break; |
| } |
| } |
| debug("WebSocket state = " + websocket.readyState + " ( " + stateStr + " )"); |
| } else { |
| debug("WebSocket is null"); |
| } |
| } |
| </script> |
| </body> |
| </html> |
