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>