Begin met Azure Web PubSub chat

Deze quickstart laat de snelste manier zien om Web PubSub-chat te laten werken. Je genereert een client access URL in het Azure-portaal, gebruikt vervolgens de client SDK om verbinding te maken, een kamer aan te maken en een bericht te sturen zonder servercode.

Prerequisites

• Een Azure Web PubSub-bron met opslag geconfigureerd en Chat ingeschakeld. Als je dit nog niet hebt gedaan, zie dan Opslag configureren en chat inschakelen.
• Node.js versie 20 of hoger.

Haal een clienttoegangstoken via het portaal

Een client maakt verbinding met een chathub met een clienttoegangs-URL die zijn gebruikersidentiteit draagt. Voor een snelle test genereer je er een in het portaal.

1. Open in het Azure-portaal je Web PubSub-bron.
2. Selecteer in het linkermenu het Keys-blad en vervolgens Client URL Generator.
3. Stel Hub bijvoorbeeld in op de naam van de Chat Hub die je hebt toegevoegd.chat
4. Stel de gebruikers-ID in op een willekeurige naam, bijvoorbeeld alice. Chat gebruikt dit als je gebruikersidentiteit.
5. Kopieer de Client Access URL.

De client-SDK installeren

Maak een project aan en installeer de client SDK.

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

Maak contact, maak een kamer aan en stuur een bericht

Sla de volgende code op als index.mjs. Vervang <client-access-url> deze door de URL die je van het portaal hebt gekopieerd.

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

Voer het uit:

node index.mjs

De uitvoer ziet er ongeveer als volgt uit:

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