Udostępnij za pośrednictwem

Biblioteka klienta czatu usługi Azure Communication dla języka JavaScript — wersja 1.5.4

  • Artykuł

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

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.

ChatClient

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

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.

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:

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.

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.


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

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


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.


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

Subskrybowanie stanu połączenia powiadomień w czasie rzeczywistym

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


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

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.