Biblioteka klienta usługi Azure Communication Chat dla języka JavaScript — wersja 1.6.0

Usługi Azure Communication Services na potrzeby czatu umożliwiają deweloperom dodawanie możliwości czatu do aplikacji. Ta biblioteka kliencka służy do zarządzania wątkami czatów i ich użytkownikami oraz wysyłania i odbierania wiadomości czatu.

Dowiedz się więcej o usługach Azure Communication Services tutaj

Wprowadzenie

Warunki wstępne

Subskrypcja platformy Azure.
Istniejący zasób usług komunikacyjnych. Jeśli musisz utworzyć zasób, możesz użyć witryny Azure Portal, programu Azure PowerShelllub interfejsu wiersza polecenia platformy Azure .
Node.js

Instalowanie

npm install @azure/communication-chat

Obsługa przeglądarki

Pakiet JavaScript

Aby użyć tej biblioteki klienta w przeglądarce, najpierw należy użyć pakietu. Aby uzyskać szczegółowe informacje o tym, jak to zrobić, zapoznaj się z naszą dokumentacją dotyczącą tworzenia pakietów . W rollup.config.jsdodaj następujące niestandardowe eksporty nazw w wtyczki cjs.


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

Kluczowe pojęcia

Konwersacja na czacie jest reprezentowana przez wątek. Każdy użytkownik w wątku jest nazywany uczestnikiem czatu. Uczestnicy czatu mogą rozmawiać ze sobą prywatnie w czacie 1:1 lub przytulać się w 1:N czat grupowy. Użytkownicy otrzymują również aktualizacje niemal w czasie rzeczywistym, gdy inni piszą i kiedy czytają komunikaty.

Klient czatu

ChatClient jest podstawowym interfejsem dla deweloperów korzystających z tej biblioteki klienta. Zapewnia metody asynchroniczne do tworzenia i usuwania wątku.

ChatThreadClient

ChatThreadClient zapewnia metody asynchroniczne do wykonywania operacji uczestników wiadomości i czatów w wątku czatu.

Przykłady

Inicjowanie elementu ChatClient

Użyj adresu URL zasobu i tokenu dostępu użytkownika, aby zainicjować klienta czatu.

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

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

Tworzenie wątku z dwoma użytkownikami

Użyj metody createThread, aby utworzyć wątek czatu.

createChatThreadRequest służy do opisywania żądania wątku:

Użyj topic, aby nadać temat wątku;

createChatThreadOptions służy do ustawiania opcjonalnych parametrów w celu utworzenia wątku:

Użyj participants, aby wyświetlić listę uczestników czatu do dodania do wątku;
Użyj idempotencyToken, aby określić powtarzalne żądanie

createChatThreadResult jest wynikiem zwróconym podczas tworzenia wątku. Zawiera on chatThread, który jest wątkiem, który został utworzony, a także właściwością errors, która będzie zawierać informacje o nieprawidłowych uczestników, jeśli nie zostały dodane do wątku.

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

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

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;

Tworzenie obiektu ChatThreadClient

ChatThreadClient umożliwia wykonywanie operacji specyficznych dla wątku czatu, takich jak aktualizowanie tematu wątku czatu, wysyłanie wiadomości, dodawanie uczestników do wątku czatu itp.

Możesz zainicjować nową klasę ChatThreadClient przy użyciu metody getChatThreadClient obiektu ChatClient z istniejącym identyfikatorem wątku:

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

Wysyłanie wiadomości do wątku

Użyj metody sendMessage, aby wysłać komunikat do wątku zidentyfikowanego przez identyfikator threadId.

sendMessageRequest służy do opisywania żądania komunikatu:

Użyj content, aby podać zawartość wiadomości czatu;

sendMessageOptions służy do opisywania opcjonalnych parametrów operacji:

Użyj senderDisplayName, aby określić nazwę wyświetlaną nadawcy;
Użyj type, aby określić typ wiadomości, taki jak "tekst" lub "html";

sendChatMessageResult jest wynikiem zwróconym z wysyłania wiadomości, zawiera identyfikator, który jest unikatowym identyfikatorem wiadomości.

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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;

Odbieranie komunikatów z wątku

Za pomocą sygnałów w czasie rzeczywistym można subskrybować nasłuchiwanie nowych przychodzących komunikatów i odpowiednio aktualizować bieżące komunikaty w pamięci.

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

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

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

Alternatywnie możesz pobrać wiadomości czatu, sondując metodę listMessages w określonych odstępach czasu.

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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

Dodawanie użytkowników do wątku

Po utworzeniu wątku można dodawać i usuwać użytkowników z tego wątku. Dodając użytkowników, możesz przyznać im dostęp, aby mogli wysyłać komunikaty do wątku. Musisz zacząć od uzyskania nowego tokenu dostępu i tożsamości dla tego użytkownika. Użytkownik będzie potrzebował tego tokenu dostępu, aby zainicjować klienta czatu. Więcej informacji na temat tokenów znajduje się tutaj: Uwierzytelnianie w usługach Azure Communication Services

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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

await chatThreadClient.addParticipants(addParticipantsRequest);

Usuwanie użytkowników z wątku

Podobnie jak powyżej, można również usunąć użytkowników z wątku. Aby usunąć, należy śledzić identyfikatory dodanych uczestników.

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

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

const chatThreadClient = chatClient.getChatThreadClient("<threadId>");

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

Subskrypcja zdarzeń realTimeNotificationConnected i realTimeNotificationDisconnected umożliwia określenie, kiedy połączenie z serwerem połączeń jest aktywne.

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

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

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

Rozwiązywanie problemów

Przemysł drzewny

Włączenie rejestrowania może pomóc odkryć przydatne informacje o błędach. Aby wyświetlić dziennik żądań HTTP i odpowiedzi, ustaw zmienną AZURE_LOG_LEVEL środowiskową na info. Alternatywnie rejestrowanie można włączyć w czasie wykonywania, wywołując polecenie setLogLevel w pliku @azure/logger:

import { setLogLevel } from "@azure/logger";

setLogLevel("info");

Następne kroki

W tym przewodniku Szybki start pokazano, jak wykonać następujące działania:

Tworzenie klienta czatu
Tworzenie wątku z 2 użytkownikami
Wysyłanie wiadomości do wątku
Odbieranie komunikatów z wątku
Usuwanie użytkowników z wątku

Przyczyniając się

Jeśli chcesz współtworzyć tę bibliotekę, przeczytaj przewodnik dotyczący współtworzenia , aby dowiedzieć się więcej na temat tworzenia i testowania kodu.

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-07-01