Commencez avec le chat Azure Web PubSub

Ce démarrage rapide montre la façon la plus rapide de voir le chat Web PubSub fonctionner. Vous générez une URL d’accès client dans le portail Azure, puis utilisez le SDK client pour vous connecter, créer une salle et envoyer un message sans code serveur.

Prerequisites

Obtenez un jeton d’accès client via le portail

Un client se connecte à un hub de discussion avec une URL d’accès client qui porte son identité utilisateur. Pour un test rapide, créez-en un dans le portail.

  1. Dans le portail Azure, ouvrez votre ressource Web PubSub.
  2. Dans le menu de gauche, sélectionnez la lame Clés , puis Générateur d’URL client.
  3. Définissez Hub sur le nom du Chat Hub que vous avez ajouté, par exemple chat.
  4. Définissez l’identifiant utilisateur sur le nom de votre choix, par exemple alice. Le chat utilise cela comme identité utilisateur.
  5. Copiez l’URL d’accès client.

Capture d’écran du générateur d’URL client dans le portail Azure, montrant le hub, l’identifiant utilisateur et l’URL d’accès client générée.

Installer le client du Kit de développement logiciel (SDK)

Créez un projet et installez le SDK client.

mkdir chat-quickstart
cd chat-quickstart
npm init -y
npm install @azure/web-pubsub-chat-client

Connectez-vous, créez une pièce et envoyez un message

Enregistrez le code suivant sous index.mjs. Remplacez-le <client-access-url> par l’URL que vous avez copiée depuis le portail.

import { ChatClient } from "@azure/web-pubsub-chat-client";

// Paste the client access URL you generated in the portal.
const clientAccessUrl = "<client-access-url>";

async function main() {
  // Connect to chat hub.
  const client = await ChatClient.start(clientAccessUrl);
  console.log(`Connected as ${client.userId}`);

  // Print messages as they arrive.
  client.on("message", (event) => {
    const message = event.message;
    console.log(`${message.createdBy}: ${message.content.text}`);
  });

  // Create a room. You're added to it automatically.
  const room = await client.createRoom("My first room", []);
  console.log(`Created room ${room.roomId}`);

  // Send a message to the room.
  await client.sendToRoom(room.roomId, "Hello, Chat!");

  // Read the room's history back from your storage.
  console.log("History:");
  for await (const message of client.listRoomMessages(room.roomId)) {
    console.log(`  ${message.createdBy}: ${message.content.text}`);
  }

  // Disconnect.
  await client.stop();
}

main().catch(console.error);

Exécutez-le :

node index.mjs

Vous voyez un résultat similaire à :

Connected as alice
Created room <room-id>
alice: Hello, Chat!
History:
  alice: Hello, Chat!

Note

Dans ce démarrage rapide, vous utilisiez un jeton de portail. Pour la production, émettez des jetons depuis votre propre serveur. Voir Authentifier et connecter les clients.