Web based applications and solutions provide services that has to do with manipulation, interaction, and presentation of data. One of the greatest advantages of a web-based solution versus other technologies is its unparalleled accessibility for their clients. Successful web applications take advantage of this strength and is able to connect a large number clients in conjunction with dynamic and persistent data, and is capable of presenting the result of their services in a responsive, up-to-date manner. Real time web applications have a plethora of use cases and the technologies involved are likely present in many of the applications we encounter daily. To mention a few, real time feeds in social media, multiplayer gaming, real time collaborative environments, real time chats, real time data visualization, and the list goes on.
It is worth noting that depending on the nature of the application, this connectivity and responsiveness between the clients may not be necessary; if your application’s data is static, prevents its clients from mutating the data, or each client’s experience is completely independent from any other client’s activity, this kind of feature is not needed. However, the use cases for this scenario are rather boring and undermines the opportunity presented by being connected to the world wide web. So, for the sake of the content of this article and your experience, we will now stop this train of thought. forever.
At this point, you, as a reader might be wondering how do these real time features work? How are they implemented and what solutions and services are available out there? This article will address these questions as we explore the different technologies available and walk through some simple implementations.
Life before WebSockets — HTTP
Web technologies are built on HTTP protocol which is essentially a request-response mechanism. The connection flow can be boiled down to opening of a connection, client sending a request, server sending a response to the client, and closing of the connection. It is a strictly unidirectional: any data sent from the server to the client must first be requested by the client. Under this protocol, it is impossible for clients to know when new data is available for them, and this is a problem when the application is trying to present the most recent and relevant data to the clients. Developers tried to circumvent this shortcoming by using methods such as long polling and comet technique, which essentially emulated real time communications. However, they proved to be rather tricky to pull off and came with various unexpected complications.
WebSockets
Enter WebSockets!
WebSocket is a connection between a client and the server that is persistent and bidirectional. It can provide a full-duplex communications channel that operates over HTTP through a single TCP/IP socket connection. Once a WebSocket connection is established, the server and the client can send messages (data) to each other at any time without an explicit request. Fantastic!
The life cycle of a WebSocket connection is as follows; it uses the standard HTTP request and response to perform an initial ‘handshake’, where the client asks to open a WebSocket connection to the server. Once this authorization and authentication is complete, the existing TCP/IP connection between the server and the client (which was just used for the handshake) is utilized to send data via a its own protocol (typically a basic framed message protocol). The TCP connection is closed when both parties acknowledge that the WebSocket connection should be closed.
Websockets are a part of the HTML5 spec and are supported by all modern browsers. They can detect dropped clients and can handle up to 1024 connections per browser. Note that they are not compatible with most load balancers out-of-the-box and do not have a native re-connection handling mechanism.
WebSocket Libraries
Evidently WebSocket is a pretty handy tool to have for setting up real time applications, but has its own challenges such as performance, faulty connection management, handling of authentication and authorization, or scalability. In order to deal with these challenges in a smoother fashion, one may consider using a framework or a library. The following are some of the actively maintained WebSocket libraries that are more popular and widely used:
socketio, ws, sockjs, websocket node
Socketio
Socketio, is a websocket wrapper/API with over 43k stars on github. Socket.io consists of a Node.js and a Javascript client library, providing reliable means of handling proxies, load balancers, and personal firewall/antivirus software. Socket.io supports binary streaming and used by several big names like Microsoft, Zendesk and Trello. The following link is for a tutorial that shows how to use Socketio and Node.js alongside React.
Paid and managed solutions
And of course if there is a demand for it someone will make a business out of it; there are several real time web technologies that developers can use for the right price. The following are some of the hosted real time services that offer a platform/API that will making adding real time features to your application smoother and easier. Each of these services have their strengths and weaknesses, and you might want to do your research as to which one of these paid solutions are more appropriate for your application.
Ably
Ably is a platform that allows management of real time messaging and data streaming easier for your application. It offers solutions for scaling, connection state recovery, guaranteed message delivery and transient network problems. The following link shows a step by step tutorial of building
https://ably.com/tutorials/reactjs-realtime-commenting#title
Conclusion
Successful web applications make use of real time technologies to provide the most updated and recent results of their services to end users. Websocket is a web technology that allows real time features by allowing a bi-directional, full duplex communication between the server and the client. There are many libraries, platforms and API available for developers to implement real time features into their web applications. Depending on the needs of the application and the resources backing it up, you might want to weigh your options and pick the tools most appropriate for your project.
also — here is an article by Phil Leggetter that showcases a comprehensive list of real time web technologies. The article includes links to their docs, libraries and pricing (if applicable) so be sure to check it out.
https://www.leggetter.co.uk/real-time-web-technologies-guide/#_streamhub-streamhub-streamhub
