Freigeben über

Azure Communication Chat-Clientbibliothek für JavaScript– Version 1.5.0

  • Artikel

mit Azure Communication Services für Chat können Entwickler ihrer App Chatfunktionen hinzufügen. Verwenden Sie diese Clientbibliothek, um Chatthreads und deren Benutzer zu verwalten und Chatnachrichten zu senden und zu empfangen.

Weitere Informationen zu Azure Communication Services finden Sie hier.

Erste Schritte

Voraussetzungen

Installieren von

npm install @azure/communication-chat

Browserunterstützung

JavaScript-Paket

Um diese Clientbibliothek im Browser verwenden zu können, müssen Sie zunächst einen Bundler verwenden. Ausführliche Informationen dazu finden Sie in unserer Bündelungsdokumentation. Fügen rollup.config.jsSie in die folgenden benutzerdefinierten Namensexporte im cjs Plug-In hinzu.


cjs({
  namedExports: {
    events: ["EventEmitter"],
    "@azure/communication-signaling": ["CommunicationSignalingClient", "SignalingClient"],
    "@opentelemetry/api": ["CanonicalCode", "SpanKind", "TraceFlags"]
  }
})

Wichtige Begriffe

Eine Chatunterhaltung wird durch einen Thread dargestellt. Jeder Benutzer im Thread wird als Chatteilnehmer bezeichnet. Chatteilnehmer können privat in einem 1:1-Chat miteinander chatten oder sich in einem 1:N-Gruppenchat zusammenraufen. Benutzer erhalten außerdem nahezu in Echtzeit Updates für den Zeitpunkt, an dem andere Benutzer eingeben und die Nachrichten gelesen haben.

ChatClient

ChatClient ist die primäre Schnittstelle für Entwickler, die diese Clientbibliothek verwenden. Es stellt asynchrone Methoden zum Erstellen und Löschen eines Threads bereit.

ChatThreadClient

ChatThreadClient stellt asynchrone Methoden zum Ausführen der Nachrichten- und Chatteilnehmervorgänge innerhalb des Chatthreads bereit.

Beispiele

Initialisieren von ChatClient

Verwenden Sie die Ressourcen-URL und das Benutzerzugriffstoken, um den Chatclient zu initialisieren.

import { ChatClient } from '@azure/communication-chat';
import { AzureCommunicationTokenCredential } from "@azure/communication-common";

// Your unique Azure Communication service endpoint
const endpointUrl = '<ENDPOINT>';
const userAccessToken = '<USER_ACCESS_TOKEN>';
const tokenCredential = new AzureCommunicationTokenCredential(userAccessToken);
const chatClient = new ChatClient(endpointUrl, tokenCredential);

Erstellen eines Threads mit zwei Benutzern

Verwenden Sie die createThread-Methode, um einen Chatthread zu erstellen.

createChatThreadRequest wird zum Beschreiben der Threadanforderung verwendet:

  • Verwenden Sie topic , um ein Threadthema zu geben.

createChatThreadOptions wird verwendet, um die optionalen Parameter festzulegen, um den Thread zu erstellen:

  • Verwenden Sie participants , um die Chatteilnehmer aufzulisten, die dem Thread hinzugefügt werden sollen.
  • Verwenden Sie idempotencyToken , um eine wiederholbare Anforderung anzugeben.

createChatThreadResult ist das Ergebnis, das beim Erstellen eines Chatthreads zurückgegeben wird. Sie enthält eine chatThread , die der thread ist, der erstellt wurde, sowie eine errors Eigenschaft, die Informationen zu ungültigen Teilnehmern enthält, wenn sie dem Thread nicht hinzugefügt werden konnten.

const createChatThreadRequest = {
  topic: "Hello, World!"
};
const createChatThreadOptions = {
  participants: [
    {
      id: { communicationUserId: '<USER_ID>' },
      displayName: '<USER_DISPLAY_NAME>'
    }
  ]
};
const createChatThreadResult = await chatClient.createChatThread(
  createChatThreadRequest,
  createChatThreadOptions
);
const threadId = createChatThreadResult.chatThread.id;

Erstellen eines ChatThreadClient

Mit dem ChatThreadClient können Sie spezifisch für einen Chatthread bestimmte Vorgänge ausführen, z. B. das Aktualisieren des Chatthreadthemas, das Senden einer Nachricht, das Hinzufügen von Teilnehmern zum Chatthread usw.

