PurpleI2P
/
i2pd-tools
mirror of https://github.com/PurpleI2P/i2pd-tools
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #2 from PurpleI2P/websocket-ui 

Websocket ui
famtool
Jeff 8 years ago committed by GitHub
parent
35e83c4996 6e7d8c3eb1
commit
0f3f5c1f18
2 changed files with 241 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      websocket-ui/index.html
  2. 270
      websocket-ui/ui.js

6
websocket-ui/index.html
Unescape View File

@ -5,9 +5,9 @@ @@ -5,9 +5,9 @@
</script>
</head>
<body style="background: #222;">
<div id="log">
</div>
<canvas id="main" width="1200" height="700" style="background: #222;">
<pre id="log" style="z-index: 1; color: white; position: fixed; right: 0px; top: 0px; font-size: 10px;">
</pre>
<canvas id="main" style="background: #222; position: fixed; left: 0px; top: 0px; z-index: -1">
</canvas>
<script type="text/javascript" src="ui.js">
</script>

270
websocket-ui/ui.js
Unescape View File

@ -1,10 +1,14 @@ @@ -1,10 +1,14 @@
var url = "ws://127.0.0.1:7666";
var l = document.getElementById("log");
var c = document.getElementById("main");
var nodes = {
length: 0,
};
var in_traffic = 0;
var out_traffic = 0;
var tick = 0;
function nodeConnected(ident) {
if (nodes[ident]) {
return;
@ -38,10 +42,111 @@ function nodeRecv(ident, n) { @@ -38,10 +42,111 @@ function nodeRecv(ident, n) {
}
var ws = new WebSocket("ws://127.0.0.1:7665/");
var tpeers = {};
var tunnels = {
length : 0
};
function ensureTunnel(tid) {
if(!tunnels[tid]) {
tunnels[tid] = {
latency : -1,
color: "#ddd",
};
tunnels.length ++;
}
}
function tunnelBuild(peers, tid, inbound) {
logit("Tunnel "+tid+" build started");
ensureTunnel(tid);
tunnels[tid].peers = peers.split(":");
tunnels[tid].inbound = inbound;
tunnels[tid].state = "building";
}
function tunnelLatency(tid, latency) {
// logit("tunnel "+tid+" latency "+latency+"ms");
if (!tunnels[tid]) return;
tunnels[tid].latency = latency;
}
function tunnelEstablished(tid) {
if(!tunnels[tid]) return;
logit("Tunnel " + tid + " is healthy");
tunnels[tid].state = "healthy";
tunnels[tid].color = "#1d1";
}
function tunnelBuildFailed(tid) {
if(!tunnels[tid]) return;
logit("Tunnel " + tid + " failed to build");
delete tunnels[tid];
tunnels.length --;
}
function tunnelTestFailed(tid) {
if(!tunnels[tid]) return;
logit("Tunnel " + tid + " has failed tunnel test");
tunnels[tid].state = "stuck";
tunnels[tid].color = "orange";
}
function tunnelFailed(tid) {
if(!tunnels[tid]) return;
logit("Tunnel " + tid + " has failed");
tunnels[tid].state = "failed";
tunnels[tid].color = "red";
}
function tunnelExpiring(tid) {
if(!tunnels[tid]) return;
logit("Tunnel " + tid + " is expired");
delete tunnels[tid];
tunnels.length--;
}
function tunnelState(tid, state) {
if (state == "3") {
tunnelEstablished(tid);
} else if (state == "2" ) {
tunnelBuildFailed(tid);
} else if (state == "4" ) {
tunnelTestFailed(tid);
} else if (state == "5" ) {
tunnelFailed(tid);
} else if (state == "6" ) {
tunnelExpiring(tid);
} else {
logit("tunnel "+tid+" state "+state);
}
}
function tunnelCreated(tid) {
logit("tunnel "+tid+" was created");
}
function logit(msg) {
console.log(msg);
var t = document.createTextNode(msg);
var e = document.createElement("div");
e.appendChild(t);
l.appendChild(e);
while(l.children.length > 50)
l.removeChild(l.children[0]);
}
var ws = new WebSocket(url);
ws.onclose = function (ev) {
nodes = { length: 0 };
tpeers = { length: 0 };
}
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") {
@ -50,24 +155,123 @@ ws.onmessage = function(ev) { @@ -50,24 +155,123 @@ ws.onmessage = function(ev) {
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);
}
}
};
var draw = c.getContext("2d");
function getPeer(h, us) {
if (tpeers[h]) {
return tpeers[h];
}
console.log("make peer "+h);
draw.font = "10px monospace";
var p = {
x: Math.random(),
y: Math.random(),
name: h,
};
if (us) {
p.x = 0.5;
p.y = 0.5;
} else {
while (Math.abs(p.x - 0.5) <= 0.1 ) {
p.x = Math.random();
}
while (Math.abs(p.y - 0.5) <= 0.1 ) {
p.y = Math.random();
}
}
tpeers[h] = p;
return p;
}
function drawPeer(p) {
draw.beginPath();
draw.lineWidth = 1;
draw.fillStyle = "white";
draw.strokeStyle = "white";
draw.arc(p.x * c.width, p.y * c.height, 20, 0, 2* Math.PI);
draw.stroke();
draw.fillText(p.name.substr(0,6), p.x * c.width, p.y * c.height);
}
function getTraffic(node) {
if (!node) return 1;
return 1.0 + ( (node.send + node.recv + 1.0) / 1.5) ;
}
var draw = c.getContext("2d");
var ticks = 0;
// draw
setInterval(function() {
draw.canvas.width = window.innerWidth - 100;
draw.canvas.height = window.innerHeight - 100;
draw.font = "10px monospace";
draw.clearRect(0, 0, c.width, c.height);
// draw tunnels
var e = [];
for (var tid in tunnels) {
if(tid == "length") continue;
var t = tunnels[tid];
var us = getPeer(t.peers[0], true);
var traff = getTraffic(nodes[t.peers[1]]);
e.push([us, getPeer(t.peers[1]), t.color, traff]);
for (var idx = 1 ; idx + 1 < t.peers.length; idx ++ ) {
var cur = getPeer(t.peers[idx]);
var next = getPeer(t.peers[idx+1]);
if(cur && next)
e.push([cur, next, t.color, traff]);
else
console.log(cur, next);
}
}
for ( var h in tpeers ) {
drawPeer(getPeer(h));
}
for ( var ed in e ) {
var edge = e[ed];
draw.beginPath();
draw.strokeStyle = edge[2];
draw.lineWidth = edge[3];
draw.moveTo(edge[0].x * c.width, edge[0].y * c.height);
draw.lineTo(edge[1].x * c.width, edge[1].y * c.height);
draw.stroke();
}
// draw nodes
var n = nodes.length;
var centerx = c.width / 2;
var centery = c.height / 2;
var outer_r = (n * 5);
var mult = Math.log(10 + nodes.length) + 0.5;
var outer_r = ((10 + n) * mult);
if(outer_r > c.width || outer_r > c.height) {
var smaller = c.height;
if(c.width < smaller) smaller = c.width;
outer_r = smaller - 20;
}
var inner_r = outer_r / 2;
draw.beginPath();
@ -87,33 +291,33 @@ setInterval(function() { @@ -87,33 +291,33 @@ setInterval(function() {
}
idents = idents.sort();
var in_traffic = 0;
var out_traffic = 0;
for (var i = 0; i < idents.length; i++) {
var ident = idents[i];
rad += ( Math.PI * 2 ) / nodes.length;
in_traffic += nodes[ident].recv;
out_traffic += nodes[ident].send;
in_traffic += nodes[ident].recv / 10.0 ;
out_traffic += nodes[ident].send / 10.0;
var send = nodes[ident].send * 5;
var recv = nodes[ident].recv * 5;
var send = (nodes[ident].send ) * 5;
var recv = (nodes[ident].recv ) * 5;
var traff = (getTraffic(nodes[ident]) - 1) * 5;
var x0 = (Math.cos(rad) * inner_r) + centerx;
var y0 = (Math.sin(rad) * inner_r) + centery;
var x1 = (Math.cos(rad) * (inner_r + send )) + centerx;
var y1 = (Math.sin(rad) * (inner_r + send )) + centery;
var bigger = send;
if (recv > bigger) bigger = recv;
var x2 = (Math.cos(rad) * (inner_r + bigger )) + centerx;
var y2 = (Math.sin(rad) * (inner_r + bigger )) + centery;
var x1 = (Math.cos(rad) * (inner_r + traff )) + centerx;
var y1 = (Math.sin(rad) * (inner_r + traff )) + centery;
draw.fillStyle = "white";
draw.beginPath();
var txt = ident.substr(0, 6);
draw.fillText(txt, x2-5, y2-5);
draw.fillText(txt, x1-5, y1-5);
if(i * 10 < c.height) {
txt += "| "+leftpad(nodes[ident].recv+" msg/s in", 15)+ " | "+leftpad(nodes[ident].send+" msg/s out", 15)+" |";
draw.fillText(txt, 100, 20 + (i*10));
}
nodes[ident].recv = 0;
nodes[ident].send = 0;
draw.moveTo(x0, y0);
draw.strokeStyle = "#dfa";
@ -122,16 +326,6 @@ setInterval(function() { @@ -122,16 +326,6 @@ setInterval(function() {
draw.lineTo(x1, y1);
draw.lineWidth = 8;
draw.stroke();
x1 = (Math.cos(rad) * (inner_r + recv )) + centerx;
y1 = (Math.sin(rad) * (inner_r + recv )) + centery;
draw.beginPath();
draw.strokeStyle = "#fda";
draw.moveTo(x0, y0);
draw.lineTo(x1, y1);
draw.lineWidth = 10;
draw.stroke();
/*
if(( 40 + idx ) < c.height) {
var send = nodes[ident].send * 10;
@ -154,11 +348,17 @@ setInterval(function() { @@ -154,11 +348,17 @@ setInterval(function() {
idx += 40;
}
*/
nodes[ident].send = 0;
nodes[ident].recv = 0;
}
draw.fillStyle = "white";
draw.fillText("Active Peers | " +leftpad(" "+ nodes.length, 10), 500, 25);
draw.fillText("In Traffic | "+leftpad(" "+in_traffic+" msg/s", 10), 500, 35);
draw.fillText("Out Traffic | "+leftpad(" "+out_traffic+" msg/s", 10), 500, 45);
}, 1000);
draw.fillText("Tracked Peers | " +leftpad(" "+ nodes.length, 10), 500, 25);
draw.fillText("Tracked Tunnels | " +leftpad(" "+ tunnels.length, 10), 500, 35);
draw.fillText("In Traffic | "+leftpad(" "+Math.ceil(in_traffic)+" msg/s", 10), 500, 45);
draw.fillText("Out Traffic | "+leftpad(" "+Math.ceil(out_traffic)+" msg/s", 10), 500, 55);
if (tick % 10 == 0) {
in_traffic = 0;
out_traffic = 0;
}
tick ++;
}, 100);

Write Preview
Loading…
Cancel
Save