PubNub Chat SDKでスレッドと引用メッセージを作成する方法

PubNubチャットSDKの紹介

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

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

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

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

スレッドと引用メッセージの作成

私たちがPubNubチャットSDKを導入した理由の1つは、従来のSDKを使用しているチャット開発者から寄せられたフィードバックに対応するためでした。 どのPubNub SDKでもユーザー間でリアルタイムのメッセージ交換は簡単にできますが、多くの開発者がユーザーが期待するようなチャット機能、例えばメッセージをスレッドにまとめたり、前のメッセージを引用したり、他のユーザーにタグ付けしたりする機能を実装する必要があることがわかりました。 このガイドでは、最初の2つの例、メッセージスレッドの作成と前のメッセージの引用を実装する方法を説明します。

前提条件

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

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

Chat SDK に渡すことができるパラメータはたくさんありますが、スレッドと引用については、標準的な発行キー、購読キー、ユーザ ID 以外は必要ありません。 これら全てが初めてで、何から始めれば良いか分からない場合は、ドキュメントの初期設定のセクションをご覧ください。

メッセージスレッド

メッセージスレッドのドキュメントはMessageドキュメントの下にあり、実装の詳細を説明します。基本的に、各メッセージスレッドは通信を処理するために独自のPubNubチャネルを必要としますが、チャットSDKを使用している場合、その実装は隠されています。

既存のルートメッセージがあれば、createThread()APIを使用してそのメッセージからスレッドを作成できます。 どのメッセージに対してもスレッドは1つしか持てないので、hasThread()API で新しいスレッドを作成する前に、すでにスレッドが存在するかどうかをチェックするのがベストプラクティスです。

if (!rootMessage.hasThread)
{
  threadChannel = await rootMessage.createThread()
}

createThread() は、Channel と同様のメソッドを持つThreadChannelオブジェクトを返します。 例えば、スレッドを使った会話の履歴全体を読みたかった場合、擬似コードは次のようになります：

FOREACH message in Channel
  message.getHistory()
  IF (message.hasThread() THEN
    threadChannel = message.getThread()
    threadChannel.getHistory()
  END IF
END FOREACH

スレッドチャネルでテキストメッセージを送信するには、sendText()API を使用します。

const threadChannel = rootMessage.getThread()
threadChannel.sendText(“hello”)

メッセージの引用

メッセージの引用は、チャット SDK 機能の一例で、送信されるメッセージについて、受信者が解釈できるコンテキストを提供します。 前の例のようにsendText()できることは非常に良いことですが、メッセージにファイルを含めたい場合はどうでしょうか？ メッセージの中でユーザーやチャンネルにタグを付けたい場合は？ あるいは、このガイドで最も重要なことですが、現在のメッセージの中で以前のメッセージを引用したい場合はどうでしょう？ これらのシナリオはすべてMessageDraft を使って処理します。

MessageDraft はチャット SDK の基本的な型であり、ほとんどのチャット実装で使用されます。 新しいチャットメッセージが作成されるたびに新しい MessageDraft オブジェクトを作成し、addQuote()API を呼び出して以前のメッセージを参照します。

MessageDraftについては、ユーザーやチャンネルについての説明で詳しく説明しますが、簡単にまとめると以下のようになります：

メッセージドラフトを格納する変数を宣言する。

 const [newMessageDraft, setNewMessageDraft] = useState<MessageDraft>()

チャットの初期化の一部として、またメッセージが送信された後に、新しい MessageDraft を初期化する。

setNewMessageDraft(threadChannel.createMessageDraft())

入力テキストが変更されるたびに（つまり、ユーザが何かを入力するたびに）、メッセージドラフトに通知する。

//  Note: Within the onChange() handler for the input field 
const response = await newMessageDraft.onChange(event.currentTarget.value)

ユーザのアクションに応じて、以前のメッセージを引用として追加する

newMessageDraft.addQuote(message)

必要なときにメッセージを送信する

newMessageDraft.send()

実際にデモを動かしてみるとわかりやすいでしょう。

すべてをまとめる

下の短いデモで、メッセージスレッドとメッセージの引用のとても簡単な例を見ることができます：

これは実際に動いているデモなので、複数のタブで自由にデモを起動して、リアルタイムで受信されるメッセージを見ることができます。 これは共有アプリケーションなので、'Reset App State'で白紙の状態にして遊ぶことができます。

インタラクティブ・デモ

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

このデモを動かしているコードはGitHubで公開されていますが、ここではアプリ内の適切なコードを抜粋して、それがどのように組み合わされているかを示します：

//  Input field onChange handler
async function handleInput(event: React.FormEvent<HTMLInputElement>)
{
  //  No special rendering for Message Draft with this app
  if (!newMessageDraft) return
  const response = await newMessageDraft.onChange(event.currentTarget.value)
}

メッセージを送信するロジック。 このデモは、常にスレッドチャンネルに返信するようにハードコーディングされています。

async function handleSend(event: React.SyntheticEvent) {
  newMessageDraft.send()
  setNewMessageDraft(threadChannel.createMessageDraft())
  setQuotedMessagePreview("")
  setText("")
}

ユーザーが "Quote Message "ボタンを押す。

async function handleQuoteMessage(message: Message)
{
  if (!newMessageDraft) return;
  setQuotedMessagePreview(message.text)
  newMessageDraft.addQuote(message)
}

他のチャンネルからのメッセージを引用することはできないので、このデモでは同じスレッドからのメッセージしか引用できないことを覚えておいてください。

デモモバイルの React Native デモでスレッドを作成し、メッセージを引用する

GitHub の完全なソースコード付きのホストされたデモとして利用可能です。 また、このセクションの下部にある iFrame でレンダリングされたデモを見ることができます。

以下の手順に従って、デモでスレッドを作成し、メッセージを引用してください：

1. アプリケーションにログインし、各デバイスにランダムなユーザーIDを選択します。
2. つ目のデバイスから会話を開始し、1つ目のデバイスにログインしているユーザーを選択します。
3. 会話にメッセージを追加する。
4. メッセージの1つを長押しします。
5. スレッドで返信」を選択し、返信を送信する。
6. メッセージの1つを長押しします（今送信した返信でもかまいません）。
7. メッセージを引用」を選択
8. 引用したテキストを含むメッセージを送信する
9. 会話からログアウトしたり、アプリからログアウトしてアプリに戻っても、リアクションは保持され、メッセージ履歴から読み込まれます。

埋め込みコンテンツがこのページで利用できない場合は、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に関係なく、あなたを立ち上げ、実行することができます。