Files
rippled/Subtrees/websocket/examples/wsperf/message_test.html

277 lines
6.5 KiB
HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var ws;
var url;
function connect() {
url = document.getElementById("server_url").value;
console.log(url);
if ("WebSocket" in window) {
ws = new WebSocket(url);
} else if ("MozWebSocket" in window) {
ws = new MozWebSocket(url);
} else {
write_error("This Browser does not support WebSockets.");
return;
}
ws.onopen = function(e) {
document.getElementById("server_url").disabled = true;
document.getElementById("toggle_connect").innerHTML = "Disconnect";
};
ws.onerror = function(e) {
write_error("Client: An error occured, see console log for more details.");
console.log(e);
};
ws.onclose = function(e) {
document.getElementById("server_url").disabled = false;
document.getElementById("toggle_connect").innerHTML = "Connect";
document.getElementById("server_details").innerHTML = "";
};
ws.onmessage = function(e) {
var data = JSON.parse(e.data);
if (data.type == "test_welcome") {
var o = "";
o += "<strong>Version:</strong> "+data.version+" ";
o += "<strong>Ident:</strong> "+data.ident+" ";
o += "<strong>num_workers:</strong> "+data.num_workers+" ";
document.getElementById("server_details").innerHTML = o;
} else if (data.type == "test_start") {
$("#result-"+data.token).removeClass("pass fail error");
if ($("#result-"+data.token).length == 0) {
var o = "";
o += "<tr id='result-"+data.token+"'>";
o += "<td class='token'>"+data.token+"</td>";
o += "<td class='status'>Running</td>";
o += "<td class='result'></td>";
o += "<td class='total'></td>";
o += "<td class='bytes'></td>";
o += "<td class='min'></td>";
o += "<td class='median'></td>";
o += "<td class='mean'></td>";
o += "<td class='max'></td>";
o += "<td class='stddev'></td>";
o += "<td class='MBps'></td>";
o += "</tr>";
o += document.getElementById("results-body").innerHTML;
document.getElementById("results-body").innerHTML = o;
//$("#results-body").html(o);
} else {
var o = "<td>"+data.token+"</td><td>Running</td>";
o += "<td class='result'></td>";
o += "<td class='total'></td>";
o += "<td class='bytes'></td>";
o += "<td class='min'></td>";
o += "<td class='median'></td>";
o += "<td class='mean'></td>";
o += "<td class='max'></td>";
o += "<td class='stddev'></td>";
o += "<td class='MBps'></td>";
$("#result-"+data.token).html(o);
}
} else if (data.type == "test_complete") {
$("#result-"+data.token+" .status").html("Complete");
} else if (data.type == "test_data") {
if (data.data.current_connections != null) {
var foo = "";
foo += "Current Connections: "+data.data.current_connections+"<br />";
foo += "Max Connections: "+data.data.max_connections+"<br />";
foo += "Total Connections: "+data.data.total_connections+"<br />";
foo += "Failed Connections: "+data.data.failed_connections+"<br />";
$("#result-"+data.token+" .result").html(foo);
}
$("#result-"+data.token+" .result").html(data.data.result);
$("#result-"+data.token+" .total").html(data.data.total);
$("#result-"+data.token+" .bytes").html(data.data.bytes);
$("#result-"+data.token+" .min").html(data.data.min);
$("#result-"+data.token+" .median").html(data.data.median);
$("#result-"+data.token+" .mean").html(data.data.avg);
$("#result-"+data.token+" .max").html(data.data.max);
$("#result-"+data.token+" .stddev").html(data.data.stddev);
$("#result-"+data.token+" .MBps").html((data.data.bytes/data.data.total).toFixed(4));
$("#result-"+data.token).addClass(data.data.result);
} else if (data.type == "error") {
$("#result-"+data.token+" .status").html("Error");
$("#messages").html(data.data+"<br />");
} else {
console.log(data);
}
};
}
function write_error(msg) {
$("#messages").css("display","block").html(msg);
}
function disconnect() {
ws.close();
$("#server_url").attr("disabled","disabled");
$("#toggle_connect").html("Connect");
}
function toggle_connect() {
if ($("#server_url").attr("disabled") == "disabled") {
disconnect();
} else {
connect();
}
}
function send() {
$("#messages").css("display","none");
if (ws === undefined || ws.readyState != 1) {
write_error("Websocket is not avaliable for writing");
return;
}
ws.send($("#msg").val());
}
</script>
<style>
body,html {
margin: 0px;
padding: 0px;
font-family: Tahoma,Arial,Verdana,sans-serif;
background-color: #F4F4F4;
}
#server_url {
width: 200px;
}
h2 {
font-size: 18px;
margin: 20px 20px;
}
#controls {
/*float:right;*/
background-color: #333;
color: white;
font-size: 14px;
padding: 4px;
}
#msg {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
display: block;
height: 5em;
}
#message_input button {
display: block;
}
#message_input {
margin: 0px 20px;
}
#results {
margin: 0px 20px;
}
#results table {
width: 100%;
border: 1px solid white;
color: white;
border-collapse: collapse;
border-spacing: 0px;
}
#messages {
display: none;
margin: 20px;
padding: 4px;
color: white;
}
th,td {
font-weight: normal;
padding: 6px;
font-size: 0.8em;
border: 1px solid white;
}
thead tr {
background-color: #048;
}
tbody tr {
background-color: #666;
}
.pass {
background-color: #0A0;
}
.fail {
background-color: #900;
}
.error {
background-color: #9A0;
}
</style>
<div id="controls">
<div id="server">
<input type="text" name="server_url" id="server_url" value="ws://localhost:9050" />
<button id="toggle_connect" onclick="toggle_connect();">Connect</button>
<span id="server_details"></span>
</div>
</div>
<h2>Run Test</h2>
<div id="message_input">
<textarea type="text" id="msg">message_test:uri=ws://localhost:9002;size=10;count=1;timeout=10000;binary=true;sync=true;correctness=exact;token=foo;quantile_count=10;rtts=false;</textarea><br />
<button onclick="send();">Run Test</button>
</div>
<h2>Test Results</h2>
<div id="messages" class='fail'></div>
<div id="results">
<table>
<thead>
<tr>
<th>Token</th>
<th>Status</th>
<th>Result</th>
<th>Time (µs)</th>
<th>Size (bytes)</th>
<th>Min</th>
<th>Median</th>
<th>Mean</th>
<th>Max</th>
<th>Stddev</th>
<th>MB/sec</th>
</tr>
</thead>
<tbody id="results-body">
</tbody>
</table>
</div>
</body>
</html>