在JS API中并为JS API建立WebSocket连接

Question

Aim: In order to provide a simple, easy-to-use JS library that communicates with a server I am trying to establish a WebSocket connection at the start of my API and define the library's functionality thereafter.

Problem: The issue is that my socket's readystate does not transition to 1 (ready) before the library is loaded and the user's script is run. Debugging this has confirmed this and I'm not sure how to ensure my WebSocket is established before proceeding with the user's script.

What I have:

(function(myObject) {

var socket = new WebSocket(url);

socket.emit = function() {
    //do some tasks and create a var "message"
    socket.send(message);
}

window.myObject = myObject.prototype = {
    doSomething: function() {
        socket.emit();  
    }
}

}(myObject = window.myObject || {}));

Above, I've defined a custom method (socket.emit()) on the socket object that, in turn, calls socket.send(). I do this to manipulate some data before sending it via socket.send(), reusing code that would otherwise be repeated.

Then I have some very basic html that includes this JS library and a simple script runs as follows:

$(document).ready(function() {
    myObject.doSomething();
});

The error I get is: "Failed to execute 'send' on 'Websocket': already in CONNECTING state."

The library successfully loads but the Websocket does not complete connection before the client script is run. How can I ensure my WebSocket is connected (readystate == 1) before the API finishes loading?

Thanks for the help!

Answer 1

What you could do is buffer all messages in socket.emit as long as the socket is not connected and send them once you receive the onOpen callback.

While this will handle your current problem you will see that new ones will arise: You might want to handle disconnects from your server and reconnects and therefore you might need to extend your library API anyhow to also expose connectionstate change events and force the library user to only send messages when connected.