Postupy: Vytvoření tabule pro spolupráci v reálném čase pomocí funkce Web PubSub pro Socket.IO 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í vychází z uživatelského prostředí, díky kterému se cítíme ve spojení se 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 komukoli kreslit na stejném plátně.

Požadavky

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

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

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

Přihlásit 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 "<resource-group-name>"
   

Vytvoření prostředku webové aplikace

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

   az appservice plan create \ 
     --resource-group "<resource-group-name>" \ 
     --name "<app-service-plan-name>" \ 
     --sku FREE
     --is-linux
   

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

   az webapp create \
     --resource-group "<resource-group-name>" \
     --name "<webapp-name>" \ 
     --plan "<app-service-plan-name>" \
     --runtime "NODE:16-lts"
   

Vytvoření webového pubsub pro Socket.IO

1. Vytvořte prostředek Web PubSub.

   az webpubsub create \
     --name "<socketio-name>" \
     --resource-group "<resource-group-name>" \
     --kind SocketIO
     --sku Premium_P1
   

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

   az webpubsub key show \
     --name "<socketio-name>" \
     --resource-group "<resource-group-name>"
   

Získání kódu aplikace

Spuštěním následujícího příkazu získejte kopii kódu aplikace.

git clone https://github.com/Azure-Samples/socket.io-webapp-integration

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ů projekt nainstalujte a sestavte.

   npm install
   npm run build
   
   # bash
   zip -r app.zip *
   
   # Poweshell
   

2. Komprese do souboru ZIP

   Použití Bash

   zip -r app.zip *
   

   Použití prostředí PowerShell

   Compress-Archive -Path * -DestinationPath app.zip
   

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

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

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

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

Zobrazení aplikace tabule v prohlížeči

Teď přejděte do prohlížeče a navštivte nasazenou webovou aplikaci. Adresa URL je https://<webapp-name>.azurewebsites.net obvykle . Doporučujeme mít otevřené více karet prohlížeče, abyste mohli vyzkoušet aspekt spolupráce aplikace v reálném čase. Nebo lepší je sdílet odkaz s kolegou nebo přítelem.

Další kroky

Podívejte se na další ukázky Socket.IO.