Javascript ve Webrtc ile Gerçek zamanlı Collaborative Text Editor inşa edin

const dataChannel = peerConnection.createDataChannel('collabEditor', {
 ordered: true
});

).

Bu proje için Quill'i kullanacağız çünkü hala ham delta formatına erişimimizi verirken içerikli içerikli karmaşıklığı da soyutlayacağız, bu da serileştirip iletmenin kolay olduğu anlamına gelir.

Yararlanma Edits and Sending Changes

Quill, belge değişiklikleri her zaman bir “tek-değişim” olayı yayıyor. Bu olayı dinleyebilirsiniz ve delta'yı tüm bağlantılı akranlarına gönderebilirsiniz:

quill.on('text-change', function(delta, oldDelta, source) {
 if (source === 'user') {
 dataChannel.send(JSON.stringify(delta));
 }
});

“Kaynak’ın kontrolü, yerel kullanıcı tarafından yapılan yalnızca yayın değişikliklerini garanti eder, uzaktan uygulanan değişiklikler değil. Bu, gelen bir düzenlemenin başka bir kesintiye uğrattığı sonsuz döngüleri önler.

Senkronizasyon ve Çatışmalar

Operasyonel Dönüşüm

İki kullanıcı aynı belgeyi aynı anda düzenlerken, çatışmalar kaçınılmazdır. Örneğin, Kullanıcı B, bir işlem için bir karakter koyarken, 3. Bir karar stratejisi olmadan, son belgeyi farklılaştırır. Operasyonel Dönüşüm (OT), her bir işlem için bir sürüm tutar ve mevcut duruma göre gelen işlemleri ayarlayarak belge tutarlılığı koruyan kanıtlanmış bir algoritmadır.

OT'yi sıfırdan uygulamak karmaşıktır. Bunun yerine, a library likeurFLT:0)ot.js[[Dön 1: 1) veya ProseMirror'daki yerleşik dönüşüm mantığını kullanabilirsiniz. Bu kütüphaneler, entegrasyona odaklanabilirsiniz.

CRDTs, Alternatif Olarak Alternatif Bir

Çatışmasız Regred Data Type (CRDT) popülerlik kazanmış başka bir yaklaşımdır.OT'den farklı olarak, CRDT'ler merkezileştirilmiş bir sunucu veya operasyon siparişi gerektirmez; her biri yerel bir kopya tutar ve uzlaşı farklılıkları otomatik olarak tutar.Automerge veya [[Döneticiler).Yjs)

OT ve CRDT arasındaki seçim sizin kullanım durumunuza bağlıdır. OT genellikle metin yalnızca belgeler için daha iyi çalışır ve metin-sadece dokümanlar için iyi çalışır. CRDTs karmaşık veri yapıları ve çevrimdışı düzenleme senaryoları için daha uygundur.

Batching ve Throttling

Mükemmel çatışma çözümü ile bile, ağ üzerindeki her anahtarstroke gönderme gereksiz bir trafik yaratır ve overwhelm akranlarını onarır. kısa bir süre için düzenleme yapan bir toplu mekanizmayı uygulayın (50-100 m) ve onları tek bir operasyon olarak gönderir.Bu, gerçek zamanlı bir histen ödün vermeden azaltılabilir.

let batch = [];
quill.on('text-change', function(delta) {
 batch.push(delta);
 clearTimeout(batchTimer);
 batchTimer = setTimeout(() => {
 dataChannel.send(JSON.stringify(batch));
 batch = [];
 }, 50);
});

Ölçeği ve Güvenilirliği için mimarlık

Peer Bağlantıları Yönetimi

İki kullanıcıdan daha fazla aynı belgeye katılırsa, her bir akranın her bir akrana bağlantı açması gerektiği bir ağ senaryosu ile karşı karşıya kalırsınız.Bu ölçekler kötü bir şekilde büyür çünkü bağlantı sayısı dörtlü kullanıcı ile seanslar için, bir Selective Forwarding Unit (SFU) veya Multipoint Control Unit (MCU) kullanarak verileri sunucu aracılığıyla yeniden tanımlamak için.

Devlet Sürekliliği

WebRTC tasarım yoluyla ephemeral. Eğer bir kullanıcı sayfayı yeni bir kullanıcı katıldıktan sonra tüm bağlantı durumunu kaybeder ve belge WebRTC ile bağlantı kurmadan önce sunucuya geri döner.Bu hibrit yaklaşım size her iki dünya için en iyi sunucuya ihtiyacınız vardır: düşük çözünürlükte ata-to-peer düzenleme ve kalıcı depolama.

Güvenlik ve Gizlilik

Data Channels'ı şifrele

WebRTC veri kanalları DTLS ile otomatik olarak şifrelenir (Datagram Transport Katman Security). Bu, düzenlemelerinizin içeriği, bilinmeyen ağ umutları ile seyahat ettiği gibi bile şifreleyicisi ile güvenli değildir. ancak, sinyal kanalı varsayılan olarak şifrelenmez, bu yüzden HTTPS ve WSS (WebSockets Secure) üzerinden hizmet etmelisiniz.

Kimlik ve Erişim

