diff --git a/websocket-ui/index.html b/websocket-ui/index.html index 2625308..3c64380 100644 --- a/websocket-ui/index.html +++ b/websocket-ui/index.html @@ -31,6 +31,10 @@ +
+ + +

     
     
diff --git a/websocket-ui/ui.js b/websocket-ui/ui.js
index 2202467..ee09c75 100644
--- a/websocket-ui/ui.js
+++ b/websocket-ui/ui.js
@@ -1,5 +1,3 @@
-var url = "ws://127.0.0.1:7665";
-
 var l = document.getElementById("log");
 var c = document.getElementById("main");
 var nodes = {
@@ -119,18 +117,16 @@ function tunnelState(tid, state) {
     tunnelFailed(tid);
   } else if (state == "6" ) {
     tunnelExpiring(tid);
-  } else {
-    logit("tunnel "+tid+" state "+state);
   }
 }
 
 function tunnelCreated(tid) {
-  logit("tunnel "+tid+" was created");
+  logit("Tunnel "+tid+" was created");
 }
 
 function logit(msg) {
   console.log(msg);
-  var t = document.createTextNode(leftpad(msg, 25));
+  var t = document.createTextNode(msg);
   var e = document.createElement("div");
   e.appendChild(t);
   l.appendChild(e);
@@ -138,38 +134,66 @@ function logit(msg) {
     l.removeChild(l.children[0]);
 }
 
-var ws = new WebSocket(url);
-ws.onclose = function (ev) {
-  nodes = { length: 0 };
-  tpeers = { length: 0 };
+function socketClosed() {
+  var b = document.getElementById("connect-button");
+  b.onclick = startui
+  b.innerHTML = "connect";
 }
-ws.onmessage = function(ev) {
-  var j = JSON.parse(ev.data);
-  if (j) {
-    console.log(j);
-    if(j.type == "transport.connected") {
-      nodeConnected(j.ident);
-    } else if (j.type == "transport.disconnected") {
-      nodeDisconnected(j.ident);
-    } else if (j.type == "transport.sendmsg") {
-      nodeSend(j.ident, j.number);
-    } else if (j.type == "transport.recvmsg") {
-      nodeRecv(j.ident, j.number);
-    } else if (j.type == "tunnel.build") {
-      tunnelBuild(j.value, j.tid, j.inbound);
-    } else if (j.type == "tunnel.latency") {
-      tunnelLatency(j.tid, j.value);
-    } else if (j.type == "tunnel.state") {
-      tunnelState(j.tid, j.value);
-    } else if (j.type == "tunnels.created") {
-      tunnelCreated(j.tid);
-    } else if (j.type == "tunnels.expired") {
-      tunnelExpiring(j.tid);
-    } else {
-      logit("message: "+j.type);
+
+function startui() {
+  var el = document.getElementById("ws-url");
+  var url;
+  if(el)
+    url = el.value;
+  else
+    url = "ws://127.0.0.1:7666";
+  
+  var ws = new WebSocket(url);
+  ws.onclose = function (ev) {
+    if (ev.code == 1000)
+      logit("connection closed");
+    else
+      logit("failed to connect to "+url);
+    nodes = { length: 0 };
+    tpeers = { length: 0 };
+    socketClosed();
+  }
+  ws.onopen = function(ev) {
+    logit("connected to "+url);
+    var b = document.getElementById("connect-button");
+    b.onclick = function() {
+      ws.close();
     }
+    b.innerHTML = "disconnect";
   }
-};
+  ws.onmessage = function(ev) {
+    var j = JSON.parse(ev.data);
+    if (j) {
+      console.log(j);
+      if(j.type == "transport.connected") {
+        nodeConnected(j.ident);
+      } else if (j.type == "transport.disconnected") {
+        nodeDisconnected(j.ident);
+      } else if (j.type == "transport.sendmsg") {
+        nodeSend(j.ident, j.number);
+      } else if (j.type == "transport.recvmsg") {
+        nodeRecv(j.ident, j.number);
+      } else if (j.type == "tunnel.build") {
+        tunnelBuild(j.value, j.tid, j.inbound);
+      } else if (j.type == "tunnel.latency") {
+        tunnelLatency(j.tid, j.value);
+      } else if (j.type == "tunnel.state") {
+        tunnelState(j.tid, j.value);
+      } else if (j.type == "tunnels.created") {
+        tunnelCreated(j.tid);
+      } else if (j.type == "tunnels.expired") {
+        tunnelExpiring(j.tid);
+      } else {
+        logit("message: "+j.type);
+      }
+    }
+  };
+}
 
 function getPeer(h, us) {
   if (tpeers[h]) {