Postupy: Vytvoření tabule pro spolupráci v reálném čase pomocí Azure Web PubSub a nasazení do Azure App Service

Nová třída aplikací si představuje, co by moderní práce mohla být. Zatímco Microsoft Word spojuje editory, Figma shromažďuje návrháře na stejné kreativní úsilí. Tato třída aplikací je založená na uživatelském prostředí, díky kterému se cítíme ve spojení s našimi vzdálenými spolupracovníky. Z technického hlediska je potřeba aktivity uživatelů synchronizovat napříč obrazovkami uživatelů s nízkou latencí.

Přehled

V tomto návodu použijeme nativní přístup pro cloud a použijeme služby Azure k vytvoření tabule pro spolupráci v reálném čase a nasadíme projekt jako webovou aplikaci pro Azure App Service. Aplikace tabule je přístupná v prohlížeči a umožňuje každému kreslit na stejném plátně.

Podívejte se na živou ukázku tabule

Architektura

Název služby Azure	Účel	Výhody
Azure App Service	Poskytuje hostitelské prostředí pro back-endovou aplikaci, která je sestavená pomocí Expressu.	Plně spravované prostředí pro back-endy aplikací bez nutnosti starat se o infrastrukturu, na které běží kód
Azure Web PubSub	Poskytuje kanál pro výměnu dat s nízkou latencí mezi back-endovou aplikací a klienty.	Výrazně snižuje zatížení serveru tím, že uvolní server od správy trvalých připojení WebSocket a škáluje se na 100 K souběžných klientských připojení s jedním prostředkem.

Požadavky

Podrobné vysvětlení toku dat najdete na konci tohoto návodu, protože se nejprve zaměříme na sestavení a nasazení aplikace tabule.

Abyste mohli postupovat podle podrobného průvodce, potřebujete

• Účet Azure . Pokud nemáte předplatné Azure, vytvořte si bezplatný účet Azure , než začnete.
• Azure CLI (verze 2.29.0 nebo vyšší) nebo Azure Cloud Shell pro správu prostředků Azure.

Vytváření prostředků Azure pomocí Azure CLI

1. Přihlaste se

1. Spuštěním následujícího příkazu se přihlaste k Azure CLI.

   az login
   

2. Vytvořte skupinu prostředků v Azure.

   az group create \
     --location "westus" \  
     --name "whiteboard-group"
   

2. Vytvoření prostředku webové aplikace

1. Vytvořte bezplatný plán App Service.

   az appservice plan create \ 
     --resource-group "whiteboard-group" \ 
     --name "demo" \ 
     --sku FREE
     --is-linux
   

2. Vytvoření prostředku webové aplikace

   az webapp create \
     --resource-group "whiteboard-group" \
     --name "whiteboard-app" \ 
     --plan "demo" \
     --runtime "NODE:18-lts"
   

3. Vytvoření prostředku Web PubSub

1. Vytvořte prostředek Web PubSub.

   az webpubsub create \
     --name "whiteboard-app" \
     --resource-group "whiteboard-group" \
     --location "westus" \
     --sku Free_F1
   

2. Zobrazte a uložte hodnotu primaryConnectionString někam pro pozdější použití.

   az webpubsub key show \
     --name "whiteboard-app" \
     --resource-group "whiteboard-group"
   

---

Získání kódu aplikace

Spuštěním následujícího příkazu získejte kopii kódu aplikace. Podrobné vysvětlení toku dat najdete na konci tohoto návodu.

git clone https://github.com/Azure/awps-webapp-sample.git

Nasazení aplikace do App Service

1. App Service podporuje mnoho pracovních postupů nasazení. V tomto průvodci nasadíme balíček ZIP. Spuštěním následujících příkazů připravte zip.

   npm install
   npm run build
   zip -r app.zip *
   

2. Pomocí následujícího příkazu ho nasaďte do Azure App Service.

   az webapp deployment source config-zip \
   --resource-group "whiteboard-group" \
   --name "whiteboard-app" \
   --src app.zip
   

3. V nastavení aplikace nastavte připojovací řetězec Azure Web PubSub. Použijte hodnotu, kterou primaryConnectionString jste si uložili z dřívějšího kroku.

   az webapp config appsettings set \
   --resource-group "whiteboard-group" \
   --name "whiteboard-app" \
   --setting Web_PubSub_ConnectionString="<primaryConnectionString>"
   

Konfigurace nadřazeného serveru pro zpracování událostí přicházejících z Web PubSub

Kdykoli klient odešle zprávu službě Web PubSub, služba odešle požadavek HTTP do zadaného koncového bodu. Tento mechanismus váš back-endový server používá k dalšímu zpracování zpráv, například pokud můžete zprávy uchovávat v databázi podle výběru.

Stejně jako u požadavků HTTP potřebuje služba Web PubSub vědět, kde má váš aplikační server najít. Vzhledem k tomu, že back-endová aplikace je teď nasazená do App Service, získáme pro ni veřejně přístupný název domény.

