Question

I have a code like below:

var ws = new WebSocket("ws://localhost");
ws.onopen = function() {
    // Long running loop
    for (var i = 0; i < 1000000; i++) {
        ws.send(i);
        console.log(i);
    }
};

The server only receives message (or I believe the client only starts sending message) after the loop gets completed. Why is this so?

Answer 1

Some areas of execution with a page are:

• JavaScript
• DOM rendering
• Network

I’ve not tested this for a while, but I’m assuming it is still the case, that if you execute a function (or run code in one scope) then if you make a call to update the DOM or make a network request that won’t happen until the current scope exists.

e.g.

function doSomething() {
  document.body.innerHTML += 'hello';
  var ws = new WebSocket('ws://my-websocket-endpoint.com');
  ws.onopen = function() { alert( 'awesome!' ); };
}

doSomething();

In the code above the following will happen:

• doSomething executes and the internal code is run.
• doSomething returns and the scope changes
• ‘hello’ then appears in the DOM as the browser gives the UI thread a chance to run any pending updates
• The WebSocket connection is made
• It may be a while until the alert fires.

Looking specifically at the WebSocket example. If you think about the fact we can add event handlers after we create the WebSocket instance this means that the connection doesn’t occur as soon as we call the constructor. The connection is only attempted when the current scope of executions completes. I can’t 100% confirm this, but it’s also highly unlikely that the WebSocket.send function actually sends any data until the scope of execution completes e.g.

var ws = new WebSocket('ws://my-websocket-endpoint.com');

function sendStuff() {
  for( var i = 0; i < 10000; ++i ) {
    ws.send( i );
  }
}

// Assume we are connected
sendStuff();

In the above code I would expect:

• sendStuff to be called, run the loop and exit
• The browser to then deal with anything else that’s pending, including network activity. This includes actually sending the data