Canva's engineering team embarked on developing a solution to handle real-time mouse pointer interactions for users working on designs simultaneously. The solution needed to support 3 updates per second per user, for up to 50 users on a single design, while ensuring scalability and performance.
Short-Term Solution: Backend-Centric Architecture
Initially, Canva's team relied on WebSockets and Redis to facilitate real-time updates. The backend was designed to be stateless, with Redis acting as a message broker. The system scaled horizontally by adding new server instances as load increased, with each instance managing WebSocket connections and communicating through Redis. However, the challenge was to balance communication across these stateless instances.
To optimize Redis, they used Redis Streams for session control information and PubSub for real-time mouse pointer updates, creating a dedicated Redis instance for PubSub messages. Despite some limitations, this architecture successfully supported up to 100,000 mouse pointer updates per second, with the system handling the load efficiently even at peak usage. Key optimizations included binary encoding of pointer data and batch commits to Redis, reducing backend and Redis CPU load by 30%.
However, to meet the requirement of 60 updates per second per user, a new solution was necessary.
Long-Term Solution: WebRTC Implementation
The long-term vision was to move towards a WebRTC-based solution to reduce backend load and increase scalability. WebRTC enables peer-to-peer communication, eliminating the need for server roundtrips. Canva’s team decided to use WebRTC for sending serialized mouse pointer data directly between clients, using WebSockets for signaling and NAT traversal via STUN/TURN servers.
The system employed a Mesh topology for WebRTC connections, where each user directly connects with others, reducing backend dependency. About 50% of connections were direct peer-to-peer, while the rest utilized TURN servers when a direct connection wasn’t possible. The WebRTC solution, though complex to implement, provided better scalability and efficiency for handling high-frequency updates.
Key Insights:
- Moving to WebRTC allowed Canva to scale to 60 updates per second per user.
- WebRTC's peer-to-peer connections significantly reduced backend load.
- A hybrid approach, using WebSockets for signaling and TURN servers for connectivity, ensured smooth communication between clients. Conclusion:
- By combining WebSockets, Redis, and WebRTC, Canva’s engineering team successfully built a scalable solution that can handle real-time mouse pointer interactions at scale, allowing users to work on designs with minimal lag and high responsiveness.
To dive deeper into the technical implementation, challenges, and optimization strategies used by Canva, read the full blog on Medium!
Medium
Top comments (0)