PubNub Chat SDKでユーザチャンネルメンバーシップを管理する方法

PubNubチャットSDKの紹介

TypeScriptおよびJavaScriptアプリケーションで利用可能なPubNubチャットSDKは、最小限の開発でアプリに強力で柔軟なチャット機能を簡単に追加できるように設計されたAPIセットを公開しています。 引用、ユーザーへの言及、チャンネル参照、スレッド、既読受信、タイピングインジケータなどのチャットオプションがSDKでネイティブにサポートされているため、本格的なアプリを迅速に構築できます。

チャット SDK を使い始めるには、ドキュメントと サンプルチャットアプリを参照してください。 チュートリアルでは、チャット SDK の基本的な機能を説明し、より高度な機能についても触れていきます。

このハウツーはPubNub Chat SDKのより強力な機能のいくつかに飛び込む一連の投稿の一部です。 このシリーズはどの順番で読んでも構いませんが、関連記事のリストは以下の通りです：

• チャットSDKでユーザーチャンネルのメンバーシップを管理する方法
• チャットSDKでメッセージにリアクションや絵文字を追加する方法
• チャットSDKでスレッドと引用メッセージを作成する方法
• チャットSDKでユーザーとチャンネルをメンションする方法

ユーザー チャンネル メンバーシップの管理

チャットSDKは、チャネルメンバーシップを理解するために重要ないくつかのタイプを定義しています：

• ユーザーは会話に参加している個人を表します。
• チャンネルは、複数のユーザー間の会話を表します。 ドキュメントでは、各チャンネルが1つの'チャットルーム'を表しているという例えを使用しています。 チャンネルは、直接（つまり、2人のユーザー間の1対1の会話）、'グループ'（つまり、複数の指定されたユーザー間）、または'パブリック'にすることができます。
• メンバーシップはユーザとチャネルの関係を表し、オプションでメタデータが付随します。

このガイドでは、チャンネルメンバーシップの作成と管理方法について説明します。

ユーザがチャネルに参加する方法

ユーザがチャネルのメンバになる方法は複数あります。 ダイレクト・チャネルまたはグループ・チャネルが作成されるとき、その会話に参加するユーザは作成時に引数として指定されます。

ドキュメントから引用した以下の例では、2人のユーザ 'agent-007' と 'agent-008' がチャネル 'group-chat-1' のメンバになっています。

// reference both agents you want to talk to
const user1 = await chat.getUser("agent-007")
const user2 = await chat.getUser("agent-008")

// add the channel ID, name, and topic
const { channel, hostMembership, inviteeMembership } = await chat.createGroupConversation(
  {
    users: 
    [
      user1,
      user2
    ],
    channelId: "group-chat-1"
    …
  }
)

ユーザがチャネルのメンバであるかどうかを問い合わせる方法はいくつかあり、チャネルのメンバに関するドキュメントに詳細が記載されています。 たとえば、先ほど作成したチャネルのメンバを取得する場合です：

// reference the "channel" object
const channel = await chat.getChannel("group-chat-1")
const members = await channel.getMembers()
//  members contains both users, so members.total === 2

チャネルの作成時にユーザが割り当てられなかった場合は、 後から対応するjoin()メソッドやleave()メソッドを使用することで、 チャネルに参加したり退会したりすることができます。 ユーザをチャネルのメンバに招待することもできます。

以下の短いデモで、この挙動を見ることができます。 これはライブで動作するデモなので、ページを更新しても チャンネルのメンバシップが保持されることに注意しましょう。

インタラクティブ・デモ

埋め込まれたコンテンツがこのページで利用できない場合は、https://chat-sdk-how-to-membership.netlify.app/で見ることもできます。

このデモを動かすコードはGitHub で公開されていますが、重要なポイントは次のとおりです：

アプリ内にChat オブジェクトのインスタンスがあることを確認してください。

const chat = await Chat.init({
  publishKey: "YOUR_PUBLISH_KEY",
  subscribeKey: "YOUR_SUBSCRIBE_KEY",
  userId: "YOUR_USER_ID",
})

チャット SDK に渡せるパラメータはたくさんありますが、チャンネルメンバーシップの場合は、標準的な公開キー、購読キー、ユーザ ID 以外は必要ありません。 このすべてが初めてで、どこから始めればよいかわからない場合は、ドキュメントの初期設定のセクションをご覧ください。

チャンネルに参加する。 このコードでは、次のセクションで説明するメンバーシップの更新を受け取るための登録も行います。

async function join(channelName: string)
  {
    if (chat)
    {
      const channel = await chat.getChannel(channelName)
      const channelMembership = await channel?.join(() => null)
      channelMembership?.membership.streamUpdates(async (membership) => {
        //  Stream updates on the channel as follows
        console.log(membership)
      })

      //  For brevity, ignore that this call could contain multiple pages of memberships
      const {memberships} = await chat.currentUser.getMemberships()
      setMyMemberships(memberships) 
    }
  }

上のコードコメントで述べたように、チャネル数が多すぎる場合、user.getMemberships() の呼び出しにページ分割されたデータが含まれることがあります。

デモの'leave channel'ボタンを動かすコードは以下の通りです：

