An introduction to websocket

What are websocket?

“The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.”

This is how Mozilla defines websocket on their developer documentation page. What this means in simpler words is that websocket are a way for browser to remain connected to the server over a period of time to keep sending or receiving data from the server, which is useful for scenarios such as updating location data on the fly, pulling social feeds in automatically, building high-performance games in a browser, and collecting more clickstream data etc.

Where should you use websocket?

Websocket are useful for real-time applications where data shown in client is changing constantly. Some examples for this are chat, collaborative document editing, stock trading applications, and multiplayer online games etc.

Why should you use websocket in such scenarios?

To understood why websocket are suitable for these scenarios, let us first look into what technologies were previously used for simulating real-time connections on the web.

Alternatives to websocket:-

• Polling:-

A synchronous method wherein the client makes a request to the server to see if there is any information available. The client receives a response from the server even if there is no information available. Basically, this is an AJAX request, using XmlHttpRequest.

Polling works well for cases where the exact interval of message availability is known. However, in most real-time applications, message frequency is often unpredictable. In addition, polling requires the client to open and close many unnecessary connections.

• Long polling:-

Also known as Comet, this is another popular communication method in which the client opens a connection with the server for a set duration. If the server does not have any information, it holds the request open until it has any information for the client, or until it reaches the end of a designated time limit (timeout).

Essentially, Comet delays the completion of the HTTP response until the server has something to send to the client, a technique often called a hanging-GET or pending-POST.

The fact that the client has to constantly reconnect to the server for new information makes long polling a bad choice for many real-time applications.

The WebSocket Protocol is a better solution for real-time application than both of the methods mentioned above.

It allows the creation of full-duplex, bidirectional connections between a client and a server over the web. It provides a way to create persistent, low latency connections that support transactions handled by either the client or the server.

How do websocket work?

The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.

Create a WebSocket Connection

To connect to a remote host, create a new WebSocket object instance and provide the new object with the URL of the target endpoint. Once established, WebSocket messages can be sent back and forth using the methods defined by the WebSocket interface.

To create a connection, call Javascript’s WebSocket constructor, which returns the connection instance object. You can then listen for events on that object. These events are triggered when the connection opens or closes, messages arrive, or errors occur. You can interact with the WebSocket instance to send messages or close the connection.

The WebSocket constructor takes one required argument: the URL to which we want to connect. There is one optional argument that specifies a protocol.

        // Connecting to the server on the given url
        ws = new WebSocket('ws://localhost:8080');

Websocket Events

• Open: The server responds to the WebSocket connection request. It indicates that the handshake has taken place and the connection is established. The callback to the open event is called onopen.

        // Event handler for connection opened event
        ws.onopen = function(message) {
          // Send a text message back to server
          ws.send('This is a message sent from browser to server using WebSocket.');
        };

• Message: The client receives data from the server. WebSocket messages contain the data from the server. The callback for the message event is onmessage.

        // Event handler for receiving text messages
        ws.onmessage = function(message) {
          console.log('Message received', message);
        };

• Error: There is any error in communication. The corresponding callback to the error event is onerror.

        // Event handler for errors in the WebSocket object
        ws.onerror = function(e) {
          console.log(‘WebSocket Error:’ , e);
        };

• Close: The connection is closed. The corresponding callback to the close event is onclose.

        // Event handler for connection closed event
        ws.onclose = function(message) {
          console.log(‘Connection closed’, e);
        };

Websocket Methods

• send(): The socket.send(data) method transmits data using the connection. If for some reasons the connection is not available or the connection is closed, it throws an exception about the invalid connection state.

        // Send a message to the server/client
        ws.send('This is a message sent from browser to server using WebSockets.');

• close(): The socket.close() method is used to terminate any existing connection. If the connection is already closed, then the method has no effect. The close() method has two optional arguments: code (a numerical status code) and reason (a text string).

        // Ask server to close the WebSocket connection
        ws.close(1000, 'Closing Connection Normally');

Demo of live twitter feed:-

I have implemented a demo app which shows a live feed of tweets related to javascript. Feel free to clone the repository and play around with it here.

What are the drawbacks of websocket?

• With websocket, it's harder to achieve reliable communication, especially for mobile users who may have spotty network coverage or IP addresses that change. To use websocket with success, you'll need an aggressive timeout and reconnection strategy.
• Another disadvantage with using websocket is that it keeps the connection open on the server for the duration of the time the user is interacting with the page. This will increase the demand on the server, and means that you will always have to scale OUT rather than UP.
• Same-origin-policy, an important part of security on the web, is not as strictly enforced for websocket as normal http/https requests. Read more about it here.

When should you avoid using websocket?

• If you are creating an app that only needs to update periodically or based on user events, then websocket is a less suitable choice.
• Anything which can be cached or proxied will be the wrong place for using websocket.
• Websocket should not be used for fetching CDN resources.

Takeaway

When you need to build real-time application where browser/client needs to continuous data update, Websocket are the best tool for that scenario. However avoid using websocket for anything which can be cached or proxied.

References:-

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

https://www.linode.com/docs/development/introduction-to-websockets/

https://socket.io/#examples

https://blog.securityevaluators.com/websockets-not-bound-by-cors-does-this-mean-2e7819374acc

---