0

I have a question on when a websocket opens.

it seems to stay pending until the constructor of my class is completed, no matter how much time has passed. Is this an internal browser mechanism or will the following code ever have a race condition?

class TestSockets {
    constructor() {
        this.csrf = getCSRF()
        this.socketURL = "wss://" + window.location.hostname + "/path?csrf=" + this.csrf;
        this.WSConnection = new WebSocket(this.socketURL);

        wait(10000)

        console.log(this.WSConnection.readyState)
        this.WSConnection.onmessage = function (e) {
            console.log('Server: ' + e.data);
        };

        wait(10000)
        console.log(this.WSConnection.readyState)
    }

    getMessage1() {    
        this.WSConnection.send('{"name":"messageinfo","args":[{}]}')
    }

    getMessage2() {    
        this.WSConnection.send('{"name":"messageinfo2","args":[{}]}')
    }

    getMessage3() {    
        this.WSConnection.send('{"name":"messageinfo3","args":[{}]}')
    }

    close() {
        this.WSConnection.close()
    }

}

The usage would be...

let ts = new TestSockets()
ts.getMessage1()
ts.getMessage2()
ts.close()

ignore the usefulness of this at the moment as this is mostly an example so I can get an explanation on when the open occurs. I noticed that the socket was pending up until the constructor ended. I tried a bunch of different things, but I couldn't nail down exactly when the socket is suppose to be opened.

if it was opened because of the constructor closing, is that how websockets work, they open when the scope is complete? or was mine just too fast to see it open async and I have blocking code preventing it?

I am unsure if my code only acts like this because of the constructor or what, any insight into this would be awesome.

edit blocking wait function:

function wait(ms) {
    var start = Date.now(),
        now = start;
    while (now - start < ms) {
      now = Date.now();
    }
}

edit 2

While searching a bit more I stumbled upon the terminology I was looking for the "event loop", in which I found this...

How does JavaScript handle AJAX responses in the background?

I think this solved, it isn't exactly a duplicate of this question, but I think it answers it anyway. I have marked it as a duplicate.

Krum110487
  • 611
  • 1
  • 7
  • 20
  • 1
    JavaScript in browsers is not [multi-threaded](https://stackoverflow.com/questions/39879/why-doesnt-javascript-support-multithreading). So when you busy-sleep in your wait function, the websocket is also not connecting. You will need to go async to get what you want. – fredrik Feb 05 '20 at 21:38
  • Also, maybe try adding an `onopen` handler to verify that the socket is getting to open state? – dmitrydwhite Feb 05 '20 at 21:39
  • No, that doesn't exactly answer my question, it was more about when is the "Open" added to the call stack, as I understand "async" items in browsers is that process of an HTTP request or socket IS in it's own thread. Then the callback is pushed back onto the call stack. The question I have is, if I have enough logic in the constructor, is it possible for the callback to be put back on the call stack before the "getMessage" function is called. I used onopen and calling the getMessage1 manually, but it wasn't working because the socket was already open. So I was intrigued about the timing. – Krum110487 Feb 06 '20 at 14:40
  • I am playing around with more examples with other async, I assume sockets are async, but I am not sure about timing of async calls being added back to the call stack. I am messing with Loupe http://latentflip.com/loupe to see if I can get a clear answer or at least better question. – Krum110487 Feb 06 '20 at 14:44
  • I think this page answers my question more closely, I just needed the terminology, the "event loop" only looks for async responses when the call stack is empty, which is why when I ran it manually, it would complete before I could run the functions, but not when they are called all at once on the call stack. https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif – Krum110487 Feb 06 '20 at 17:14

0 Answers0