JSFiddle - React, Tailwind, and code Playground
HTML
<div id="count">Updates go here</div>
We will send a bunch of messages to a websocket server and wait for them all to come back. We will update the div above with each.
<br/>
<button id="begin">Begin Test With DOM Updates</button>
<button id="begin2">Begin Test Without DOM Updates</button>
<div id="log"></div>
JavaScript
var echoServer = "wss://echo.websocket.org/",
countDiv = document.getElementById("count"),
updateDOM = true,
beginButton = document.getElementById("begin"),
beginButton2 = document.getElementById("begin2"),
counter2,
counter, startTime, performUpdate = function() {
countDiv.innerHTML = "Received message " + counter2++ + " @ " + (Date.now() - startTime);
},
socket, endTest = function(msg) {
var ws = socket;
socket = undefined;
if (ws) {
if (!msg) {
msg = "All updates completed in " + (Date.now() - startTime) + "ms";
}
console.log(msg);
document.getElementById("log").innerHTML = msg;
beginButton.disabled = false;
beginButton2.disabled = false;
try {
ws.close();
}
catch (e) {}
}
},
wsMessage = function(e) {
--counter;
if (updateDOM) {
performUpdate();
}
if (!counter) {
endTest();
}
},
wsError = function() {
endTest("WebSocket error");
},
wsClose = function() {
endTest("WebSocket Closed");
},
wsOpen = function(e) {
startTime = Date.now();
counter2 = 0;
document.getElementById("log").innerHTML = "sending messages";
for (counter = 0; counter < 100; ++counter) {
if (socket) {
socket.send("Message " + counter);
}
}
document.getElementById("log").innerHTML = "waiting for replies";
},
runTest = function() {
beginButton.disabled = true;
beginButton2.disabled = true;
updateDOM = (this === beginButton);
document.getElementById("log").innerHTML = "connecting socket";
// connect websocket
var ws = socket = new WebSocket(echoServer);
ws.onerror = wsError;
ws.onmessage = wsMessage;
ws.onopen =...