Postupy: Vytvoření tabule pro spolupráci v reálném čase pomocí web pubSub pro Socket.IO a jeho nasazení do služby Aplikace Azure Service

Nová třída aplikací si představuje, co by mohla být moderní práce. I když Microsoft Word spojuje editory, Figma shromažďuje návrháře na stejném kreativním úsilí. Tato třída aplikací vychází z uživatelského prostředí, které nám dává pocit, že jsme připojení k našim vzdáleným spolupracovníkům. Z technického hlediska je potřeba synchronizovat aktivity uživatelů na obrazovkách uživatelů s nízkou latencí.

Důležité

Nezpracované připojovací řetězec se v tomto článku zobrazují jenom pro demonstrační účely.

Připojovací řetězec obsahuje informace o autorizaci vyžadované pro vaši aplikaci pro přístup ke službě Azure Web PubSub. Přístupový klíč uvnitř připojovací řetězec je podobný kořenovému heslu pro vaši službu. V produkčních prostředích vždy chraňte přístupové klíče. Pomocí služby Azure Key Vault můžete bezpečně spravovat a obměňovat klíče a zabezpečit připojení WebPubSubServiceClient.

Vyhněte se distribuci přístupových klíčů ostatním uživatelům, jejich pevnému kódování nebo jejich uložení kdekoli ve formátu prostého textu, který je přístupný ostatním uživatelům. Otočte klíče, pokud se domníváte, že mohly být ohroženy.

Přehled

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

Požadavky

Abyste mohli postupovat podle podrobných pokynů, 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 ke správě prostředků Azure.

Vytvoření prostředků Azure pomocí Azure CLI

Přihlásit se

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

   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 bezplatný plán služby 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. Umožňuje zobrazit a uložit hodnotu primaryConnectionString někde pro pozdější použití.

   Nezpracované připojovací řetězec se v tomto článku zobrazují jenom pro demonstrační účely. V produkčních prostředích vždy chraňte přístupové klíče. Pomocí služby Azure Key Vault můžete bezpečně spravovat a obměňovat klíče a zabezpečit připojení WebPubSubServiceClient.

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

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

2. Komprese do zipu

   Použití bashe

   zip -r app.zip *
   

   Použití PowerShellu

   Compress-Archive -Path * -DestinationPath app.zip
   

3. V nastavení aplikace nastavte připojovací řetězec Azure Web PubSub. Použijte hodnotu primaryConnectionString , kterou jste uložili v předchozím 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 služby Aplikace Azure 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 vidět aspekt spolupráce v reálném čase aplikace. Nebo lépe sdílejte odkaz s kolegou nebo přítelem.

Další kroky

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