次の方法で共有

JavaScript 用 Azure Communication Chat クライアント ライブラリ - バージョン 1.5.0

  • [アーティクル]

Azure Communication Services for Chat を使用すると、開発者はアプリにチャット機能を追加できます。 このクライアント ライブラリを使用して、チャット スレッドとそのユーザーを管理し、チャット メッセージを送受信します。

Azure Communication Servicesの詳細については、こちらを参照してください

作業の開始

前提条件

［インストール中］

npm install @azure/communication-chat

ブラウザーのサポート

JavaScript バンドル

ブラウザーでこのクライアント ライブラリを使用するには、まず bundler を使用する必要があります。 これを行う方法の詳細については、 バンドルに関するドキュメントを参照してください。 で rollup.config.js、次のカスタマイズされた名前のエクスポートをプラグインに cjs 追加します。


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

主要な概念

チャット会話はスレッドによって表されます。 スレッド内の各ユーザーは、チャット参加者と呼ばれます。 チャット参加者は、1 対 1 のチャットで個人的にチャットしたり、1:N グループ チャットに参加したりできます。 また、ユーザーは、他のユーザーが入力しているときやメッセージを読んだときに、ほぼリアルタイムで更新を受け取ります。

ChatClient

ChatClient は、このクライアント ライブラリを使用する開発者のための主要なインターフェイスです。 スレッドを作成および削除するための非同期メソッドが提供されます。

ChatThreadClient

ChatThreadClient は、チャット スレッド内でメッセージとチャット参加者の操作を行うための非同期メソッドを提供します。

例

ChatClient を初期化する

リソース URL とユーザー アクセス トークンを使用して、チャット クライアントを初期化します。

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

2人のユーザーでスレッドを作成する

チャット スレッドは、createThread メソッドを使用して作成します。

スレッド要求は、createChatThreadRequest を使用して記述します。

  • を使用して topic スレッド トピックを指定します。

createChatThreadOptions は、スレッドを作成するための省略可能なパラメーターを設定するために使用されます。

  • スレッドに追加するチャット参加者を一覧表示するには、 を使用 participants します。
  • を使用して idempotencyToken 反復可能な要求を指定します

createChatThreadResult は、スレッドの作成から返される結果です。 これには、 chatThread 作成されたスレッドである が含まれます errors 。また、無効な参加者がスレッドに追加できなかった場合に関する情報を含む プロパティも含まれます。

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;

ChatThreadClient を作成する

ChatThreadClient を使用すると、チャット スレッド トピックの更新、メッセージの送信、チャット スレッドへの参加者の追加など、チャット スレッドに固有の操作を実行できます。

既存のスレッド ID で ChatClient の メソッドを getChatThreadClient 使用して、新しい ChatThreadClient を初期化できます。

const chatThreadClient = chatClient.getChatThreadClient(threadId);

メッセージをスレッドに送信する

threadId で識別されるスレッドにメッセージを送信するには、sendMessage メソッドを使用します。

メッセージ要求は、sendMessageRequest を使用して記述します。

  • チャット メッセージの内容は、content を使用して設定します。

操作の省略可能なパラメーターを記述するには、sendMessageOptions を使用します。

  • 送信者の表示名を指定するには、senderDisplayName を使用します。
  • 'text' や 'html' などのメッセージの種類を指定するには、type を使用します。

sendChatMessageResult はメッセージの送信から返された結果であり、メッセージの一意の ID である ID が含まれています。

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;

スレッドからメッセージを受信する

リアルタイム シグナリングを使用すると、新しい受信メッセージをサブスクライブしてリッスンし、それに応じてメモリ内の現在のメッセージを更新することができます。


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

チャット メッセージは、特定の間隔で `listMessages` メソッドをポーリングすることによって取得することもできます。

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

スレッドへのユーザーの追加

スレッドが作成されたら、そのスレッドに対してユーザーを追加および削除できます。 ユーザーを追加することで、スレッドにメッセージを送信できるアクセス権をユーザーに付与します。 まず、そのユーザーの新しいアクセス トークンと ID を取得する必要があります。 チャット クライアントを初期化するためには、ユーザーにアクセス トークンが必要となります。 トークンの詳細については、「Azure Communication Servicesに対する認証」を参照してください。


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

await chatThreadClient.addParticipants(addParticipantsRequest);

スレッドからユーザーを削除する

上記と同様に、スレッドからユーザーを削除することもできます。 削除するには、追加した参加者の ID を追跡する必要があります。


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

リアル タイム通知の接続状態をサブスクライブする

イベント realTimeNotificationConnected のサブスクリプション、および realTimeNotificationDisconnected を使用すると、呼び出しサーバーへの接続がアクティブになっている状態がわかります。


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

トラブルシューティング

次の手順

このクイック スタートでは、次の方法について説明しました。

  • チャット クライアントを作成する
  • 2 人のユーザーでスレッドを作成する
  • メッセージをスレッドに送信する
  • スレッドからメッセージを受信する
  • スレッドからユーザーを削除する

共同作成

このライブラリに投稿する場合、コードをビルドしてテストする方法の詳細については、投稿ガイドを参照してください。