Skip to content

Instantly share code, notes, and snippets.

@mamrehn
Last active August 29, 2015 14:18
Show Gist options
  • Save mamrehn/f9795776145c161382bf to your computer and use it in GitHub Desktop.
Save mamrehn/f9795776145c161382bf to your computer and use it in GitHub Desktop.
HTML5 WebSocket profiling using ws[s]://echo.websocket.org

WebSocket Test

ws://echo.websocket.org

iterations = 50
dataSize   = 512
mean [ms]  = 105.20454545454545
deviation  = 4.966156120337965
variance   = 24.662706611570233


iterations = 50
dataSize   = 512
mean [ms]  = 105.625
deviation  = 10.256349659276117
variance   = 105.19270833333333


iterations = 50
dataSize   = 4096
mean [ms]  = 301.0833333333333
deviation  = 35.27540455709426
variance   = 1244.3541666666667

wss://echo.websocket.org

iterations = 25
dataSize   = 512
mean [ms]  = 108.86363636363636
deviation  = 8.910134447233027
variance   = 79.3904958677686


iterations = 50
dataSize   = 4096
mean [ms]  = 315.4
deviation  = 67.32148882149636
variance   = 4532.182857142859


iterations = 50
dataSize   = 4096
mean [ms]  = 319.7142857142857
deviation  = 37.6946918798704
variance   = 1420.8897959183673
<!DOCTYPE html>
<html>
<head>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="script.js"></script>
<title>HTML5 WebSocket profiling</title>
</head>
<body>
<h2>WebSocket Test</h2>
<div id="outcome"></div>
</body>
</html>
// http://www.websocket.org/echo.html
var wsUri = "wss://echo.websocket.org/";
var outcome;
var time = {'start': [], 'end': []};
var timeDiff = [];
var count = 0;
var websocket;
var debug = false;
var dataSize = 512;
var iters = 25;
var message = JSON.stringify({
'some': {
'foo': 'bar',
'baz': [1, 2, 3, 4]
},
'data': chance.pick(
Array.apply(null, Array(5000)).map(function(_, i) {return i;}), // same as _.range(5000)
dataSize
)
}); //, null, 2);
// http://jsfiddle.net/hiddenloop/TPeJt/
var average = function(a) {
var r = {mean: 0, variance: 0, deviation: 0}, t = a.length;
for (var m, s = 0, l = t; l--; s += a[l]);
for (m = r.mean = s / t, l = t, s = 0; l--; s += Math.pow(a[l] - m, 2));
return r.deviation = Math.sqrt(r.variance = s / t), r;
};
function init() {
outcome = document.getElementById("outcome");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
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) {
if (debug)
writeToScreen("CONNECTED");
doSend(message);
}
function onClose(evt) {
if (debug)
writeToScreen("DISCONNECTED");
if (count++ > iters) {
timeDiff = [];
for (var i = 0; i < time.start.length; ++i) {
var diff = time.end[i] - time.start[i];
if (0 < diff)
timeDiff.push(diff);
}
var x = average(timeDiff);
writeToScreen(
"iterations = " + iters + "<br />" +
"dataSize = " + dataSize + "<br />" +
"mean [ms] = " + x.mean + "<br />" +
"deviation = " + x.deviation + "<br />" +
"variance = " + x.variance + "<br /><br />"
);
return;
}
testWebSocket();
}
function onMessage(evt) {
time.end.push((new Date()).getMilliseconds());
if (debug)
writeToScreen('<span style="color: blue;">RESPONSE:' + evt.data + '</span>');
writeToScreen('<code>Time: ' + (time.end[time.start.length - 1] - time.start[time.start.length - 1]) + 'ms</code>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
time.start.push((new Date()).getMilliseconds());
if (debug)
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var p = document.createElement("p");
p.style.wordWrap = "break-word";
p.innerHTML = message;
outcome.appendChild(p);
}
window.addEventListener("load", init, false);
@mamrehn
Copy link
Author

mamrehn commented Apr 8, 2015

Test it at Plunker.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment