Klientská knihovna Azure Communication Chat pro JavaScript – verze 1.6.0

Azure Communication Services pro chat umožňuje vývojářům přidávat do své aplikace funkce chatu. Pomocí této klientské knihovny můžete spravovat vlákna chatu a jejich uživatele a odesílat a přijímat zprávy chatu.

Další informace o službě Azure Communication Services najdete

Začínáme

Požadavky

Předplatné Azure
Existující prostředek komunikační služby. Pokud potřebujete prostředek vytvořit, můžete použítwebu Azure Portal, Azure PowerShellu nebo Azure CLI.
Node.js

Instalování

npm install @azure/communication-chat

Podpora prohlížeče

JavaScriptový balíček

Pokud chcete tuto klientskou knihovnu použít v prohlížeči, musíte nejprve použít bundler. Podrobnosti o tom, jak to udělat, najdete v naší dokumentaci sdružování. V rollup.config.jspřidejte do modulu plug-in cjs následující přizpůsobené exporty názvů.


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

Klíčové koncepty

Konverzace chatu je reprezentována vláknem. Každému uživateli ve vlákně se říká účastník chatu. Účastníci chatu spolu můžou chatovat soukromě v chatu 1:1 nebo se můžou chytnou ve skupinovém chatu 1:N. Uživatelé také získají aktualizace téměř v reálném čase, když ostatní zapisují a když si přečetli zprávy.

ChatClient

ChatClient je primárním rozhraním pro vývojáře používající tuto klientskou knihovnu. Poskytuje asynchronní metody pro vytvoření a odstranění vlákna.

ChatThreadClient

ChatThreadClient poskytuje asynchronní metody pro provádění operací účastníků zpráv a chatu v rámci vlákna chatu.

Příklady

Inicializace ChatClient

K inicializaci chatovacího klienta použijte adresu URL prostředku a přístupový token uživatele.

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

Vytvoření vlákna se dvěma uživateli

K vytvoření vlákna chatu použijte metodu createThread.

createChatThreadRequest slouží k popisu požadavku na vlákno:

Použití topic k poskytnutí tématu vlákna;

createChatThreadOptions slouží k nastavení volitelných parametrů pro vytvoření vlákna:

Pomocí participants zobrazíte seznam účastníků chatu, které se mají přidat do vlákna;
Použití idempotencyToken k zadání opakovatelného požadavku

createChatThreadResult je výsledek vrácený z vytvoření vlákna. Obsahuje chatThread, což je vlákno, které bylo vytvořeno, a také vlastnost errors, která bude obsahovat informace o neplatných účastníků, pokud se jim nepodařilo přidat do vlákna.

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;

Vytvoření ChatThreadClient

ChatThreadClient vám umožní provádět operace specifické pro vlákno chatu, jako je aktualizace tématu vlákna chatu, odeslání zprávy, přidání účastníků do vlákna chatu atd.

Pomocí metody getChatThreadClient ChatClient s existujícím ID vlákna můžete inicializovat nový ChatThreadClient:

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

Odeslání zprávy do vlákna

Metoda sendMessage slouží k odeslání zprávy do vlákna identifikovaného identifikátorem threadId.

sendMessageRequest slouží k popisu žádosti o zprávu:

Použití content k poskytnutí obsahu chatové zprávy;

sendMessageOptions slouží k popisu volitelného parametru operace:

Pomocí senderDisplayName zadejte zobrazované jméno odesílatele;
Pomocí type zadejte typ zprávy, například text nebo html.

sendChatMessageResult je výsledek vrácený odesláním zprávy, obsahuje ID, což je jedinečné ID zprávy.

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;

Příjem zpráv z vlákna

Díky signalizaci v reálném čase se můžete přihlásit k odběru nových příchozích zpráv a odpovídajícím způsobem aktualizovat aktuální zprávy v paměti.

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

Případně můžete načíst chatové zprávy dotazováním metody listMessages v zadaných intervalech.

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
}

Přidání uživatelů do vlákna

Po vytvoření vlákna můžete přidat a odebrat uživatele z daného vlákna. Přidáním uživatelů jim udělíte přístup, aby mohli posílat zprávy do vlákna. Budete muset začít získáním nového přístupového tokenu a identity pro daného uživatele. Uživatel bude tento přístupový token potřebovat k inicializaci svého chatovacího klienta. Další informace o tokenech najdete tady: ověřování ve službě 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);

Odebrání uživatelů z vlákna

Podobně jako v předchozím příkladu můžete uživatele z vlákna odebrat. Abyste mohli odebrat, budete muset sledovat ID účastníků, které jste přidali.

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

Odběr událostí realTimeNotificationConnected a realTimeNotificationDisconnected umožňuje zjistit, kdy je připojení k volajícímu serveru aktivní.

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

Řešení problémů

Logování

Povolení protokolování může pomoct odhalit užitečné informace o chybách. Pokud chcete zobrazit protokol požadavků HTTP a odpovědí, nastavte proměnnou AZURE_LOG_LEVEL prostředí na infohodnotu . Případně můžete protokolování povolit za běhu voláním setLogLevel příkazu @azure/logger:

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

setLogLevel("info");

Další kroky

V tomto rychlém startu jste se naučili:

Vytvoření chatovacího klienta
Vytvoření vlákna s 2 uživateli
Odeslání zprávy do vlákna
Příjem zpráv z vlákna
Odebrání uživatelů z vlákna

Přispívající

Pokud chcete přispívat do této knihovny, přečtěte si průvodce přispívání a přečtěte si další informace o vytváření a testování kódu.

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-07-01