Condividi tramite


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

Questa guida introduttiva illustra come creare un sito Web PubSub per Socket.IO risorsa e incorporarlo rapidamente nell'app Socket.IO per semplificare lo sviluppo, velocizzare la distribuzione e ottenere scalabilità senza 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.

Importante

Le stringa di connessione non elaborate vengono visualizzate in questo articolo solo a scopo dimostrativo.

Una stringa di connessione include le informazioni sull'autorizzazione necessarie all'applicazione per l'accesso al servizio Azure Web PubSub. La chiave di accesso all'interno della stringa di connessione è simile a una password radice per il servizio. 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.

Evitare di distribuire le chiavi di accesso ad altri utenti, impostarle come hardcoded o salvarle in un file di testo normale accessibile ad altri. Ruotare le chiavi se si ritiene che siano state compromesse.

Prerequisiti

  • Un account Azure con una sottoscrizione attiva. Se non si ha un account, è possibile crearne uno gratuito.
  • Una certa familiarità con la libreria di Socket.IO.

Creare un sito Web PubSub per Socket.IO risorsa

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.

  • Usare il pulsante seguente per creare un sito Web PubSub per Socket.IO risorsa in Azure

    Distribuzione in Azure

  • Ricerca da portale di Azure barra di ricerca

    1. Vai al portale di Azure.

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

      Screenshot della ricerca del servizio Web PubSub per Socket.IO nel portale di Azure.

  • 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 per Socket.IO nel risultato della ricerca.

      Screenshot del servizio Web PubSub per Socket.IO nel marketplace.

    3. Fare clic su Crea nella pagina popup.

      Screenshot del servizio Web PubSub per Socket.IO nel portale di Azure.

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. E <web-pubsub-socketio-endpoint>path sono disponibili in portale di Azure.

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

  2. Digitare il nome dell'hub e copiare l'endpoint client e il percorso client

    Screenshot del servizio Web PubSub per Socket.IO nel pannello endpoint client portale di Azure.

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

    Screenshot del servizio Web PubSub per Socket.IO nel pannello portale di Azure stringa di connessione.

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

    node client.js