Canva 实现实时鼠标指针的协作白板技术总结

Canva 最近分享了其如何通过 WebRTC 技术实现实时鼠标指针功能，以提升协作白板的用户体验。Canva 选择基于 WebRTC 的解决方案，旨在提高系统的可扩展性、降低延迟并减少后端负载。相比传统的基于 WebSocket 和 Redis 的解决方案，WebRTC 通过点对点通信为用户提供了更流畅、性能更优的实时体验。

WebRTC 技术的应用

Canva 当前的实时鼠标指针共享解决方案基于 WebRTC（Web 实时通信）协议。WebRTC 允许用户之间直接进行点对点数据交换，绕过服务器，从而提供更高效的实时响应能力。这不仅提高了系统的可扩展性，还显著降低了延迟。

WebRTC 自 2021 年起成为官方 Web 标准，主要用于浏览器之间的视频和音频通信，同时也支持通用数据传输，如鼠标指针位置。Canva 通过采用 WebRTC，减少了对后端基础设施的负载，并提升了整体系统性能。

WebRTC 的连接流程与复杂性

WebRTC 依赖于 STUN（会话遍历实用工具）和 TURN（通过中继绕过 NAT 的遍历）服务器来处理网络地址转换（NAT）问题，这增加了解决方案的复杂性。大约 50% 的连接需要 TURN 服务器来中继流量，当直接点对点连接不可行时，TURN 服务器会发挥作用。Canva 使用第三方 TURN 服务器，因此不需要承担运营负担，但需要为通过这些服务器的流量付费。Canva 提到，开源项目 COTURN 可以作为自托管 TURN 服务器的替代方案。

传统的 WebSocket 和 Redis 解决方案

在采用 WebRTC 之前，Canva 使用基于 WebSocket 和 Redis 的传统解决方案进行实时数据共享。Redis 作为消息代理，具备强大的消息分发能力，且团队对该技术有丰富的经验。

Redis PubSub 用于分发鼠标指针更新，而 Redis Streams 则确保消息的可靠传递。尽管这种方案能够扩展到数十万用户，但随着节点数量的增加，Redis PubSub 的水平扩展效率逐渐降低。Canva 使用的是 Redis 6.2 版本，而 Redis 7.0 引入了 Sharded Pub/Sub 功能，解决了这一限制。

WebSocket 方案的挑战与优化

WebSocket 方案在系统部署时遇到了负载均衡问题。每当 Canva 部署新服务版本时，WebSocket 连接会重新建立，给新服务器实例带来不必要的压力。Canva 通过优化 WebSocket 重连过程并采用二进制 Protobuf 编码，成功将 CPU 使用率降低了 30%。

WebSocket 协议简介

WebSocket 是一种通信协议，支持客户端与服务器之间通过单一、长连接进行实时、双向数据传输。该协议于 2011 年标准化，所有现代浏览器均支持 WebSocket。它常用于聊天系统、实时更新和协作编辑等实时应用场景。

总结

Canva 通过采用 WebRTC 技术，显著提升了协作白板中的实时鼠标指针功能，解决了传统 WebSocket 和 Redis 方案在扩展性和性能上的局限性。尽管 WebRTC 的 NAT 遍历问题增加了系统复杂性，但其点对点通信的优势使其成为实时应用的理想选择。Canva 的优化措施也展示了其在应对技术挑战方面的创新能力。