Real-time Web: Evolution of the User Experience

Over the past few years, companies have used real-time updates to add new experiences and features and increase market share.

It is now common practice to expect a page within an app or browser to update parts of itself without forcing it to update. For example, a live sports scores news page updates with the last goal scored, or an app displays a change as you track your taxi on a map.

In this post, I will explain how web technology has evolved to support asynchronous communication and explain how organizations put a real-time user experience at the heart of their products.

early days

In the early days of the internet, the online user experience was just consuming static content on a demand-and-response basis. A user requested a page via their browser. To refresh, the user needed to initiate a full refresh of the page, which removed the entire page content and reloaded it no matter how much was changed on it.

Initially, this user experience was acceptable, but gradually users expected that updates would be presented to them more gracefully and effectively.

AJAX set out as a set of technologies to silently issue a request to a server and receive a response, and then perform updates to parts of the page without changing the entire rendering. AJAX has improved the user experience and reduced the amount of data required from the server. However, the XMLHttpRequest standard that AJAX used still follows the same HTTP request response model used to retrieve the original HTML document. There was no mechanism for the server to send updates to the client when changes occurred.

Then, web developers started using XMLHttpRequest to build the “Comet” form. Here, the pending HTTPS request (Long Poll) adds a delay between the moment the client sends a request and the moment the server displays the response. While still executing the request/response, the long polling/Comet is less taxing on the server and provides lower latency than AJAX.

High-level overview of the long poll


WebSockets for a real-time web

The comet wasn’t particularly powerful, so a new standard for real-time, two-way communication on the Web has emerged, the WebSocket transport solution. Initially found in Google Chrome in 2010, it was added to all major browsers soon after and standardized by RFC 6455. You can find everything you need to know about WebSocket history, usage, and applications from the WebSocket handbook.

WebSockets is a thin transport layer built on the device’s TCP/IP stack. They provide a TCP connection layer as close to raw as possible for web application developers. WebSockets use a long-term, persistent connection so that the client and server together agree to keep the TCP connection open; In theory, it could remain open forever. WebSocket can be used for persistent communication and transfer of any arbitrary type of data if both the client and server agree on how to interpret the sent/received data.

High Level Overview of WebSocket Connectivity

WebSocket is a relatively low-end streaming port for full-duplex, bidirectional streaming. It enables the client to communicate with the server and for the server to push updates as they happen to the client (event driven pattern) without the client needing to initiate them via a request.

WebSockets vs. Traditional HTTP Request/Response Model

The WebSocket definition paved the way for developers to build an asynchronous, event-driven connection between a client application and its backend.

While other event-based protocols such as webhooks, REST Hooks, and Server-Sent Events have emerged, WebSocket is now a mature and stable technology. Developers have embraced WebSockets to build a thriving community around multiple applications (DIY, open source, or proprietary) for event-driven systems with low latency.

event-driven engineering

In an event-driven architecture, the backend uses events to communicate with its clients and eliminate polls, thus reducing processor, power, and network usage.

One of the common patterns used to facilitate an event-driven structure is known as posting and subscription. In this pattern, the event producer (publisher) sends event messages when a state change occurs. Event subscribers (clients) consume events as they occur and invoke their business logic to respond in real time.

Users are aware of real-time updates of breaking news, live sports scores and for the latest information on transportation, logistics and fleet tracking systems. Uber and Deliveroo are modular services developed from scratch around the user who tracks taxis or food delivery in real time. Others, such as Transport for London, have added real-time updates to their API services as demand grows.

There are many consumer retail and financial use cases for real-time communication, such as:

  • A shopping site that displays the number of items left in stock or the number of other users browsing or with a product in their shopping cart.
  • Latest bid price in online auction.
  • Updates within a banking app to reflect account activity.
  • The number of seats available when booking a flight or event ticket.

Example: Tennis Australia

The Australian Open is one of the four Grand Slam tennis tournaments, broadcast live in 900 million homes in 220 territories. The Australian Open is owned and operated by Tennis Australia and is the primary source for live scores, streaming videos, profile information, schedules and live commentary.

Tennis Australia’s advertising revenue is based on the continuous provision of data to our sponsors and partners. Tennis Australia uses Ably to deliver scores, updates, and real-time commentary to the event’s global fan base. Aptly guarantees uninterrupted performance at large scale with increased demand for services, providing a high rate of posting and subscribing to messages, web sockets, resuming broadcasts, and history. The Ably Client Library SDKs provide cross-platform support for all visitor devices and browsers. The client library SDKs can fall back to transports such as HTTP streaming, XHR, and JSONP when necessary, to ensure all visitors have a real-time experience.

