browserwebsocketreconnect

Reconnecting a WebSocket without creating a new instance


So I have created a new web application that uses a WebSocket to Node.JS WebSocket server. Now the Node server does everything it needs to and works perfectly. My problem is with the browser implementation.

I have looked at a lot of the libraries other people have been given in the answers, but I want to see if their is a better or cleaner way to do this.

So in my instance, I essentially create an object, which wraps the WebSocket and then uses a setInterval to reconnect, by calling connect(url), which will create another WebSocket instance.

I have been looking at connections and clients, and it seems that if a connection closes, say the server goes down, or something happens, it looks as though sometimes, in a longer period of time, the WebSocket connections are doubling up, so instead of 1 connection per client, it is 2, 3 or 4...?

I have a feeling this is because I am making a new instance of the WebSocket each time?

Code below:

// Main Function
function WSWrapper() {

    // Variables
    this.socket = null;
    this.enabled = false;
    this.retry = false;

    // Connect
    this.connect = function(address) {

        // Sets the address
        this.address = address;

        // Creates the websocket connection
        this.socket = new WebSocket(address);

        // On message event handler
        this.socket.onmessage = function(event) {

            // Do stuff here

        }

        this.socket.onopen = function(event) {

            // On connect, disable retry system
            window.ta.enabled = true;
            window.ta.retry = false;

        }

        this.socket.onclose = function(event) {

            // On close, enable retry system, disable bidding
            window.ta.enabled = false;
            window.ta.retry = true;
            window.ta.bidEnabled = false;

        }

        this.socket.onerror = function(event) {

            // Set variables off
            window.ta.enabled = false;
            window.ta.bidEnabled = false;
            window.ta.retry = true;

        }

        return true;
    }


    // Close Socket
    this.closeSocket = function() {

        // Shutdown websocket
        this.socket.close();
        return true;

    }

    // Send Message
    this.socketSend = function(content) {
        this.socket.send(content);
        return true;
    }

    // Retry System: Attempts to reconnect when a connection is dropped
    this.repeat = setInterval(function() {
        if (window.ta.enabled == false && window.ta.retry == true) {
            window.ta.connect(window.ta.address);
        }

    }, 2000);

}

window.ta = new WSWrapper();
window.ta.connect('wss://example.com');

I have come up with some thoughts and questions, any answers would be good.

  1. Is there a way to reconnect the same socket? like an .open(url) function that will re-open the connection? I looked in the chrome console, and went through the prototype for the WebSocket, but I see nothing there, so I don't think so but would love to be told otherwise.

  2. Could I fix this by using some functions that take the information, so for example, I create the WebSocket instance and then pass all requests to another function to manage the message information, and then when a connection disconnects, I can somehow delete the old instance and re-create a new one?

Anything would be good, as I am really not sure, it seems that everyone makes a wrapper (like I am doing), but does things differently, so what is the best way or the preferred way, that won't cause multiple instances of the socket to keep running? If there is a problem with my code then please explain!

Thanks


Solution

  • just an update on this, I was able to take the following code: https://github.com/websockets/ws/wiki/Websocket-client-implementation-for-auto-reconnect

    And amend it to work for me in the browser. See the below code, remember this is an adaption from the above, so I take no credit in the code.

    // Define WSClient instance
    window.WSClient = {
    
        // Default reconnect interval
        reconnectInterval: 5000,
    
        // Define whether it has ever reconnected
        reconnected: false,
    
        // Log messages
        debug: false,
    
        // Open the URL
        open: function(url) {
    
            // Define that
            var that = this;
    
            // Open the URL
            this.url = url;
    
            // Create underlying websocket instance
            this.instance = new WebSocket(this.url);
    
            // Setup the event handler for onopen
            this.instance.onopen = function (ev) {
    
                // If it has ever reconnected lets say that
                if (that.reconnected && that.debug) {
                    console.log('[WS]: Reconnected.');
                }
    
                // Run the open function
                that.onopen(ev);
            }
    
            // Setup the event handler for onmessage
            this.instance.onmessage = function(data, flags) {
                that.onmessage(data, flags);
            }
    
            // Setup the event handler for onclose
            this.instance.onclose = function(e) {
                switch (e){
    
                    // Normal closure
                    case 1000:
                        if (that.debug) {
                            console.log("[WS]: Closed");
                        }
                        break;
    
                    // Abnormal closure
                    default:
                        that.reconnect(e);
                        break;
                }
    
                // Run onclose event
                that.onclose(e);
            }
    
            // Setup the event handler for onerror
            this.instance.onerror = function(e) {
                switch (e.code){
    
                    // Try and reconnect
                    case 'ECONNREFUSED':
                        that.reconnect(e);
                        break;
    
                    // Otherwise run error
                    default:
                        that.onerror(e);
                        break;
                }
            }
        },
    
        // Setup send function
        sendRaw: function(data, option) {
            try {
                this.instance.send(data, option);
            } catch (e) {
                this.instance.emit('error', e);
            }
        },
    
        // Send the content
        send: function(content) {
            this.instance.send(content);
        },
    
        // Define the reconnection function
        reconnect: function(e) {
    
            // Define that
            var that = this;
    
            // Log reconnection
            if (that.debug) {
                console.log(`[WS]: Reconnecting in ${this.reconnectInterval / 1000} seconds.`);
            }
    
            // Set reconnect timeout
            setTimeout(function() {
    
                // Log reconnecting
                if (that.debug) {
                    console.log("[WS]: Reconnecting...");
                }
    
                // Define has reconnected
                that.reconnected = true;
    
                // Try and open the URL
                that.open(that.url);
    
            }, this.reconnectInterval);
        },
    }
    

    So I use this in the Vue.JS framework like so:

    <script type="text/javascript">
    
        // Define the websocket
        window.vm['socket_example'] = new Vue({
            el: '#socket_example',
            name: 'SocketExample',
            data: {},
            methods: {
    
                // On connection open
                socket_open: function(event) {
    
                    // Send get lots function
                    this.$socket.send('some_content_here');
    
                },
    
                // On connection close
                socket_close: function(event) {
    
                },
    
                // On connection error
                socket_error: function(error) {
    
                },
    
                // On connection message
                socket_message: function(event) {
    
                },
    
            },
    
            mounted: function() {
    
                // Setup WebSocket connection
                this.$socket = WSClient;
                this.$socket.debug = true;
                this.$socket.open('<?php echo $endpoint; ?>');
    
                // Setup websocket listeners
                this.$socket.onopen = this.socket_open;
                this.$socket.onclose = this.socket_close;
                this.$socket.onerror = this.socket_error;
                this.$socket.onmessage = this.socket_message;
    
            },
        });
    </script>
    

    Anyway I hope this was helpful!