Sdílet prostřednictvím

Klientská knihovna Azure Communication Chat pro JavaScript – verze 1.5.2

  • Článek

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

JavaScript Bundle

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

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.

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:

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.

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.


// 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.

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


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.


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

Přihlášení k odběru stavu připojení oznámení v reálném čase

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


// 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ů

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.