Vishal
Vishal

Reputation: 20627

WebSocket sends message only after the loop get completed

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?

Upvotes: 1

Views: 3837

Answers (2)

simonc
simonc

Reputation: 42175

It doesn't answer your question but its worth noting that your code looks incorrect.

Your new WebSocket call initiates an asynchronous handshake with the server. When this completes, any onopen callback you registered on your websocket will run. It is only at this time you can call ws.send and expect the server to receive your message.

You could then rework your example to

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

Upvotes: 1

leggetter
leggetter

Reputation: 15467

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

Upvotes: 2

Related Questions