Sadece bir akran bağlantı kurmadığı anlamına gelmez.Bir token tabanlı kimlik doğrulama sistemi, kullanıcıların hem sinyalleyici sunucunuzdan hem de editör mantığından yararlanabilecekleri bir WebRTC bağlantısına uymaları gerekir.The token should contains the user’s role (editor, viewer, admin) and the document ID they are allowed token on both the sinyalling server and within the editörü logic to prevent un processes.

Enjeksiyon Saldırılarını Önlemek

İçerikeditable kullanıyorsanız, kötü niyetli kullanıcılar, herhangi bir beklenmedik özelliği kaldıran bir editörle bile, gelen tüm gelen deltas'ı alıcı sonda doğrulamanız gerekir. Quill’s delta format sıkı, ancak herhangi bir beklenmedik özelliği kaldıran ek bir sanitasyon adımı ekleyebilirsiniz.

Test ve Debugging

Birden çok Kullanıcıyı Hazırlayın

İşbirliği editörü test etmek en az iki tarayıcı örneği gerektirir.Viabilinen pencereler veya farklı tarayıcı profillerini ayrı kullanıcıları taklit etmek için kullanın.Ürünler http://www.net.net.net tr|s x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

Data Channel Health

WebRTC veri kanalları ağ değişiklikleri veya NAT zamanouts nedeniyle düşebilir. Küçük bir “ping’ mesajı her 5 saniyede gönderir. 10 saniye içinde yanıt alınmıyorsa, bağlantının öldüğünü varsayın ve bağlantı durumunu bir izleme paneline geri yüklemeye çalışın, böylece bağlantı hataları tespit edebilirsiniz.

Performans Optimizasyonları

Kompucu

Text edits küçüktür, ancak birçok kullanıcı düzenleme olduğunda, mesajların hacmi tekrarlanan düzenleme kalıpları için % 80 oranında artış gösterir.If your library support it.You can also restrict the JSON ödemeload on the application katmanı using a library like "pako' (zlib in JavaScript). Bu, tekrarlanan düzenleme kalıpları için % 80'e kadar bant genişliği tüketimini azaltır.

Seçici Senkizasyon

Her düzenlemenin her bir akrana gönderilmesi gerekmez. Örneğin, bir kullanıcı türü hızlı bir şekilde, sadece anahtar meselelerden sonra son durumu, her orta karakter değil. Bir idle algılama mekanizması kullanın: eğer kullanıcı aktif olarak tiplenirse, değişiklikleri bozar ve sadece bir konsolid delta gönderirken.Bu, düzgün bir düzenleme deneyimini sürdürürken son durumu büyük ölçüde azaltır.

Lazy Rendering

Belge büyük olursa ( sayfaların yüzleri), her gelen düzenleme için tüm içeriği görüntülemek UI jank. Implement virtualboarding veya paginasyona neden olabilir, böylece belgenin yalnızca görünür kısmı yeniden yapılır. Bu, özellikle sınırlı işlem gücü ile mobil cihazlar için önemlidir.

İşsizlik ve Üretim Okuma

Bir Signalling Server seçin

Üretim için, binlerce eş zamanlı bağlantıyı idare edebilecek sağlam bir sinyal sunucusuna ihtiyacınız var.Stream[FLT] veya [[Döneticileri soketi ile popüler bir seçimdir.Bu, ölçeklenebilirliği ve inşa edilmiş geri dönüş mekanizmaları nedeniyle.If you tercih ederseniz, yönetilen bir çözüm gibi hizmetleri düşünün.

Gerçek Ağlarla Test

Yerel test ağ gecikme ve paket kaybı gizler. editörünüzü farklı kıtalarda takip eden bir ortama dağıtır ve test eder.T:0)Wireshark), WebRTC trafiği analiz etmek ve şişeleri tanımlamak için.

İzleme ve Logging

Tüm WebRTC etkinlikleri için yapısal bir giriş ekleyin: bağlantı devlet değişiklikleri, veri kanalı açık / kapalı ve düzenleme işlemleri.Gerekme gibi merkezi bir giriş hizmeti kullanın:0)Datadog) veya [[Döneticileri:2)Loggly[Döneticileri, tüm akranlarından toplu oturum açmalarına yardımcı olur.Bu, bağlantıya yol açan kalıpları tanımlamanıza yardımcı olur.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

JavaScript ve WebRTC ile gerçek zamanlı işbirliğine dayalı bir metin editörü inşa etmek, ağ, devlet yönetimi ve UI performansınızı genişleten bir ödüllendirici bir süreçtir.Mantılı bağlantıların gücünü kullanarak, pahalı sunucu altyapısı olmadan anında ve ölçeklendirme deneyimi yaratabilirsiniz. Anahtar bileşenleri güvenilir bir sinyal mekanizmasıdır, Quill veya ProseMirror gibi yapısal bir editör yüzeyi ve OT veya CRDT kullanarak sağlam bir çatışma çözümü stratejisini kullanabilirsiniz.

İleriye doğru hareket ettiğinizde, tam olarak merkezileştirilmiş ve hibrit mimariler arasındaki ticaret-offları düşünün. Küçük takımlar için, saf WebRTC hafif bir sinyalleyici sunucu ile idealdir.Daha büyük dağıtımlar için, kalıcılık için bir sunucu katmanı ekleyin ve seçicileme size ihtiyacınız olan kontrolü verir, burada belirtilen ilkeler üretim-okuyucu işbirliği araçları için sağlam bir temel olarak hizmet edecektir.