Multi-user simultaneous collaboration

In addition to real-time updates of informational content from a single source, there is also the opportunity for a collaborative user experience where the page is refreshed while other users make changes to a shared document. Online collaboration tools put user interaction center stage: Collaborative whiteboards like Miro allow multiple contributors to replicate content together in real time.

Example: Google Docs

Sites and services that previously required users to collaborate separately and incorporate their changes have either evolved or been replaced by new tools that deliver real-time updates as part of their core. Google’s suite of productivity tools is a typical disruptor in this field.

Google Docs owes much of its success to the collaborative aspect of sharing a document among contributors, who can edit or add comments that are instantly visible to everyone who has a view on the page. Since Google pioneered this collaboration, other productivity tools, such as those from Microsoft and Dropbox, have followed suit.

Google has not disclosed how it handles real-time updates in Google Docs, although it does use a WebSocket solution. Details are available about the sync aspects of the multi-user collaboration solution, for which Google uses Operational Transformations (OTs). Based on the client server model, each user viewing a document is a client that holds an exact copy of that document, while Google Docs acts as the central server. Client changes propagate back to the server, which passes them on to other clients. With OTs, the client sends updates as one or more “operations” (each encapsulating the change made, not the result of that change) in the document.

Example: Figma

Figma is a collaborative interface design tool that allows users to simultaneously edit the design file. The so-called “multiplayer” feature has been likened to a watershed moment in design collaboration and is seen as a game-changer in the assimilation of design software, after it pushed similar existing design tools like Sketch and Adobe XD out of the spotlight.

Users can share a link to a Figma design file with any collaborators, no one needs to download or send files over the network, nor edit changes offline and merge them later. As an example of multi-user collaboration, this is a familiar scenario for documents, spreadsheets, and presentations, but a new proposition in traditionally complex design software.

Figma shared an article about how they built their multiplayer technology. They have a client/server architecture, and Figma clients are web pages that talk to a group of servers via WebSockets. The server-side solution was written in Rust, as described in a blog post discussing how to scale the solution and the server spins a separate process for each multiplayer document, which docs connect to.

Unlike Google Docs, Figma uses conflict-free duplicate data types (CRDTs) to synchronize documents, although there is a central server to mediate changes. Real CRDTs are designed for decentralized systems without a single central authority.

public engagement

The digital content audience has rapidly evolved from posted video to live broadcast to interactive live broadcast with chat, reactions and gratuities when the event occurs. Audience interaction is two-way between the host and the participants: for example, a written chat between audience members and a live broadcast host on Twitch. Real-time communication helps one-way broadcasts become an interactive event. Audience engagement solutions also use real-time updates of polls, quizzes, and Q&A to enable different types of interaction between participants and hosts for online education, live events, and virtual conferences.

Example: Mentimeter

Mentimeter is a platform to use in conjunction with live broadcasts to add features such as polls or test jobs. For example, the host might ask the audience, “What’s your favorite flavor of ice cream?” And give participants a short URL to follow, where they can vote online. The answers are visualized in real time as a bar graph, pie chart, or even a word cloud and displayed in the live stream to bring the audience together.

In 2020, with more and more people working and studying at home, Mentimeter is becoming very popular, for example, in virtual company meetings and online education. Mentimeter uses Ably for its real-time components because it requires a scalable infrastructure and a high quality of service, while ensuring high uptime and low latency.

Example: Reddit

Another form of audience engagement includes community sites that allow individual users to interact with content created by others, using real-time updates to indicate their activity. For example, in late 2021, Reddit introduced some new interactive features, built on top of the real-time service unveiled a few months ago, using a WebSocket solution with Redis as a publisher/sub engine.

Reddit has been around since 2005 and is one of the 20 most visited sites in the world. The recent introduction of real-time updates indicates that they are of strategic importance in competition with similar online communities such as Facebook. Reddit users can now see the number of animations that appear when a post or comment receives a vote; Indications when five or more Redditors read the same post; Real-time write pointers to indicate that (anonymously) a Redditor is writing a new comment; And “pill” to indicate the addition of new comments.

.

Leave a Comment