chatclient.html Example File

simplechat/chatclient.html
 <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>