Instrukcje: tworzenie tablicy współpracy w czasie rzeczywistym przy użyciu usługi Web PubSub na potrzeby Socket.IO i wdrażanie jej w Azure App Service

Nowa klasa aplikacji zmienia możliwości nowoczesnego działania. Podczas gdy microsoft Word łączy redaktorów, Figma zbiera projektantów w tym samym kreatywnym przedsięwzięciu. Ta klasa aplikacji opiera się na środowisku użytkownika, który sprawia, że czujemy się połączeni z naszymi współpracownikami zdalnymi. Z technicznego punktu widzenia działania użytkownika muszą być synchronizowane na ekranach użytkowników przy małym opóźnieniu.

Omówienie

W tym przewodniku z instrukcjami stosujemy podejście natywne dla chmury i używamy usług platformy Azure do tworzenia tablicy współpracy w czasie rzeczywistym i wdrażamy projekt jako aplikację internetową w celu Azure App Service. Aplikacja tablicy jest dostępna w przeglądarce i umożliwia każdemu rysowanie na tej samej kanwie.

Wymagania wstępne

Aby postępować zgodnie z przewodnikiem krok po kroku, potrzebujesz

• Konto platformy Azure . Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto platformy Azure .
• Interfejs wiersza polecenia platformy Azure (wersja 2.39.0 lub nowsza) lub usługa Azure Cloud Shell do zarządzania zasobami platformy Azure.

Tworzenie zasobów platformy Azure przy użyciu interfejsu wiersza polecenia platformy Azure

Zaloguj

1. Zaloguj się do interfejsu wiersza polecenia platformy Azure, uruchamiając następujące polecenie.

   az login
   

2. Utwórz grupę zasobów na platformie Azure.

   az group create \
     --location "westus" \  
     --name "<resource-group-name>"
   

Tworzenie zasobu aplikacji internetowej

1. Utwórz bezpłatny plan App Service.

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

2. Tworzenie zasobu aplikacji internetowej

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

Tworzenie składnika Web PubSub dla Socket.IO

1. Utwórz zasób Web PubSub.

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

2. Pokaż i zapisz wartość gdzieś do późniejszego primaryConnectionString użycia.

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

Pobieranie kodu aplikacji

Uruchom następujące polecenie, aby uzyskać kopię kodu aplikacji.

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

Wdrażanie aplikacji w App Service

1. App Service obsługuje wiele przepływów pracy wdrażania. W tym przewodniku wdrożymy pakiet ZIP. Uruchom następujące polecenia, aby zainstalować i skompilować projekt.

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

2. Kompresuj do pliku zip

   Korzystanie z powłoki Bash

   zip -r app.zip *
   

   Korzystanie z programu PowerShell

   Compress-Archive -Path * -DestinationPath app.zip
   

3. Ustaw parametry połączenia usługi Azure Web PubSub w ustawieniach aplikacji. Użyj wartości przechowywanej primaryConnectionString z wcześniejszego kroku.

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

4. Użyj następującego polecenia, aby wdrożyć go w Azure App Service.

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

Wyświetlanie aplikacji tablicy w przeglądarce

Teraz przejdź do przeglądarki i przejdź do wdrożonej aplikacji internetowej. Adres URL zazwyczaj to https://<webapp-name>.azurewebsites.net . Zaleca się otwarcie wielu kart przeglądarki, dzięki czemu można doświadczyć aspektu współpracy w czasie rzeczywistym aplikacji. Możesz też udostępnić link współpracownikowi lub przyjacielowi.

Następne kroki

Zapoznaj się z więcej przykładów Socket.IO