1. Zobrazit a uložit hodnotu name někam.

   az webapp config hostname list \
     --resource-group "whiteboard-group"
     --webapp-name "whiteboard-app" 
   

2. Koncový bod, který jsme se rozhodli zveřejnit na back-endovém serveru, je /eventhandler a hub název aplikace tabule. "sample_draw"

   az webpubsub hub create \ 
     --resource-group "whiteboard-group" \
     --name "whiteboard-app" \
     --hub-name "sample_draw" \
     --event-handler url-template="https://<Replace with the hostname of your Web App resource>/eventhandler" user-event-pattern="*" system-event="connected" system-event="disconnected" 
   

Důležité

url-template má tři části: protokol + název hostitele + cesta, což je https://<The hostname of your Web App resource>/eventhandlerv našem případě .

Zobrazení aplikace tabule v prohlížeči

Teď přejděte do prohlížeče a navštivte nasazenou webovou aplikaci. Doporučuje se mít otevřené více karet prohlížeče, abyste si mohli vyzkoušet aspekt spolupráce aplikace v reálném čase. Nebo lépe, sdílejte odkaz s kolegou nebo přítelem.

Tok dat

Přehled

Část toku dat se podrobněji seznámí s tím, jak je aplikace whiteboard sestavena. Aplikace tabule má dvě metody přenosu.

• Služba HTTP napsaná jako aplikace Express a hostovaná na App Service.
• Připojení WebSocket spravovaná službou Azure Web PubSub

Když ke správě připojení WebSocket použijete Azure Web PubSub, sníží se zatížení webové aplikace. Kromě ověřování klienta a obsluhy obrázků není součástí webové aplikace synchronizace aktivit kreslení. Aktivity kreslení klienta se odesílají přímo na web PubSub a vysílají se všem klientům ve skupině.

V každém okamžiku může být více než jeden klientský výkres. Pokud by webová aplikace měla spravovat připojení WebSocket sama, musela všechny aktivity kreslení vysílat všem ostatním klientům. Obrovský provoz a zpracování jsou pro server velkou zátěží.

Klient sestavený pomocí Vue vytvoří požadavek HTTP na přístupový token klienta na koncový bod /negotiate. Back-endová aplikace je aplikace Express a hostovaná jako webová aplikace pomocí Azure App Service.

Když back-endová aplikace úspěšně vrátí přístupový token klienta připojujícímu se klientovi, klient ho použije k navázání připojení WebSocket s Azure Web PubSub.

Pokud je handshake s Azure Web PubSub úspěšný, klient se přidá do skupiny s názvem draw, čímž se vlastně přihlásí k odběru zpráv publikovaných v této skupině. Klient má také oprávnění posílat zprávy skupinědraw.

Poznámka

Aby byla tato příručka zaměřená na postupy, všichni připojující se klienti se přidají do stejné skupiny s názvem draw a mají oprávnění odesílat zprávy této skupině. Pokud chcete spravovat připojení klientů na podrobné úrovni, projděte si úplné odkazy na rozhraní API poskytovaná službou Azure Web PubSub.

Azure Web PubSub oznámí back-endové aplikaci, že se klient připojil. Back-endová aplikace zpracovává onConnected událost voláním sendToAll(), s datovou částí nejnovějšího počtu připojených klientů.

Poznámka

Je důležité si uvědomit, že pokud je ve draw skupině velký počet online uživatelů s jedním síťovým voláním z back-endové aplikace, budou všichni online uživatelé upozorněni, že se právě připojil nový uživatel. To výrazně snižuje složitost a zatížení back-endové aplikace.

Jakmile klient naváže trvalé připojení k Web PubSub, odešle požadavek HTTP back-endové aplikaci na načtení nejnovějšího obrazce a dat na pozadí na adrese /diagram. Službu HTTP hostované na App Service je možné kombinovat s Web PubSub. App Service se stará o obsluhu koncových bodů HTTP, zatímco Web PubSub se stará o správu připojení WebSocket.

Klienti a back-endová aplikace teď mají dva způsoby výměny dat. Jedním je konvenční cyklus požadavků a odpovědí HTTP a druhým je trvalý obousměrný kanál přes Web PubSub. Akce výkresu, které pocházejí od jednoho uživatele a musí být vysílány všem uživatelům hned po jejich dokončení, se doručují prostřednictvím web PubSub. Nevyžaduje zapojení back-endové aplikace.

Vyčištění prostředků

I když aplikace používá pouze úrovně Free obou služeb, doporučuje se odstranit prostředky, pokud je už nepotřebujete. Skupinu prostředků společně s prostředky, které v ní jsou, můžete odstranit pomocí následujícího příkazu:

az group delete 
  --name "whiteboard-group"

Další kroky

Podívejte se na další ukázky vytvořené pomocí Web PubSub