Checking for WebSocket Support on Your Web Browser

It’s frustrating to execute some code and don’t see anything happening after that. But, depending on the web browser you or the end user running your application is using that may be impacting the WebSocket functionality at this point since not all current browsers in use support HTML5 WebSocket natively yet.

So, let’s take a look on some techniques to make the web browser supports WebSocket.

We are going to use the JavaScript console available in all web browsers to start with the WebSocket support investigation. Each web browser has a different way to initiate the JavaScript console but if you’re using the suggested web browser (Google Chrome) take a look on the following resource to learn more about it (https://developers.google.com/chrome-developer-tools/docs/overview).

If you open your browser’s interactive JavaScript console and evaluate the expression window.WebSocket you should see the WebSocket constructor object:

 function WebSocket() { [native code] }

which means that your web browser supports WebSocket natively.

The same test above in some other browsers comes back blank or undefined indicating no native support.

If you want to add that capability for WebSocket support to your application or on our sample client code, you can use the following approach.

By just adding the following conditional check to your code before you try the WebSocket connection then it would be enough to tell you if the web browser supports WebSocket natively.

if (window.WebSocket){
     console.log("BROWSER SUPPORTED");
} else {
     console.log("BROWSER NOT SUPPORTED");
}

If your target web browser doesn't support HTML5 WebSocket and you want to have that amazing capability on your application, it's time for you to look into some vendors like Kaazing where you have WebSocket emulation that enables any browser (modern or not) to support the HTML5 WebSocket standard APIs.

From the developers perspective they can work in a fully transparent environment, using the client libraries that enable them to simply code against standard WebSocket APIs. And from the end-user point of view, they interact with a WebSocket application that Kaazing’s WebSocket emulation technology kicks in when native WebSocket support is unavailable, giving the user a seamless experience.

There are several web sites available on the Internet to help you with compatibility, not only WebSocket, but also HTML5 features in general. To mention a couple of them, you can navigate to http://caniuse.com/ or http://html5please.com/ and check for the HTML5 feature you want to use on the target web browser manufacturer and/or version.

The WebSocket readyState attribute

The WebSocket object will report the state of its connection through a read-only attribute called readyState.

There are four different values that the readyState attribute can receive to represent the state of the connection.

0 - CONNECTING – The connection has not been established yet.
1 - OPEN – The connection has been established and messages can be exchanged between the client and the server.
2 - CLOSING – The connection is going through the closing handshake.
3 - CLOSED – The connection has been closed or could not be opened.

When the WebSocket object is first created its readyState is 0, indicating that the socket is CONNECTING.