Can I catch the “can't establish a connection” error for a failed websocket connection?

Question

I need to test if the connection to my websocket server is established or not.

At this time, I CAN connect to the server, but I want to be able to catch the possibility of that server not being reachable, so this question is about what to do when the websocket connection cannot be established or when it times out.

Using just the basic websocket code in Firefox, it will timeout in about 20 seconds and call my error handler. But it will also throw a JavaScript error that (at least for me using Firebug) shows up in the browser. The log then shows:

Firefox can't establish a connection to the server at ws://192.168.0.1/.

What I've tried so far:

• Prevent the 20 second timeout by adding my own window.timeout that checks if the onopen handler has been called yet or not, but that does not prevent the JavaScript error.

• Force-close the websocket at the end of my own timeout, but now I get TWO JavaScript errors - the original plus:

  The connection to ws://192.168.0.1/ was interrupted while the page was loading.

• Adding try {} catch(e) {} to my code, both when connecting the socket and closing it - no change.

Any ideas on how to get websocket errors to not show in the browser?

Answer 1

What i've learnd so far is: you cant :0(

... because this is somewhat browser specific behavior...

• so the only thing you can do is using callbacks on ws object and pray ...
• OR just overwrite console.log ;0)

with the code i did however i got rid of some error messages, maybe it'll help ;)

eg:

• Chrome won't complain about dead servers and silently try to reconnect..
• IE 11 still gives script error
• etc..

A Basic Class to wrap WS : Have a look at callbacks !

/**
 * Socket Class
 */
Client.Source.Network.Socket.Class = new Class({ implements: [Client.Source.Network.Socket.Interface] },function( Host, Port ){

var Configuration = {
    Server: {
        Protocol: 'ws',
        Host: Host,
        Port: Port
    },
    Event: {
        Open: function(){},
        Error: function(){},
        Message: function(){},
        Close: function(){}
    }
};

var Socket = null;

/**
 * @return {string}
 */
var HostUrl = function() {
    return Configuration.Server.Protocol + '://' + Configuration.Server.Host + ':' + Configuration.Server.Port + '/Connection'
};

/**
 * @returns {boolean}
 */
var IsSupported = function() {
    return "WebSocket" in window;
};

this.Open = function() {
    if( IsSupported() ) {
        Socket = new WebSocket( HostUrl() );
        Socket.onopen = Configuration.Event.Open;
        Socket.onerror = Configuration.Event.Error;
        Socket.onmessage = Configuration.Event.Message;
        Socket.onclose = Configuration.Event.Close;
    } else {

    }
};

this.Send = function( Text ) {
    Socket.send( Text );
};

this.Close = function() {
    Socket.close();
};

this.onOpen = function( Callback ) {
    Configuration.Event.Open = Callback;
};
this.onError = function( Callback ) {
    Configuration.Event.Error = Callback;
};
this.onMessage = function( Callback ) {
    Configuration.Event.Message = Callback;
};
this.onClose = function( Callback ) {
    Configuration.Event.Close = Callback;
};

});

Have a look at the Connect() : onError(), onClose() function

/**
 * Network Class
 */
Client.Source.Network.Class = new Class({ implements: [Client.Source.Network.Interface] },function(){

var _Self = this;
var Socket = null;

this.Connect = function( Host, Port ) {
    Socket = new Client.Source.Network.Socket.Class( Host, Port );
    Socket.onOpen(function(){
        _Self.Gui().Create( Client.Module.Client.Gui() );
        Client.Module.Chat.Message('Connected', 'green', 11);
        Client.Module.Audio.Play( 'Client.Resource.Audio.Chat.UserOnline', 0.2 );
    });
    Socket.onMessage( Response );
    Socket.onError(function(){
        Client.Module.Chat.Message('Connection Error', 'red', 11);
    });
    Socket.onClose(function(){
        _Self.Gui().Destroy();
        Client.Module.Chat.Message('Disconnected', 'darkred', 11);
        Client.Module.Chat.Message('Connecting...', 'orange', 11);
        window.setTimeout(function () {
            _Self.Connect( Host, Port );
        }, 2000);
    });
    Socket.Open();
};

this.Request = function( Application, Request, Data ) {
    Socket.Send( JSON.stringify( { Application: Application, Request: Request, Data: Data } ) );
};
var Response = function( Message ) {
    Message = JSON.parse( Message.data );
    Library[Message.Application].Execute( Message.Request, Message.Data );
};

var Library = {};
this.Protocol = function( Application, Callback ) {
    Library[Application] = Callback;
};

var GuiObject = null;
this.Gui = function Gui() {
    if( GuiObject === null ) {
        GuiObject = new Client.Source.Network.Gui();
    }
    return GuiObject;
};
});