Canva recently shared how it implemented real-time mouse pointers for collaborative whiteboarding. Canva chose a WebRTC-based solution to improve scalability, reduce latency, and lower backend load. Since WebRTC uses peer-to-peer communication, Canva can provide users with a smoother, more performant real-time experience than a traditional backend-based WebSocket and Redis solution.
Canva's current solution for sharing real-time mouse pointers is based on the Web Real-Time Communication (WebRTC) protocol. WebRTC allows peer-to-peer data exchange directly between users, bypassing the server and providing more efficient real-time responsiveness, thus improving scalability and reducing latency versus traditional solutions.
WebRTC has been an official web standard since 2021, designed for direct peer-to-peer browser-based communication for video and audio applications and supported by modern browsers. However, WebRTC also supports the transmission of generic data, such as mouse pointer positions, making it a potential solution for this use case. By leveraging WebRTC, Canva reduced the load on its backend infrastructure and improved its overall system performance.
A simplified flow of establishing a WebRTC connection (Source)
WebRTC relies on Session Traversal Utilities for NAT (STUN) and Traversal Using Relay around NAT (TURN) servers for handling NAT traversal, which adds complexity to the solution. Approximately 50% of connections require TURN servers, which relay traffic when direct peer-to-peer connections aren't possible. Canva uses 3rd-party TURN servers, so it doesn't carry the operational load, but it does have to pay for the traffic that traverses these servers. The authors note that an open-source COTURN alternative exists for operating these servers in-house.
Before adopting WebRTC, Canva employed a more traditional WebSocket and Redis-based solution for real-time data sharing. The decision to use Redis was primarily driven by its capabilities as a message broker and the team's prior experience with the technology.
Data flow between the client and the server using WebSocket (Source)
Redis PubSub enabled the distribution of mouse pointer updates, while Redis Streams helped guarantee message delivery. While this approach scaled to hundreds of thousands of users, it faced limitations, particularly with horizontal scaling in Redis PubSub, which became inefficient as the number of nodes increased. Canva used Redis 6.2; however, Redis lifted this limitation with Sharded Pub/Sub in Redis 7.0.
The WebSocket solution also encountered issues with load balancing during system deployments. Whenever Canva deployed a new service version, WebSocket connections would reconnect, placing undue stress on new server instances. Canva addressed this by optimizing the WebSocket reconnection process and adopting binary protobuf encoding, which reduced CPU usage by 30%.
WebSocket is a communication protocol that enables real-time, bi-directional data transfer between a client and server over a single, long-lived connection. It was standardized in 2011, supported by all modern browsers, and often used for real-time applications like chat systems, live updates, and collaborative editing.