Connection test

login/connection_test.js

@@ -0,0 +1,103 @@
+loginInformation = document.login_information;
+
+loginInformation.elements.test_websocket.addEventListener("click", init);
+loginInformation.elements.disconnect_websocket.addEventListener("click", closeWebsocket);
+
+var server, 
+  username, 
+  testMessage, 
+  websocketOutput;
+
+function init() {
+
+    server = document.getElementById("server").value.toString();
+    if (server === "other") {
+        server = document.getElementById("server_other_input").value.toString();
+    }
+    username = document.getElementById("username").value.toString();
+    testMessage = document.getElementById("test_message").value.toString();
+    if (!testMessage) {
+        testMessage = '{ "command": "login", "username": "' + username + '" }';
+    }
+
+    websocketOutput = document.getElementById("websocket_output");
+    testWebSocket();
+}
+
+function testWebSocket() {
+
+    // Append input values to document prior to printing test results
+
+    var wsHeader = document.createElement("h3");
+    wsHeader.innerHTML = "Testing WebSocket connection...";
+    websocketOutput.appendChild(wsHeader);
+
+    var wsInput = document.createElement("p");
+    wsInput.innerHTML =
+        "Server: " + server + "<br/>" +
+        "Username: " + username + "<br/>" +
+        "Message: " + testMessage;
+
+    websocketOutput.appendChild(wsInput);
+
+    // Begin WebSocket test
+
+    websocket = new WebSocket(server);
+    websocket.onopen = function(evt) {
+        onOpen(evt)
+    };
+    /*websocket.onclose = function(evt) {
+        onClose(evt)
+    };*/
+    websocket.onmessage = function(evt) {
+        onMessage(evt)
+    };
+    websocket.onerror = function(evt) {
+        onError(evt)
+    };
+
+    /* Close websocket if page is closed or refreshed */
+    window.onbeforeunload = function() {
+        websocket.onclose = function () {}; // disable onclose handler
+        websocket.close()
+    };
+}
+
+function closeWebsocket() {
+    websocket.onclose = function(evt) {
+        onClose(evt)
+    };
+    websocket.close();
+    //writeToScreen("DISCONNECTED");
+}
+
+
+
+function onOpen(evt) {
+    writeToScreen("CONNECTED");
+    doSend(testMessage);
+}
+
+function onClose(evt) {
+    writeToScreen("DISCONNECTED");
+}
+
+function onMessage(evt) {
+    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
+}
+
+function onError(evt) {
+    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
+}
+
+function doSend(message) {
+    writeToScreen("SENT: " + message);
+    websocket.send(message);
+}
+
+function writeToScreen(message) {
+    var pre = document.createElement("p");
+    //pre.style.wordWrap = "break-word";
+    pre.innerHTML = message;
+    websocketOutput.appendChild(pre);
+}

login/login.html

@@ -20,7 +20,7 @@ <h1>Cardshifter login</h1>
         <br/>
         <div id="server_other">
             <label for="server_other">Other Server:</label>
-            <input name="server_other" id="server_other" type="text" />
+            <input name="server_other_input" id="server_other_input" type="text" />
             <br/>
         </div>
         <label for="username">Username:</label>
@@ -40,102 +40,8 @@ <h1>Cardshifter login</h1>
 
     <!-- Temporary WebSocket connection test prints result to document -->
 
-    <script type="text/javascript">
-    // @TODO: Extract this functionality to external file.
+    <script src="connection_test.js"></script>
 
-    login_information = document.login_information;
-
-    login_information.elements.test_websocket.addEventListener("click", init);
-
-    //var server = "ws://echo.websocket.org/";
-    //var username = document.getElementsByName("username").value.toString();
-
-    var server
-      , username
-      , test_message
-      , websocket_output;
-
-    function init() {
-
-      server = document.getElementById("server").value.toString();
-      if (server === "other") { 
-        server = document.getElementById("server_other").value.toString(); 
-      }
-      username = document.getElementById("username").value.toString();
-      test_message = document.getElementById("test_message").value.toString();
-      if (!test_message) {
-        test_message = '{ "command": "login", "username": "' + username + '" }';
-      }
-
-      websocket_output = document.getElementById("websocket_output");
-
-      testWebSocket();
-    }
-
-    function testWebSocket() {
-
-      // Message to append input values to document prior to printing test results
-      var wsHeader = document.createElement("h3");
-      wsHeader.innerHTML = "Testing WebSocket connection...";
-      websocket_output.appendChild(wsHeader);
-
-      var wsInput = document.createElement("p");
-      wsInput.innerHTML = 
-        "Server: " + server + "<br/>" +
-        "Username: " + username +  "<br/>" +
-        "Message: " + test_message;
-
-      websocket_output.appendChild(wsInput);
-
-      // Begin WebSocket test
-
-      websocket = new WebSocket(server);
-      websocket.onopen = function(evt) {
-        onOpen(evt)
-      };
-      websocket.onclose = function(evt) {
-        onClose(evt)
-      };
-      websocket.onmessage = function(evt) {
-        onMessage(evt)
-      };
-      websocket.onerror = function(evt) {
-        onError(evt)
-      };
-    }
-
-    function onOpen(evt) {
-      writeToScreen("CONNECTED");
-      doSend(test_message);
-    }
-
-    function onClose(evt) {
-      writeToScreen("DISCONNECTED");
-    }
-
-    function onMessage(evt) {
-      writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
-      websocket.close();
-    }
-
-    function onError(evt) {
-      writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
-    }
-
-    function doSend(message) {
-      writeToScreen("SENT: " + message);
-      websocket.send(message);
-    }
-
-    function writeToScreen(message) {
-
-      var pre = document.createElement("p");
-      pre.style.wordWrap = "break-word";
-      pre.innerHTML = message;
-      websocket_output.appendChild(pre);
-    }
-
-    </script>
 
     <div id="websocket_output"></div>