Yhteiskäyttöiset editorit ja valkotaulut

Kuvittele, että useat ihmiset muokkaavat samaa asiakirjaa tai piirtävät samalle taululle samanaikaisesti. Miten heidän muutoksensa näkyvät heti kaikille muille?

Tässä oppitunnissa tutustutaan arkkitehtuurimalleihin ja haasteisiin, joita liittyy tällaisten usean käyttäjän reaaliaikaisten yhteistyösovellusten rakentamiseen WebSocketsin avulla.

Yhteistyöjärjestelmien keskeinen ongelma on tilan synkronointi. Jos kaksi käyttäjää muokkaa asiakirjan samaa kohtaa samanaikaisesti, kumman muutos saa etusijan?

• Käyttäjä A kirjoittaa ”Hello”.
• Käyttäjä B kirjoittaa ”Hi”.
• Miten nämä yhdistetään niin, ettei tietoja menetetä tai syntyisi ristiriitoja?

Perinteiset pyyntö–vastausmallit eivät sovellu tähän jatkuvaan kaksisuuntaiseen päivitysvirtaan.

Yksi tehokas tekniikka samanaikaisten muokkausten käsittelyyn on Operational Transformation (OT). Sitä käytetään esimerkiksi Google Docsissa.

OT ei estä ristiriitoja, vaan ratkaisee ne muuntamalla operaatioita. Kun operaatio (esimerkiksi ”lisää merkki kohtaan X”) saapuu palvelimelle, sitä voidaan muuttaa ennen sen suorittamista, jotta se on yhdenmukainen aiemmin suoritettujen operaatioiden kanssa.

Ajattele asiaa näin:

• Käyttäjä A kirjoittaa merkin ”A” indeksin 0 kohdalle.
• Käyttäjä B kirjoittaa merkin ”B” indeksin 0 kohdalle.

Jos B:n operaatio saapuu ensin, asiakirjan sisältö on ”B”. Kun A:n operaatio saapuu, OT muuntaa sen muotoon ”lisää A indeksin 1 kohdalle” indeksin 0 sijaan, jolloin tulokseksi saadaan ”BA”. Näin molemmat muutokset säilyvät oikein.

OT-järjestelmät ovat monimutkaisia, ja ne vaativat usein keskitetyn palvelimen muunnosten koordinointiin.

Vaihtoehto OT:lle ovat Conflict-Free Replicated Data Types (CRDTs) eli tietorakenteet, jotka on suunniteltu yhdistettäväksi.

CRDT:t varmistavat, että eri replikoissa tehdyt samanaikaiset muutokset johtavat aina samaan tilaan niiden käyttöjärjestyksestä riippumatta ilman monimutkaista muunnoslogiikkaa.

Esimerkkejä ovat jaetut laskurit, joukot ja CRDT-pohjaiset tekstieditorit.

• OT: keskitetty (palvelimen koordinoima), monimutkainen muunnoslogiikka, vahva yhdenmukaisuustakuu.
• CRDT:t: hajautettu yhdistäminen, yksinkertaisempi yhdistämislogiikka, lopullinen yhdenmukaisuus, sietää verkkoyhteyksien jakautumista.

Valinta riippuu sovelluksen erityistarpeista, kuten yhdenmukaisuusvaatimuksista ja verkkohäiriöiden sietokyvystä.

Yhteistyösovellusten tyypillinen arkkitehtuuri sisältää seuraavat osat:

1. Asiakkaat: kunkin käyttäjän selain tai laite.
2. WebSocket-palvelin: kaikkien asiakasyhteyksien keskitetty solmukohta.
3. Asiakirjan tila: palvelimen hallinnoima jaetun asiakirjan kanoninen versio.

Asiakkaat lähettävät operaationsa palvelimelle, joka käsittelee ja välittää ne eteenpäin.

WebSocket-palvelin toimii toiminnan aivoina. Kun asiakas lähettää ”operaation” (esimerkiksi ”lisää merkki” tai ”siirrä objekti”), palvelin:

• vastaanottaa operaation.
• soveltaa OT- tai CRDT-logiikkaa sen yhdistämiseksi nykyiseen asiakirjan tilaan.
• päivittää auktoritatiivisen asiakirjan.
• välittää (mahdollisesti muunnetun) operaation kaikille muille yhteydessä oleville asiakkaille.

Näin kaikki asiakkaat näkevät lopulta saman, yhdenmukaisen tilan.

Kun käyttäjä suorittaa asiakaspuolella toiminnon (esimerkiksi kirjoittaa merkin tai vetää elementtiä):

• asiakas luo toiminnon kuvaavan ”operaatio”-objektin.
• operaatio lähetetään WebSocket-palvelimelle.
• kun asiakas vastaanottaa palvelimelta operaation, se soveltaa sen asiakirjan paikalliseen esitykseen ja päivittää käyttöliittymän.

Asiakkaat soveltavat muutokset usein heti paikallisesti nopean käyttökokemuksen varmistamiseksi ja sovittavat ne sitten yhteen palvelimelta tulevien päivitysten kanssa.

Oletetaan, että kaksi käyttäjää, A ja B, muokkaa tekstikenttää, jossa näkyy aluksi ”Hello”.

• Käyttäjä A kirjoittaa merkin ”!” loppuun. Asiakas A lähettää palvelimelle {type: 'insert', pos: 5, char: '!'}.
• Käyttäjä B kirjoittaa tekstin ” World” sanan ”Hello” jälkeen. Asiakas B lähettää palvelimelle {type: 'insert', pos: 5, text: ' World'}.

Palvelimen OT- tai CRDT-logiikka käsittelee nämä operaatiot. Jos B:n operaatio saapuu ensin, A:n operaatio voidaan muuntaa lisäämään merkki ”!” kohtaan 11 (tekstin ”Hello World” jälkeen). Tämän jälkeen molemmat asiakkaat vastaanottavat ja soveltavat lopulliset, yhdenmukaiset operaatiot.

Tutustuimme siihen, miten WebSockets mahdollistaa monimutkaiset usean käyttäjän sovellukset, kuten yhteistyöeditorit ja digitaaliset taulut.

• Keskeinen haaste on tilan synkronointi.
• Operational Transformation (OT) ratkaisee ristiriitoja muuntamalla operaatioita, usein palvelinpuolella.
• Conflict-Free Replicated Data Types (CRDTs) mahdollistaa hajautetut ja yhdistettävät päivitykset, jotka johtavat lopulta yhdenmukaiseen tilaan.
• Arkkitehtuuri perustuu siihen, että asiakkaat lähettävät operaatioita WebSocket-palvelimelle, joka käsittelee ja välittää päivitykset.

Näiden mallien ymmärtäminen on tärkeää responsiivisten ja toimintavarmojen yhteistyökokemusten rakentamisessa!