Real-time web: every millisecond counts!
On a website, an “offline” status that changes to “online” without you having done anything? A sales representative talking to you in a messaging system? Then the real-time web is just around the corner…
The real-time web is a system for responding to events in a very short space of time (a few milliseconds). In projects, real-time is often used to synchronize data from several users almost instantaneously and simultaneously. And the applications are manifold: live score updates in online games, real-time collaboration as in a document, notifications, trading… The aim is to inform users of changes as soon as they occur, without requiring any action such as refreshing the page.
What exactly is real-time web?
Some examples
A good example of real time is instant messaging systems on social networks. In the Facebook application, messages are received immediately after being sent, with no need to refresh the page. This is quite different from the old-fashioned way of sending messages via e-mail (the “send/receive” button) or on discussion forums.
Another example is an auction system. The bidder needs to see the current bid amount update automatically. Without this, the user experience could be frustrating. And that’s the whole point of the real-time web: to improve the user experience.
If you want to experience real time, don’t hesitate to visit our metaverse: Workadventu.re!
Let’s take this a step further…
Technically, real time corresponds to the implementation of an automated system that responds to various events occurring on the application as a result of user action (but not only: we can also imagine events triggered by data sensors or machines) and thus notifies other users of the occurrence of said events. Of course, real time is not mandatory, and most sites can do without it. However, it has gradually become indispensable, as it greatly enhances the user experience.
Overview of real-time web technologies
So what are the technologies that enable you to work in real time? NodeJS, for example, is often used for its non-blocking asynchronous system.
Here’s an overview of these technologies:
WebSocket
This is the most widespread technology. It opens a two-way connection between a client (a web browser) and a server, then persists this connection so that the client can send information to the server and vice versa. You can compare this technology to telephone communication.
Libraries such as Socket.io make it “easy” to implement websockets. Technologies such as Soketi can also be used to install websockets servers without too much configuration on your part.
If you don’t want to or can’t develop your own websockets server, there are paid third-party services such as Pusher or Ably to make the job easier.
What’s more, at TheCodingMachine we’re Laravel certified, and Laravel has just released a first-party technology for implementing websockets: Laravel Reverb, making it even easier to implement from a technical and security point of view.
SSE (Server Sent Events)
This is a one-way communication technology: the server sends data to the client when it’s needed.
You can use a server with Mercure as a free, open-source solution.
If you don’t need to receive data from users, it’s a solid choice over websockets.
Polling
This is not a specific technology, but rather a pattern. The client (browser) makes regular HTTP requests to the server (e.g. every 5 seconds) to update the data. This is called automatic refreshing.
Beware of the server load and the number of requests per second this can generate. It’s more a question of synchronization than real time.
WebRTC / Peer-to-peer
Ideal for video and audio streaming. Works over a direct peer-to-peer connection (between two clients). You can use the native WebRTC APIs available in modern browsers to implement this system. You will certainly need a signaling server. This is a server which, when a new user logs on, provides a list of other users so you know with whom to establish the peer-to-peer link.
This technology is fast and efficient, but has its limits if you want to connect too many users together. Libraries such as simple peer will help you implement this technology.
WebRTC remains a special case in real-time data exchange, since it has been developed for voice/video exchange, rather than “simple” data exchange, where other solutions (or the signaling server) are preferable.
And a few more…
There are many other ways to make real time:
- MQTT: Message Queuing Telemetry Transport → used in IoT, pub/sub (publish / subscribe) messaging protocol with an intermediate broker system to clients.
- SignalR: specific to the .NET ecosystem → similar to websocket, bidirectional connection.
- Long polling: a variant of polling where the server holds back the response to be sent until there is new data.
- A push server with HTTP/2 …
| Technology | Short description | Bidirectional | Efficiency | Simplicity | Typical use |
|---|---|---|---|---|---|
| WebSocket | The client (browser) and server can exchange information at any time and in both directions. | ✅ | ⚡️⚡️⚡️ | ➕➕ (thanks to the many resources available) | Online games, instant messaging, data exchange. |
| WebRTC Peer-to-Peer | Two clients exchange data with each other (very good for video or audio). | ✅ | ⚡️⚡️⚡️ | ➕➕(thanks to the many resources available) | Video or audio calls. |
| SSE (Server-Sent Events) | The server sends information to the client when it has news. | ❌ | ⚡️⚡️ | ➕➕ | Live notifications, news, updates. |
| Polling | The client makes a regular request to the server. | ❌ | ⚡️ | ➕➕➕ | Regular verification of new data, very lightweight applications. |
Ready to add real-time web to your application?
If you don’t use paid services and decide to implement your own servers for real-time management, a number of security and scalability issues arise.
Security
When implementing a real-time system, you need to ensure that only the right people send and receive data via this additional layer.
This requires extra work to set up authentication, authorization and session management. Make sure you also encrypt your data in transit, using secure protocols such as WSS (websockets) or HTTPS (polling, sse).
Stored data (such as chat history) should also be encrypted / protected.
Scalability
Real-time applications are not the easiest to scale. As your application grows (and so does the number of users), you’ll need to opt for horizontal scaling with a load balancing system.
Deploying your application with Docker or Kubernetes can help. It’s easy to imagine duplicating the containers running the real-time system.
No internet connection?
A real-time application greatly enhances the user experience, but it requires a permanent, stable Internet connection to ensure that the experience is not spoiled.
Conclusion
The real-time web is like magic: powerful and useful, but requiring mastery. Whether you’re chatting with friends, playing online games or making fast transactions, real-time is everywhere, making the user experience faster, more responsive and more efficient than ever.
However, its implementation is far from trivial, and requires careful thought about your use cases and the technology that will be best suited to them.
In many cases, choosing WebSockets with a NodeJS server and Socket.io will do the trick, and also allow you to experiment quickly.
Article written by Paulin BAT
