Real-Time Web with JavaScript — II

Now that you have a solid background of how communication evolved on the Web, how it got to Real-Time, and how WebSockets made that easy, better, and efficient. We can start exploring WebSockets in more details and see the mechanisms behind it, and of course examine a few examples.

If you missed the first part, I recommend you read it first and come back.

So, WebSockets huh?

Alright, after establishing the connection. The communication between the client and the server upgrades from an HTTP request/response model to a persistent connection over a socket channel providing full-duplex bidirectional communication. In other words, real-time communication.

Web servers as well as web browsers provide APIs to make the communication happen. Modern browsers have WebSockets supported and enabled by default. A quick line on the browser console will demonstrate that:

> 'WebSocket' in window   // returns true

With web servers, on the other hand, you can find a variety of implementations in most modern languages. It’s best to use third party solutions, though. Because, first, some languages do not have native support for WebSockets, and second, it’s very difficult and frustrating to build a WebSockets server from scratch.

Each languages has its own implementations. NodeJS has many implementations, SocketIO and WS are the most common ones, and it’s better to use them. Why? Because they are the most common ones, didn’t you just read that? I’m kidding.

Well, “most common ones” means large community, better solutions and the widest support. Plus, the WebSocket protocol has been through many incompatible iterations, and you don’t want to use an outdated implementation.

It’s worth noting that if you want to support older versions of browsers, you may want to implement a fallback using the old ways of simulating real-time. I have talked about them in the first part.

Let’s start with WebSockets on the client:

Here is a very basic example which illustrates WebSockets API on clients. So simple and intuitive.

You just instantiate a new socket using the WebSocket class and pass the endpoint as an argument. After that, you create an event listener to handle the connection when it opens, and start listening for messages from the server. Both the client and the server exchange data in a string format. Of course, you can handle that by serializing and deserializing data into JSON.

Here is an example:

Alright, now let’s take a look at the other side. The Server side.

As we discussed before, it’s better to use a third-party library such as WS, or Socket.io. Both modules can be used on the server and the client as well.

let’s examine a simple example with ws, and in the next post we’ll be using Socket.io for a real world example.

WebSockets on the Server:

It’s very similar to what we’ve seen on the client actually. Here is a sample form the ws docs with few changes to accord with our client example:

In the client example, the client would listen for the connection to open and sends a message telling the server it’s ready to communicate:

'Hey Server, I am ready to receive data. Bring it on!'

As soon as the server receives that, it responds with a confirmation message:

'Great!'

And, the communication will continue like that. Pretty much like our day-to-day communication with people. We would at first, initiate the conversation with a greeting,Think of a GET request, in case we don’t know the person we introduce ourselves, think of HTTP headers. After that, we just start talking without greeting and introducing ourselves every time we want to say something (this is how communication without websockets is done. Not good right?).

So, this was a simple explanation of how websockets work illustrating that with a simple example. It’s better to take a look at WebSockets APIs for the client and those of third-party libraries to have a better idea of what we can do with websockets.

A simple exercise

• In a chrome or a Firefox window, open the console and create a socket connection:

let ws = new WebSocket('ws://example.com');

You’ll get an error because the connection can’t be established. It’s okay.

• Then, type the ws variable you created and spend some time exploring it.
• Don’t forget to explore __proto__ as well.

Visit The MDN. It’s a good place to explore more.

Alrighty! I hope you enjoyed this post. If you like it, please hit the heart button and share it. If you don’t do the same. ^^

See you in the next and last part! Stay Tuned!