CanvaはどのようにWebRTCでリアルタイム・コラボレーションを拡張したか：WebSocketからシームレスなP2P通信へ

原文リンク(2024-09-25)

Canvaは最近、コラボレーティブなホワイトボードのためにリアルタイムマウスポインタを実装した方法を共有した。Canvaは、スケーラビリティの向上、待ち時間の短縮、バックエンドの負荷軽減のために、WebRTCベースのソリューションを選択した。WebRTCはピアツーピア通信を使用するため、Canvaは従来のバックエンドベースのWebSocketとRedisソリューションよりもスムーズでパフォーマンスの高いリアルタイム体験をユーザーに提供できる。

リアルタイムマウスポインターを共有するCanvaの現在のソリューションは、Webリアルタイム通信（WebRTC）プロトコルに基づいている。WebRTCは、ユーザー間で直接ピアツーピアのデータ交換を可能にし、サーバーをバイパスしてより効率的なリアルタイム応答性を提供するため、従来のソリューションに比べてスケーラビリティが向上し、待ち時間が短縮される。

WebRTCは2021年以来、公式のウェブ標準となっており、ビデオやオーディオ・アプリケーションのための直接ピアツーピアのブラウザベースの通信のために設計され、最新のブラウザでサポートとされている。しかし、WebRTCは、マウスポインタの位置などの一般的なデータの送信もサポートされており、このユースケースの潜在的なソリューションとなっている。WebRTCを活用することで、Canvaはバックエンドインフラの負荷を軽減し、システム全体のパフォーマンスを向上させた。

WebRTC接続確立の簡略化されたフロー（ソース）

WebRTCは、NATトラバーサルを処理するためにSession Traversal Utilities for NAT（STUN）とTraversal Using Relay around NAT（TURN）サーバーに依存しており、これがソリューションに複雑さをもたらしている。接続の約50％がTURNサーバーを必要とし、直接ピアツーピア接続が不可能な場合にトラフィックを中継する。CanvaはサードパーティのTURNサーバーを使用しているため、運用負荷はかからないが、これらのサーバーを通過するトラフィックの料金を支払う必要がある。著者らは、これらのサーバーを社内で運用するためのオープンソースのCOTURN代替手段が存在することを指摘している。

WebRTCを採用する前、Canvaはリアルタイムのデータ共有のために、より伝統的なWebSocket とRedisベースのソリューションを採用していた。Redisを使うことにしたのは、主にメッセージブローカーとしての機能と、チームがこのテクノロジーを使った経験があったからだ。

WebSocketを使用したクライアントとサーバー間のデータフロー（ソース）

Redis PubSubはマウスポインタの更新を配信し、Redis Streamsはメッセージ配信の保証に役立った。このアプローチは数十万ユーザーまで拡張可能であったが、特にRedis PubSubの水平スケーリングには限界があり、ノード数が増えるにつれて非効率になった。CanvaはRedis 6.2を使用していたが、RedisはRedis 7.0のSharded Pub/Subでこの制限を解除した。

WebSocketソリューションでは、システムのデプロイ時に負荷分散の問題も発生した。Canvaが新しいサービス・バージョンをデプロイするたびに、WebSocket接続は再接続され、新しいサーバー・インスタンスに過度の負荷を与えていた。Canvaは、WebSocketの再接続プロセスを最適化し、バイナリプロトコルバッファエンコーディングを採用することで、この問題に対処し、CPU使用率を30％削減した。

WebSocketは、単一の長寿命接続を介してクライアントとサーバー間でリアルタイムの双方向データ転送を可能にする通信プロトコルである。2011年に標準化され、すべてのモダンブラウザでサポートされており、チャットシステム、ライブアップデート、共同編集などのリアルタイムアプリケーションによく使用されている。