Real-time | Bi-directional | Client-Server | HTML5

Udara Bibile

Sep 11, 2017·5 min read

Any developer working with client-server architecture ran into problem of how to push server changes to clients. The feature of communication from server to client is one of main factors in ensuring real-timeliness of client application.

There were viable options such as AJAX, long-polling, short-polling, & HTML 5 server-sent events. For comparison overview look into this stack-overflow answer.

In long-polling, client will send AJAX-like request to server. With suitable timeout, server would send back response if & when there’s update. Here the client will continuously & periodically request update from the server, through separate TCP connections, congesting network traffic.

In short-polling, client periodically send request to server asking if there’s anything new. Server doesn’t wait, but rather send back if there’s update or just empty message. Here network gets even more congested with these continuous requests, even when there’s no updates.

WebSocket

WebSockets can be regarded as the future of client-server communication. In WebSockets there would be one TCP connection between client & server at all times. There’s bi-directional data flow between client & server as well as real-time nature due to always open TCP connection.

Considering protocols there’s huge potential for speed gain in WebSockets. HTTP header is 100s of Bytes while Socket header is just 2 Bytes. So after initial HTTP Handshake, Sockets can communicate with much less overhead. This statistics of less overhead surely adds up more speed in client-server communication process.

For web based applications comes HTML 5 WebSockets, where JavaScript is used for communication in compliant browsers. Developers can just use WebSocket for managing client side socket. For server side there’s various implementation for Java, .NET, Python, C++, NodeJS.

Socket.IO

Socket.IO is JavaScript implementation to work with HTML 5 WebSockets. In can be used in NodeJS & based server frameworks for server-side, while client-side can be integrated with pure JavaScript, AngularJS, React.

Socket.IO proves to be promising with over 35K GitHub Stars. Furthermore it’s stable for production level with V2.0.0 being released in 2017.

Initialize Connection

To begin with need to install npm package by npm install socket.io. Client can use client code from existing socket.io package, use CDN Javascript file, or client based socket.io-client. The server is based on Express in this case but plain NodeJS code is there in the documentation.

In this instance when we simply connect to localhost:3000 in the browser it can be seen in the running server instance as ‘a user connected’. Initialization of connection is simple as that.

Bidirectional Communication

Communication between client and server is even simpler. The sender would such have to socket.emit, while client can listen on socket.on.

Here the channel is custom_event which is either client or server can emit (send) or on (receive).

Real-time Chat Application

In this application it can be clearly seen how bidirectional communication works. The chat application is really simple and real-time.

In this chat application client.html would socket.emit to ‘sending’ socket channel. The server.js is listening to ‘sending’ using socket.io. When server receives message from ‘sending’, server would just socket.emit to ‘receive’ channel for client.html listeners.

So if we open two browser tabs of localhost:3000, and send message from one tab, it will instantly appear on the other tab. In the code segment it is seen that both client and server use socket.emit & socket.on, hence bidirectional communication.

Moreover from my experience I can conclude that SocketIO is extremely fast as well. I have used AngularJS 1.x Client application with server socket.io variant for Python called Flask-SocketIO. In that application it was able to push data from server to client at a rate of 0.001s. Therefore it is possible for high frequency tasks such as stock market boards.

Advanced…

For more advanced socket.io usage it’s needed to identify clients uniquely. One such approach is to login to the server using connection such as socket.emit('login',{username:'abc', password: 'abc'}). Server will be listening to login connection and validate credentials. Afterwards server can emit socket.emit('login_success', {user_id: 123}). With login_success event both server & client is aware that user_id is 123 for that specific user. Afterwards both parties can make use of user_id value to individually connect to clients. Simply both parties can make use of socket.emit('123') or socket.on(user_id) to communicate individually, without pushing to all the clients.

Namespaces & Rooms

Another cool feature of socket.io is namespaces & rooms. Namespaces provide functionality to group connections together.

Furthermore there’s more functionalities known as rooms inside each namespaces. Simply socket.io can be used to make customizatable and flexible connections to be used for every need.

Socket.io also provides functionality to work outside of namespace / rooms barrier. Most notable npm packages are socket.io-redis and socket.io-emitter for sending socket message from outside the socket.io context.

WebRTC

WebRTC is an easy way to implement for peer-to-peer (P2P) communication, also being HTML 5 feature like WebSockets. With P2P communication file sharing, video calling is supported from browser-to-browser.

Even though WebRTC is not directly related to socket.io, there’s another product to provide P2P communication, known as socket.io-p2p.

Here WebRTC connection between peers are setup using socket.io. Server is needed for initialization of WebRTC connection, even though communication is P2P. Here peers will connect to server and complete signaling process to identify each other for P2P communication.

When WebRTC connection between peers are initialized, server wouldn’t get involved. This will increase network performance as well as privacy. Data will not be going through the server, hence privacy between the peers.

( Note: Using socket.io-p2p is not much recommended for production level since the repository is kind of outdated without much recent commits.)

I hope this article was able to give brief idea about HTML5 WebSockets & SocketIO. Your next client-server real-time application can be implemented using this interested technology with bidirectional communication. Feel free to comment or point out if there’s anything!