Sie können einen neuen ChatThreadClient mit der getChatThreadClient -Methode des ChatClient mit einer vorhandenen Thread-ID initialisieren:

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Senden einer Nachricht an den Thread

Verwenden Sie die sendMessage-Methode, um eine Nachricht an einen Thread zu senden, der anhand von „threadId“ identifiziert wird.

sendMessageRequest wird verwendet, um die Nachrichtenanforderung zu beschreiben:

  • Verwenden Sie content, um den Inhalt der Chatnachricht anzugeben.

sendMessageOptions wird verwendet, um die optionalen Vorgangsparameter zu beschreiben:

  • Verwenden Sie senderDisplayName, um den Anzeigenamen des Absenders anzugeben.
  • Verwenden Sie type, um den Nachrichtentyp anzugeben, etwa Text oder HTML.

sendChatMessageResult ist das Ergebnis, das vom Senden einer Nachricht zurückgegeben wird, es enthält eine ID, bei der es sich um die eindeutige ID der Nachricht handelt.

const sendMessageRequest =
{
  content: 'Hello Geeta! Can you share the deck for the conference?'
};
const sendMessageOptions:SendMessageOptions = {
  senderDisplayName: "Jack",
  type: "text"
};
const sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
const messageId = sendChatMessageResult.id;

Empfangen von Nachrichten aus einem Thread

Bei der Echtzeitsignalisierung können Sie eine Funktion abonnieren, mit der auf neue eingehende Nachrichten gelauscht wird und die aktuellen Nachrichten im Arbeitsspeicher entsprechend aktualisiert werden.


// open notifications channel
await chatClient.startRealtimeNotifications();
// subscribe to new notification
chatClient.on("chatMessageReceived", (e) => {
  console.log("Notification chatMessageReceived!");
  // your code here
});

Alternativ können Sie Chatnachrichten auch abrufen, indem Sie die listMessages-Methode jeweils nach dem angegebenen Intervallzeitraum abfragen.

for await (const chatMessage of chatThreadClient.listMessages()) {
   // your code here
}

Hinzufügen von Benutzern zu einem Thread

Sobald ein Thread erstellt wurde, können Sie diesem Thread Benutzer hinzufügen und daraus entfernen. Indem Sie Benutzer hinzufügen, gewähren Sie diesen Zugriff, um Nachrichten an den Thread senden zu können. Sie müssen zunächst ein neues Zugriffstoken und eine neue Identität für diesen Benutzer abrufen. Der Benutzer benötigt dieses Zugriffstoken, um den Chatclient initialisieren zu können. Weitere Informationen zu Token finden Sie hier: Authentifizieren bei Azure Communication Services


const addParticipantsRequest =
{
  participants: [
    {
      id: { communicationUserId: '<NEW_PARTICIPANT_USER_ID>' },
      displayName: 'Jane'
    }
  ]
};

await chatThreadClient.addParticipants(addParticipantsRequest);

Entfernen von Benutzern aus einem Thread

Ähnlich wie oben können Sie auch Benutzer aus einem Thread entfernen. Zum Entfernen müssen Sie die IDs der teilnehmer nachverfolgen, die Sie hinzugefügt haben.


await chatThreadClient.removeParticipant({ communicationUserId: '<MEMBER_ID>' });

Abonnieren des Verbindungsstatus von Echtzeitbenachrichtigungen

Mit dem Abonnement für die Ereignisse realTimeNotificationConnected und realTimeNotificationDisconnected erfahren Sie, wann die Verbindung mit dem Aufrufserver aktiv ist.


// subscribe to realTimeNotificationConnected event
chatClient.on('realTimeNotificationConnected', () => {
  console.log("Real time notification is now connected!");
  // your code here
});

// subscribe to realTimeNotificationDisconnected event
chatClient.on('realTimeNotificationDisconnected', () => {
  console.log("Real time notification is now disconnected!");
  // your code here
});

Problembehandlung

Nächste Schritte

In dieser Schnellstartanleitung haben Sie Folgendes gelernt:

  • Erstellen eines Chatclients
  • Erstellen eines Threads mit zwei Benutzern
  • Senden einer Nachricht an den Thread
  • Empfangen von Nachrichten aus einem Thread
  • Entfernen von Benutzern aus einem Thread

Mitwirken

Wenn Sie an dieser Bibliothek mitwirken möchten, lesen Sie die Anleitung für Mitwirkende, um mehr darüber zu erfahren, wie Sie den Code erstellen und testen können.