async function leave(channelName: string)
  {
    if (chat)
    {
      const channel = await chat.getChannel(channelName)
      await channel?.leave();
      //  For brevity, ignore that this call could contain multiple pages of memberships
      const {memberships} = await chat.currentUser.getMemberships()
      setMyMemberships(memberships) 
    }
  }

デモをシンプルにするため、ユーザは一人だけで、ユーザ自身のメンバーシップのみを考慮します。 実際のアプリケーションでは、複数のユーザが存在し、それぞれがチャンネル・メンバーシップを持っています。 より現実的なデモはチャットSDKで利用可能で、このガイドの一番下で説明されています。

チャンネルメンバーシップのメタデータ

メンバーシップオブジェクトでは、チャネルとユーザの関連付けに関連するカスタムメタデータを指定することができます。例えば、これがサポート問い合わせに関連するチャットであった場合、ユーザのロールを {role: 'support technician'} として保存することができます。

メタデータは、メンバーシップの作成時に宣言することも、個々のユーザが任意の時点で更新することもできます。

メンバーシップのメタデータがいつ更新されたかを追跡するために、Chat SDKはStreamUpdates()メソッドとStreamUpdatesOn()メソッドをMembershipオブジェクトに提供しています。

先のデモで示したように、以下のようにメンバーシップ・メタデータの変更を追跡できます：

channelMembership?.membership.streamUpdates(async (membership) => {
  //  Stream updates on the channel as follows
  console.log(membership)
})

なぜユーザはチャネルに参加する必要があるのでしょうか?

ユーザはなぜチャネルに参加する必要があるのでしょうか? あるチャネルのメッセージを受信するには、connect()メソッドを呼び出します。 チャネルの作成時にそのチャネルのメンバーになっていない場合は、別途connect()を呼び出す必要がありますが、join()を呼び出すと自動的にconnect()が呼び出されます。

PubNubに慣れていれば、このconnect()の呼び出しはsubscribe()やaddListener()に似ています。

では、なぜチャネルに参加する必要があるのでしょうか？チャンネルに参加することと、関連するチャンネルメンバーシップは、チャットSDKがどのようにユーザー関係を理解するかの基本であり、既読受信、ユーザーへの言及、未読メッセージ数、モデレーション、タイピングインジケータなど、より強力なSDKの多くの機能を使用するために必要です。

メンバーシップ概要

• メンバーシップとは?カスタマイズ可能なメタデータを持つ、ユーザーとチャンネル間の関係。
• メンバーシップはどのように作成されますか?ユーザはチャンネル作成時にそのチャンネルに関連付けられるか、またはチャンネル作成後に自分自身で参加するか、他のユーザから招待されます。
• メンバーシップはどのように破棄されますか?ユーザーはいつでもチャンネルから退会できます。
• メンバーシップはどのように追跡されますか?チャネルのメンバは、ゲッター関数で問い合わせることができます。
• よくある落とし穴コネクト() を別途コールする必要がある場合は、 ドキュメントをよく読むようにしましょう。
• その他の制限事項?パブリック」チャネルに参加することはできますが、このタイプのチャネルでは、読み取り受信やタイピングインジケータなど、いくつかの機能はサポートされていません。
• PubNubキーセットにはどのような機能が必要ですか？キーセットのApp Contextを必ず有効にしてください。

デモユーザーチャンネルメンバーシップの動作

モバイル向けチャットSDKデモは、GitHubで利用可能な完全なソースコードとホストされたデモとして利用可能で、ユーザーとの会話を管理するためにメンバーシップを使用しています。 また、このセクションの下部に iFrame でレンダリングされたデモが表示されます。

デモで使用されているメンバーシップを見るには、以下の手順に従ってください：

1. アプリケーションにログインし、2つのデバイスそれぞれにランダムなユーザーIDを選択します。
2. 新規チャット'アイコンをクリックし、'グループチャットを作成'を選択してグループを作成します。
3. ログインした2つのユーザーIDを選択し、グループ名を割り当てます。
4. アプリケーションは裏で、2人のユーザーを新しく作成されたグループに関連付けるためのメンバーシップを作成しています。
5. グループ」セクションの下に作成されたエンティティをクリックして、グループの会話に入ります。
6. 画面上部のグループ名をタップすると、ユーザーのチャット設定が表示されます。
7. このユーザーの名前がチャットの'メンバー'であることに注目してください。
8. 会話から退出したり、アプリからログアウトして再度ログインしても、リアクションは保持され、メッセージ履歴から読み込まれることに注意してください。

埋め込みコンテンツがこのページで利用できない場合は、https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/からも閲覧できます。

PubNubはどのようにお役に立ちますか？

この記事はPubNub.comに掲載されたものです。

PubNubのプラットフォームは、開発者がWebアプリ、モバイルアプリ、IoTデバイス向けにリアルタイムのインタラクティブ機能を構築、配信、管理できるように支援します。

私たちのプラットフォームの基盤は、業界最大かつ最もスケーラブルなリアルタイムエッジメッセージングネットワークです。世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。

PubNubを体験

ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する

セットアップ

PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める

PubNubのドキュメントは、ユースケースやSDKに関係なく、あなたを立ち上げ、実行することができます。