Canva, WebRTC ile Gerçek Zamanlı İşbirliğini Nasıl Ölçeklendirdi: WebSocket’lerden Eşler Arası Sorunsuz İletişime

Canva kısa süre önce bunun nasıl yapıldığını paylaştı İşbirliğine dayalı beyaz tahta kullanımı için gerçek zamanlı fare imleçleri uygulandıCanva, ölçeklenebilirliği geliştirmek, gecikmeyi azaltmak ve arka uçtaki yükü azaltmak için WebRTC tabanlı bir çözümü tercih etti. WebRTC eşler arası iletişimi kullandığından Canva, geleneksel WebSocket ve Redis arka uç tabanlı çözümüne kıyasla kullanıcılara daha sorunsuz bir deneyim ve gerçek zamanlı performans sunabilir.

Canva’nın gerçek zamanlı fare imleçlerini paylaşmaya yönelik mevcut çözümü şunları temel alır: Gerçek zamanlı web iletişimi WebRTC protokolü. WebRTC, kullanıcılar arasında doğrudan eşler arası veri alışverişine olanak tanır, sunucuyu atlar ve daha verimli gerçek zamanlı yanıt sağlar, böylece geleneksel çözümlerle karşılaştırıldığında ölçeklenebilirliği artırır ve gecikmeyi azaltır.

WebRTC, video, ses ve videoların tarayıcılar arası doğrudan eşler arası iletişimi için tasarlanmış, 2021’den bu yana resmi bir web standardıdır. Modern tarayıcılar tarafından desteklenirAncak WebRTC de öyle Genel veri aktarımını desteklerFare imleci konumları gibi, bu da onu bu kullanım durumu için potansiyel bir çözüm haline getiriyor. Canva, WebRTC’den yararlanarak arka uç altyapısı üzerindeki yükü azalttı ve genel sistem performansını iyileştirdi.

WebRTC bağlantısı kurmak için basitleştirilmiş akış (kaynak)

WebRTC’nin temeli NAT için oturum geçiş araçları (yıldırım işareti) ve Röle ile NAT çevresinde gezinme (TURN) sunucularının NAT geçişini yönetmesi, çözüme karmaşıklık katar. Bağlantıların yaklaşık %50’si, doğrudan eşler arası bağlantıların mümkün olmadığı durumlarda trafiği taşıyan TURN sunucularını gerektirir. Canva, üçüncü taraf TURN sunucularını kullandığından operasyonel yükü üstlenmez ancak bu sunuculardan geçen trafik için ödeme yapmak zorundadır. Yazarlar açık kaynaklı bir çözüm olduğunu belirtiyorlar Cothorne Bu sunucuları dahili olarak çalıştırmanın bir alternatifi var.

Canva, WebRTC’yi benimsemeden önce daha geleneksel bir yaklaşım kullanıyordu WebSocket Ve redisGerçek zamanlı verileri paylaşmak için web tabanlı bir çözüm. Redis’i kullanma kararı, öncelikle mesaj komisyoncusu olarak yeteneklerine ve ekibin teknolojiyle ilgili önceki deneyimine dayanıyordu.

WebSocket kullanarak istemci ve sunucu arasındaki veri akışı (kaynak)

Redis PubSub Fare imleci güncellemelerinin dağıtımını etkinleştirin Redis akışları Mesaj tesliminin sağlanmasına yardımcı olun. Bu yaklaşım yüz binlerce kullanıcıya ölçeklenirken, özellikle Redis PubSub’da düğüm sayısı arttıkça verimsiz hale gelen yatay ölçeklendirmede sınırlamalarla karşı karşıya kaldı. Canva Redis 6.2’yi kullandım; Ancak Redis, bu sınırlamayı kullanarak kaldırdı. Pub/bölünmüş oyuncu seçimi Redis 7.0’da.

WebSocket çözümü, sistem dağıtımı sırasında da yük dengeleme sorunlarıyla karşılaştı. Canva, hizmetin yeni bir sürümünü dağıttığında WebSocket bağlantıları yeniden bağlanarak yeni sunucu örnekleri üzerinde aşırı baskı oluşturuyordu. Canva, WebSocket yeniden bağlanma sürecini iyileştirerek ve protobuf ikili kodlamayı benimseyerek bu sorunu çözdü ve CPU kullanımında %30 azalma sağladı.

WebSocket, istemci ve sunucu arasında tek ve uzun süreli bir bağlantı üzerinden gerçek zamanlı, iki yönlü veri aktarımına olanak tanıyan bir iletişim protokolüdür. 2011 yılında konsolide edildi, Tüm modern tarayıcılar tarafından desteklenirGenellikle sohbet sistemleri, canlı güncellemeler ve işbirlikçi düzenleme gibi gerçek zamanlı uygulamalar için kullanılırlar.