Fang an mit Azure Web PubSub chat

In dieser Schnellstartanleitung erfahren Sie, wie Sie den Web PubSub-Chat am schnellsten zum Laufen bringen. Man generiert eine Client-Zugriffs-URL im Azure-Portal, nutzt dann das Client-SDK, um sich zu verbinden, einen Raum zu erstellen und eine Nachricht ohne Servercode zu senden.

Voraussetzungen

• Eine Azure Web PubSub-Ressource mit konfiguriertem Speicher und aktiviertem Chat. Falls du das noch nicht gemacht hast, siehe Speicher konfigurieren und Chat aktivieren.
• Node.js Version 20 oder später.

Holen Sie sich einen Client-Zugriffstoken vom Portal aus

Ein Client verbindet sich mit einem Chat-Hub mit einer Client-Zugriffs-URL, die seine Benutzeridentität enthält. Für einen schnellen Test generiere einen im Portal.

1. Im Azure-Portal öffnen Sie Ihre Web PubSub-Ressource.
2. Im linken Menü wählen Sie die Keys-Blade , dann den Client-URL-Generator.
3. Setze Hub zum Beispiel auf den Namen des Chat-Hubs, den du hinzugefügt hast.chat
4. Setze die Benutzer-ID auf einen beliebigen Namen, zum Beispiel alice. Der Chat nutzt dies als deine Benutzeridentität.
5. Kopiere die Client-Zugriffs-URL.

Installieren Sie das Client-SDK

Erstelle ein Projekt und installiere das Client-SDK.

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

Verbinden Sie sich, erstellen Sie einen Raum und senden Sie eine Nachricht

Speichern Sie den folgenden Code als index.mjs. Ersetzen Sie <client-access-url> durch die URL, die Sie aus dem Portal kopiert haben.

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);

Ausführen:

node index.mjs

Es wird eine ähnliche Ausgabe angezeigt wie:

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