Útmutató: Valós idejű együttműködési rajztábla létrehozása a Web PubSub használatával Socket.IO és üzembe helyezése Azure App Service

Az alkalmazások új osztálya újragondolja, hogy mi lehet a modern munka. Míg a Microsoft Word egyesíti a szerkesztőket, a Figma ugyanahhoz a kreatív törekvéshez gyűjti össze a tervezőket. Ez az alkalmazásosztály olyan felhasználói élményre épül, amely a távoli közreműködőkkel való kapcsolatfelvételt teszi lehetővé. Technikai szempontból a felhasználók tevékenységeit kis késéssel kell szinkronizálni a felhasználók képernyői között.

Áttekintés

Ebben az útmutatóban natív felhőbeli megközelítést alkalmazunk, és azure-szolgáltatásokat használunk egy valós idejű együttműködési rajztábla létrehozásához, és webalkalmazásként helyezzük üzembe a projektet a Azure App Service. A rajztábla alkalmazás elérhető a böngészőben, és lehetővé teszi, hogy bárki ugyanarra a vászonra rajzoljon.

Előfeltételek

A részletes útmutató követéséhez

• Egy Azure-fiók . Ha nem rendelkezik Azure-előfizetéssel, a kezdés előtt hozzon létre egy ingyenes Azure-fiókot .
• Azure CLI (2.39.0-s vagy újabb verzió) vagy Azure-Cloud Shell az Azure-erőforrások kezeléséhez.

Azure-erőforrások létrehozása az Azure CLI használatával

Bejelentkezés

1. Jelentkezzen be az Azure CLI-be a következő parancs futtatásával.

   az login
   

2. Hozzon létre egy erőforráscsoportot az Azure-ban.

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

Webalkalmazás-erőforrás létrehozása

1. Hozzon létre egy ingyenes App Service csomagot.

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

2. Webalkalmazás-erőforrás létrehozása

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

Web PubSub létrehozása Socket.IO

1. Hozzon létre egy Web PubSub-erőforrást.

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

2. Megjelenítheti és tárolhatja a valahol későbbi használatra szánt értéket primaryConnectionString .

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

Az alkalmazáskód lekérése

Futtassa a következő parancsot az alkalmazáskód másolatának lekéréséhez.

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

Az alkalmazás üzembe helyezése a App Service

1. App Service számos üzembehelyezési munkafolyamatot támogat. Ebben az útmutatóban egy ZIP-csomagot fogunk üzembe helyezni. Futtassa az alábbi parancsokat a projekt telepítéséhez és létrehozásához.

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

2. Tömörítse zip-be

   A Bash használata

   zip -r app.zip *
   

   A PowerShell használata

   Compress-Archive -Path * -DestinationPath app.zip
   

3. Állítsa be az Azure Web PubSub kapcsolati sztring az alkalmazásbeállítások között. Használja egy korábbi lépésben tárolt értékét primaryConnectionString .

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

4. Az alábbi paranccsal helyezze üzembe a Azure App Service.

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

A rajztábla alkalmazás megtekintése böngészőben

Most nyissa meg a böngészőt, és keresse fel az üzembe helyezett webalkalmazást. Az URL-cím általában .https://<webapp-name>.azurewebsites.net Javasoljuk, hogy több böngészőlapot nyisson meg, hogy megtapasztalhassa az alkalmazás valós idejű együttműködési aspektusát. Vagy még jobb, ha megosztja a hivatkozást egy munkatársával vagy barátjával.

Következő lépések

További Socket.IO minták megtekintése