Guida introduttiva: Incorporare Web PubSub per Socket.IO nell'app

Questa guida rapida illustra come creare una risorsa Web PubSub per Socket.IO e integrarla rapidamente nella tua app Socket.IO per semplificare lo sviluppo, accelerare la distribuzione e garantire la scalabilità senza aggiungere complessità.

Il codice illustrato in questa guida introduttiva si trova in CommonJS. Per usare un modulo ECMAScript, vedere la demo di chat per Socket.IO con PubSub Web di Azure.

Prerequisiti

Creare una risorsa Web PubSub per Socket.IO

Per creare un Web PubSub per Socket.IO, è possibile usare il pulsante con un clic seguente per creare o seguire le azioni seguenti per eseguire la ricerca in portale di Azure.

• Usa il pulsante seguente per creare una risorsa Web PubSub per Socket.IO in Azure

  

• Cerca dalla barra di ricerca del portale di Azure

  1. Vai al portale di Azure.

  2. Cercare socket.io, nella barra di ricerca e quindi selezionare Web PubSub per Socket.IO.

     

• Eseguire ricerche da Marketplace

  1. Vai al portale di Azure.

  2. Selezionare il pulsante Crea una risorsa visualizzato nell'angolo superiore sinistro del portale di Azure. Digitare socket.io nella casella di ricerca e premere INVIO. Selezionare Web PubSub for Socket.IO nei risultati della ricerca.

     

  3. Fare clic su Crea nella pagina popup.

     

Invio di messaggi con librerie di Socket.IO e Web PubSub per Socket.IO

Nei passaggi seguenti si crea un progetto Socket.IO e si integra con Web PubSub per Socket.IO.

Inizializzare un progetto Node e installare i pacchetti necessari

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

Scrivere codice del server

Creare un server.js file e aggiungere il codice seguente per creare un server Socket.IO e integrarlo con Web PubSub per Socket.IO.

Le stringa di connessione non elaborate vengono visualizzate in questo articolo solo a scopo dimostrativo. Negli ambienti di produzione proteggere sempre le chiavi di accesso. Usare Azure Key Vault per gestire e ruotare le chiavi in modo sicuro e proteggere la connessione con 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"
    })
});

Scrivere codice client

Creare un client.js file e aggiungere il codice seguente per connettere il client con Web PubSub per 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")

Quando si usa Web PubSub per Socket.IO <web-pubsub-socketio-endpoint> e path sono necessari affinché il client si connetta al servizio. I <web-pubsub-socketio-endpoint> e path si possono trovare nel portale di Azure.

1. Passare al pannello chiave di Web PubSub per Socket.IO

2. Digita il nome dell'hub e copia Client Endpoint e Client Path

   

Eseguire l'app

1. Eseguire l'app server:

   node server.js "<connection-string>"
   

   <connection-string> è il stringa di connessione che contiene l'endpoint e le chiavi per accedere alla risorsa Web PubSub per Socket.IO. È anche possibile trovare il stringa di connessione in portale di Azure

   

2. Eseguire l'app client in un altro terminale:

   node client.js