Démarrage rapide : incorporer Web PubSub pour Socket.IO dans votre application

Ce guide de démarrage rapide montre comment créer une ressource Web PubSub pour Socket.IO et l’incorporer rapidement dans votre application Socket.IO pour simplifier le développement, accélérer le déploiement et obtenir une scalabilité sans complexité.

Le code présenté dans ce guide de démarrage rapide se trouve dans CommonJS. Si vous souhaitez utiliser un module ECMAScript, consultez la démonstration de conversation pour Socket.IO avec Azure Web PubSub.

Prérequis

Créer une ressource Web PubSub pour Socket.IO

Pour créer une ressource Web PubSub pour Socket.IO, vous pouvez utiliser le bouton suivant pour créer ou suivre les actions ci-dessous pour effectuer une recherche dans le portail Microsoft Azure.

• Utiliser le bouton suivant pour créer une ressource Web PubSub pour Socket.IO dans Azure

  

• Rechercher à partir de la barre de recherche du portail Microsoft Azure

  1. Accédez au portail Azure.

  2. Recherchez socket.io dans la barre de recherche, puis sélectionnez Web PubSub pour Socket.IO.

     

• Rechercher à partir de la Place de marché

  1. Accédez au portail Azure.

  2. Sélectionnez le bouton Créer une ressource dans le coin supérieur gauche du portail Azure. Entrez socket.io dans la zone de recherche, puis appuyez sur Entrée. Sélectionnez Web PubSub pour Socket.IO dans le résultat de la recherche.

     

  3. Cliquez sur Créer dans la page contextuelle.

     

Envoyer des messages avec des bibliothèques Socket.IO et Web PubSub pour Socket.IO

Dans les étapes suivantes, vous créez un projet Socket.IO et l’intégrer à Web PubSub pour Socket.IO.

Initialiser un projet Node et installer les packages requis

mkdir quickstart
cd quickstart
npm init
npm install @azure/web-pubsub-socket.io socket.io-client

Écrire du code serveur

Créez un fichier server.js et ajoutez le code suivant pour créer un serveur Socket.IO et l’intégrer à Web PubSub pour Socket.IO.

Des chaînes de connexion brutes sont utilisées dans cet article uniquement à des fins de démonstration. Dans les environnements de production, protégez toujours vos clés d’accès. Utilisez Azure Key Vault pour gérer et faire pivoter vos clés en toute sécurité et sécuriser votre connexion avec WebPubSubServiceClient.

/*server.js*/
const { Server } = require("socket.io");
const { useAzureSocketIO } = require("@azure/web-pubsub-socket.io");

let io = new Server(3000);

// Use the following line to integrate with Web PubSub for Socket.IO
useAzureSocketIO(io, {
    hub: "Hub", // The hub name can be any valid string.
    connectionString: process.argv[2]
});

io.on("connection", (socket) => {
    // Sends a message to the client
    socket.emit("hello", "world");

    // Receives a message from the client
    socket.on("howdy", (arg) => {
        console.log(arg);   // Prints "stranger"
    })
});

Écrire du code client

Créez un fichier client.js et ajoutez le code suivant pour connecter le client à Web PubSub pour Socket.IO.

/*client.js*/
const io = require("socket.io-client");

const socket = io("<web-pubsub-socketio-endpoint>", {
    path: "/clients/socketio/hubs/Hub",
});

// Receives a message from the server
socket.on("hello", (arg) => {
    console.log(arg);
});

// Sends a message to the server
socket.emit("howdy", "stranger")

Lorsque vous utilisez Web PubSub pour Socket.IO, <web-pubsub-socketio-endpoint> et path sont requis pour que le client se connecte au service. Vous trouverez <web-pubsub-socketio-endpoint> et path dans le portail Microsoft Azure.

1. Accédez au panneau clé de Web PubSub pour Socket.IO.

2. Tapez le nom de votre hub et copiez le Point de terminaison client et le Chemin du client.

   

Exécuter l’application

1. Exécutez l’application du serveur :

   node server.js "<connection-string>"
   

   Le <connection-string> est la chaîne de connexion qui contient le point de terminaison et les clés pour accéder à votre ressource Web PubSub pour Socket.IO. Vous pouvez aussi trouver la chaîne de connexion dans le portail Microsoft Azure.

   

2. Exécutez l’application cliente dans un autre terminal :

   node client.js