Partager via

Guide pratique : créer un tableau blanc collaboratif en temps réel en tirant parti de Web PubSub pour Socket.IO et le déployer sur Azure App Service

  • Article

Une nouvelle classe d’applications réinvente ce que pourrait être le travail moderne. Alors que Microsoft Word rassemble des éditeurs, Figma rassemble des concepteurs sur le même projet créatif. Cette classe d’applications s’appuie sur une expérience utilisateur qui nous permet de nous sentir en contact avec nos collaborateurs distants. D’un point de vue technique, les activités de l’utilisateur doivent être synchronisées sur les écrans des utilisateurs à une faible latence.

Vue d’ensemble

Dans ce guide pratique, nous utilisons une approche native cloud et utilisons les services Azure pour créer un tableau blanc collaboratif en temps réel et nous déployons le projet en tant qu’application web vers Azure App Service. L’application de tableau blanc est accessible dans le navigateur et permet à tout le monde de dessiner sur le même canevas.

Animation de la vue d’ensemble du projet terminé.

Prérequis

Pour suivre le guide pas à pas, vous avez besoin d’effectuer ce qui suit

Créer des ressources Azure à l’aide d’Azure CLI

Se connecter

  1. Connectez-vous à Azure CLI en exécutant la commande suivante :

    az login

  2. Créez un groupe de ressources sur Azure.

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

Créer une ressource d’application web

  1. Créez un plan App Service gratuit.

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

  2. Créer une ressource d’application web

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

Créer un Web PubSub pour Socket.IO

  1. Créez une ressource Web PubSub.

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

  2. Présentez et stockez la valeur de primaryConnectionString quelque part pour une utilisation ultérieure.

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

Obtenir le code de l’application

Exécutez la commande suivante pour obtenir une copie du code de l’application.

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

Déployer l’application sur App Service

  1. App Service prend en charge de nombreux workflows de déploiement. Pour ce guide, nous allons déployer un package ZIP. Exécutez les commandes suivantes pour installer et générer le projet.

    npm install
npm run build

# bash
zip -r app.zip *

# Poweshell

  2. Compresser dans un zip

    Utilisez Bash

    zip -r app.zip *

    Utiliser PowerShell

    Compress-Archive -Path * -DestinationPath app.zip

  3. Définissez une chaîne de connexion Azure Web PubSub dans les paramètres de l’application. Utilisez la valeur de primaryConnectionString stockée à partir d’une étape précédente.

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

  4. Utilisez la commande suivante pour déployer l’application sur Azure App Service.

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

Afficher l’application de tableau blanc dans un navigateur

Accédez maintenant à votre navigateur et visitez votre application web déployée. En règle générale, l’url est https://<webapp-name>.azurewebsites.net. Nous vous recommandons d’ouvrir plusieurs onglets de navigateur afin de pouvoir découvrir l’aspect collaboratif en temps réel de l’application. Ou mieux, partagez le lien avec un collègue ou un ami.

Étapes suivantes

Voir d’autres échantillons de Socket.IO