Sdílet prostřednictvím

Klientská knihovna Azure Communication Chat pro JavaScript – verze 1.5.0

  • Článek

Azure Communication Services pro chat umožňuje vývojářům přidávat do aplikace možnosti 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 Azure Communication Services najdete tady.

Začínáme

Požadavky

Instalace

npm install @azure/communication-chat

Podpora prohlížečů

JavaScript Bundle

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


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

Klíčové koncepty

Chatová konverzace je reprezentovaná vláknem. Každý uživatel ve vlákně se nazývá účastník chatu. Účastníci chatu můžou mezi sebou soukromě chatovat v chatu 1:1 nebo se schoulit ve skupinovém chatu 1:N. Uživatelé také získají téměř v reálném čase aktualizace o tom, kdy ostatní píšou a kdy si zprávy přečetli.

ChatClient

ChatClient je primární rozhraní 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í zpráv a účastníků chatu ve vlákně 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

createThread Pomocí metody vytvořte vlákno chatu.

createChatThreadRequest se používá k popisu žádosti o vlákno:

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

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

  • Slouží participants k výpisu účastníků chatu, které mají být přidány do vlákna;
  • Slouží k zadání opakovatelného požadavku.idempotencyToken

createChatThreadResult je výsledek vrácený vytvořením vlákna. Obsahuje chatThread vlákno, které bylo vytvořeno, a errors vlastnost, která bude obsahovat informace o neplatných účastnících, pokud se je 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.

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

const chatThreadClient = chatClient.getChatThreadClient(threadId);

Odeslání zprávy do vlákna

Pomocí sendMessage metody odešlete zprávu do vlákna identifikovaného threadId.

sendMessageRequest se používá k popisu žádosti o zprávu:

  • Slouží content k poskytnutí obsahu chatové zprávy;

sendMessageOptions se používá k popisu volitelných parametrů operace:

  • Slouží senderDisplayName k zadání zobrazovaného jména odesílatele;
  • Slouží type k určení typu 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 a naslouchat novým příchozím zprávm 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 pak můžete přidávat a odebírat 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 tím, že pro daného uživatele získáte nový přístupový token a identitu. Uživatel bude tento přístupový token potřebovat k inicializaci chatovacího klienta. Další informace o tokenech najdete tady: Ověřování pro 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ýše můžete uživatele z vlákna odebrat. Pokud chcete 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í s oznámeními v reálném čase

Odběr událostí realTimeNotificationConnected a realTimeNotificationDisconnected umožňuje zjistit, kdy je připojení k serveru volání 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
});

Poradce při potížích

Další kroky

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

  • Vytvoření chatovacího klienta
  • Vytvoření vlákna se 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ívání

Pokud chcete přispívat do této knihovny, přečtěte si prosím průvodce přispívání , kde se dozvíte více o tom, jak sestavit a otestovat kód.