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

Nowa klasa aplikacji zmienia możliwości nowoczesnej pracy. Podczas gdy program Microsoft Word łączy edytory, Figma zbiera projektantów w tym samym kreatywnym przedsięwzięciu. Ta klasa aplikacji opiera się na środowisku użytkownika, które 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 z małym opóźnieniem.

Ważne

Nieprzetworzone parametry połączenia są wyświetlane tylko w tym artykule w celach demonstracyjnych.

Parametry połączenia zawiera informacje o autoryzacji wymagane przez aplikację w celu uzyskania dostępu do usługi Azure Web PubSub. Klucz dostępu wewnątrz parametry połączenia jest podobny do hasła głównego usługi. W środowiskach produkcyjnych zawsze chroń klucze dostępu. Użyj usługi Azure Key Vault, aby bezpiecznie zarządzać kluczami i obracać je oraz zabezpieczać połączenie za pomocą usługi WebPubSubServiceClient.

Unikaj dystrybuowania kluczy dostępu do innych użytkowników, kodowania ich lub zapisywania ich w dowolnym miejscu w postaci zwykłego tekstu, który jest dostępny dla innych użytkowników. Obracanie kluczy, jeśli uważasz, że mogły one zostać naruszone.

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 aplikacja systemu Azure 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, potrzebne są następujące elementy:

• 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 usługi 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 usługi 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.

   Nieprzetworzone parametry połączenia są wyświetlane tylko w tym artykule w celach demonstracyjnych. W środowiskach produkcyjnych zawsze chroń klucze dostępu. Użyj usługi Azure Key Vault, aby bezpiecznie zarządzać kluczami i obracać je oraz zabezpieczać połączenie za pomocą usługi WebPubSubServiceClient.

   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 usłudze App Service

1. Usługa 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 *
   
   # Powershell
   

2. Kompresuj do pliku zip

   Korzystanie z powłoki Bash

   zip -r app.zip *
   

   Użyj 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 we wcześniejszym 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 usłudze aplikacja systemu Azure.

   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, aby można było zobaczyć aspekt współpracy aplikacji w czasie rzeczywistym. Możesz też udostępnić link współpracownikowi lub znajomemu.

Następne kroki

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