次の方法で共有

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

  • [アーティクル]

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

Azure Communication Services の詳細については、

はじめ

前提 条件

装着

npm install @azure/communication-chat

ブラウザーのサポート

JavaScript バンドル

ブラウザーでこのクライアント ライブラリを使用するには、まず、バンドルを使用する必要があります。 これを行う方法の詳細については、バンドルドキュメントを参照してください。 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);

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

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

sendMessageRequest は、メッセージ要求を記述するために使用されます。

  • content を使用してチャット メッセージの内容を提供します。

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

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

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 人のユーザーでスレッドを作成する
  • スレッドにメッセージを送信する
  • スレッドからメッセージを受信する
  • スレッドからユーザーを削除する

貢献

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