Dela applikationstillstånd i realtid

Föreställ dig att flera personer arbetar med samma dokument eller spelar samma spel. De behöver se samma information och ändringar i realtid. Denna gemensamma, synkroniserade information kallas delat programtillstånd.

Det är de data som återspeglar programmets aktuella status och som alla anslutna deltagare kan komma åt och ändra.

Att dela tillstånd i realtid är avgörande för att skapa verkligt samarbetsinriktade och interaktiva upplevelser. Tänk på:

• Samarbetsredigering: Flera användare skriver i ett dokument samtidigt.
• Ritning för flera användare: Alla ser linjer visas medan de ritas.
• Onlinespel: Synkronisering av spelarpositioner, poäng och spelhändelser.
• Delade whiteboards: Realtidsuppdateringar av ritningar och anteckningar.

Det får program att kännas responsiva och sammankopplade.

I WebRTC är RTCDataChannel ditt självklara verktyg för att dela applikationstillstånd. Till skillnad från medieströmmar (ljud/video) är datakanaler utformade för att skicka godtyckliga data, från textmeddelanden till binära filer.

De tillhandahåller en snabb, direkt och säker peer-to-peer-anslutning, vilket gör dem idealiska för små, frekventa tillståndsuppdateringar utan fördröjning.

Innan du skickar något behöver du bestämma hur applikationstillståndet ska struktureras. Ett vanligt och flexibelt sätt är att använda vanliga JavaScript-objekt eller JSON (JavaScript Object Notation).

Det gör det enkelt att lagra olika typer av data, till exempel text, tal och nästlade objekt, som sedan kan serialiseras.

Prova att köra det här exemplet med ett enkelt tillståndsobjekt:

När en användare gör en ändring uppdaterar du det lokala tillståndet. Därefter behöver du skicka ändringen till de andra noderna. Datakanaler förväntar sig strängdata eller binära data.

Vi använder JSON.stringify() för att konvertera vårt JavaScript-objekt till en JSON-sträng innan vi skickar det via dataChannel.send() (konceptuellt).

Så här förbereder du en uppdatering:

När en annan nod skickar en uppdatering tar händelsehanteraren dataChannel.onmessage emot den. Den mottagna datan är en sträng (eller en ArrayBuffer).

Därefter använder du JSON.parse() för att konvertera JSON-strängen tillbaka till ett JavaScript-objekt. Slutligen tillämpar du ändringarna på applikationens lokala tillstånd, ofta genom att använda Object.assign() för att slå samman dem.

Se hur du bearbetar en mottagen uppdatering:

När du delar tillstånd kan du antingen skicka hela applikationstillståndet varje gång en ändring sker eller bara skicka "diffen" (delta-uppdateringen), alltså den del av tillståndet som ändrades.

För stora tillstånd eller frekventa små ändringar är det effektivare att bara skicka diffar, eftersom det använder mindre bandbredd. Att skicka hela tillståndet kan däremot vara enklare att implementera och mer robust mot missade meddelanden i vissa situationer.

Vad händer om två användare försöker ändra samma del av tillståndet exakt samtidigt? Det kallas en tillståndskonflikt.

Enkla lösningar omfattar "senaste skrivningen vinner" (den senast mottagna uppdateringen skriver över tidigare uppdateringar). Mer avancerade system använder tekniker som CRDT:er (Conflict-free Replicated Data Types), alltså datastrukturer som är utformade för att automatiskt slå samman ändringar från olika källor utan konflikter.

Föreställ dig en enkel applikation med en delad räknare. Varje nod har en knapp för att öka räknaren.

1. Initialt tillstånd: Båda noderna startar med counter: 0.
2. Användaråtgärd: Nod A klickar på "Increment". Den lokala counter blir 1.
3. Skicka uppdatering: Nod A skickar {"counter": 1} via datakanalen.
4. Ta emot uppdatering: Nod B tar emot {"counter": 1}, tolkar den och uppdaterar sin lokala counter till 1.
5. Synkronisering: Båda noderna visar nu counter: 1.

Det här enkla flödet visar grunderna i synkronisering av tillstånd i realtid.

I den här lektionen har du lärt dig hur viktigt det är att dela applikationstillstånd i realtid för kollaborativa funktioner. Vi har gått igenom hur RTCDataChannel är idealisk för detta samt processen att representera, skicka och ta emot tillståndsuppdateringar med hjälp av JSON-serialisering.

Du har också utforskat utmaningar som tillståndskonflikter och strategier för att välja mellan hela tillstånd och delta-uppdateringar. Dessa tekniker är grundläggande för att bygga responsiva applikationer för flera användare.