前提条件チャットメッセージイベントへのサブスクライブ受信済みメッセージの表示チャットルームでアクションを実行する次のステップ

Amazon IVS Chat Client Messaging SDK: React Native チュートリアルパート 2: メッセージとイベント

本チュートリアルのパート 2 (最後のパート) は、複数のセクションに分かれています。

チャットメッセージイベントへのサブスクライブ
受信済みメッセージの表示
チャットルームでアクションを実行する
1. メッセージの送信
2. メッセージの削除
次のステップ

注: JavaScript と TypeScript のコード例が同じ内容である場合は、共通の例として示しています。

前提条件

このチュートリアルのパート 1 である「チャットルーム」を完了してから、このパートに進んでください。

チャットルームでイベントが発生した際、ChatRoom インスタンスはイベントを使用して通信を行います。チャットによるエクスペリエンスを開始するには、ルーム内で、そこに接続しているユーザーに対し、他のユーザーからメッセージを送信されたことを知らせる必要があります。

このためにユーザーは、チャットメッセージイベントをサブスクライブします。メッセージ/イベントごとに、作成済みのメッセージリストを更新する方法については、この後半で説明します。

App の useEffect フック内で、すべてのメッセージイベントにサブスクライブします。

TypeScript/JavaScript:


// App.tsx / App.jsx

useEffect(() => {
  // ...
  const unsubscribeOnMessageReceived = room.addListener('message', (message) => {});

  return () => {
    // ...
    unsubscribeOnMessageReceived();
  };
}, []);

受信済みメッセージの表示

メッセージの受信は、チャットエクスペリエンスにとって中心的な要素です。Chat JS SDKを使用してコードを作成することで、チャットルームに接続している他のユーザーからのイベントを簡単に受信できます。

後半部分で、ここで作成したコンポーネントを活用してチャットルームでアクションを実行する方法を説明します。

App で、messages という名前の ChatMessage 配列型を使用して、messages という名前の状態を定義します。

次に、message リスナー関数内で、messages 配列に message を追加します。

TypeScript/JavaScript:


// App.tsx / App.jsx

// ...

const unsubscribeOnMessageReceived = room.addListener('message', (message) => {
  setMessages((msgs) => [...msgs, message]);
});

// ...

以下に、受信したメッセージを表示するタスクを順を追って説明します。

メッセージコンポーネントの作成
現在のユーザーにより送信されたメッセージの認識
チャットメッセージのリストのレンダリング

メッセージコンポーネントの作成

Message コンポーネントにより、チャットルームで受信したメッセージ内容のレンダリングが行われます。このセクションでは、個々のチャットメッセージを App 内でレンダリングするための、メッセージコンポーネントを作成します。

src ディレクトリで Message という名前の新しいファイルを作成します。このコンポーネントに ChatMessage 型を渡し、さらに ChatMessage プロパティからの content 文字列を渡すことで、チャットルームのメッセージリスナーから受信したメッセージテキストを表示します。プロジェクトナビゲーターで、Message に移動します。

ヒント: このコンポーネントを使用して、メッセージ行に表示するさまざまなプロパティ (アバター URL、ユーザー名、メッセージ送信時のタイムスタンプなど) を保存できます。

現在のユーザーにより送信されたメッセージの認識

現在のユーザーから送信されたメッセージを認識するために、そのユーザーの userId を格納する React コンテキストを作成するように、コードを変更します。

src ディレクトリに、UserContext という名前で新しいファイルを作成します。

注: ここでは、useState フックを使用して userId 値を保存しています。将来的には、ユーザーコンテキストの変更や、ログインのためにも setUserId を使用できます。

次に、tokenProvider に渡された最初のパラメータの userId を、先に作成済みのコンテキストにより置き換えます。以下に示すように、トークンプロバイダーに SEND_MESSAGE 権限を追加してください。これは、メッセージを送信するために必要です。

Message コンポーネント内では、既に作成済みの UserContext を使用して isMine 変数を宣言し、送信者の userId とコンテキストからの userId を照合し、現在のユーザーにさまざまなスタイルのメッセージを適用します。

チャットメッセージのリストのレンダリング

ここで、FlatList および Message コンポーネントを使用してメッセージを一覧表示します。

以上で、チャットルームで受信したメッセージを App でレンダリングする準備ができました。作成したコンポーネントを活用して、チャットルーム内のアクションを実行する方法について、この後で説明します。

チャットルームでアクションを実行する

チャットルームに対する主な操作例としては、メッセージの送信や、モデレーターのアクション実行などが挙げられます。ここでは、さまざまな ChatRequest オブジェクトを使用し、メッセージの送信や削除、他のユーザーの接続の切断といった一般的なアクションを Chatterbox 内で実行する方法を説明します。

チャットルームのアクションは、すべて共通のパターンに従っており、それぞれ対応するリクエストオブジェクトを持っています。各リクエストは、それが確認された際に、対応するレスポンスオブジェクトを受け取ります。

チャットトークンの作成時に適切な権限が付与されているユーザーであれば、チャットルームで実行できるリクエストを確認するためのアクションを、対応するリクエストオブジェクトを使用して正常に実行できます。

以下で、メッセージを送信する方法と、メッセージを削除する方法について説明します。

メッセージの送信

SendMessageRequest クラスにより、チャットルームでのメッセージ送信が有効化されます。ここでは、「メッセージ入力の作成」(このチュートリアルのパート 1) で作成したコンポーネントを使用して、メッセージリクエストを送信するように App を変更します。

まず、isSending という名前を付けた新しいブール値のプロパティを、useState フックで定義します。この新しいプロパティで isSendDisabled 定数を使用すると、button 要素の無効状態を切り替えることができます。SendButton のイベントハンドラーで messageToSend の値をクリアし、isSending を true に設定します。

API 呼び出しはこのボタンにより実行されるため、isSending ブール値を追加することで、リクエストが完了するまで SendButton でのユーザー操作を無効にし、複数の API 呼び出しが同時に発生するのを防ぐことができます。

注: メッセージの送信は、上記の「現在のユーザーにより送信されたメッセージの認識」にあるように、トークンプロバイダーに SEND_MESSAGE 権限を追加した場合にのみ機能します。

TypeScript/JavaScript:


// App.tsx / App.jsx

// ...

const [isSending, setIsSending] = useState(false);

// ...

const onMessageSend = () => {
  setIsSending(true);
  setMessageToSend('');
};

// ...

const isSendDisabled = connectionState !== 'connected' || isSending;

// ...

新しい SendMessageRequest インスタンスを作成してリクエストを準備し、メッセージの内容をコンストラクターに渡してます。isSending および messageToSend の状態を設定したら、sendMessage メソッドを呼び出してリクエストをチャットルームに送信します。最後に、リクエストの確認または拒否を受け取った時点で、isSending フラグをクリアします。

TypeScript/JavaScript:


// App.tsx / App.jsx

// ...
import { ChatRoom, ConnectionState, SendMessageRequest } from 'amazon-ivs-chat-messaging'
// ...

const onMessageSend = async () => {
  const request = new SendMessageRequest(messageToSend);
  setIsSending(true);
  setMessageToSend('');

  try {
    const response = await room.sendMessage(request);
  } catch (e) {
    console.log(e);
    // handle the chat error here...
  } finally {
    setIsSending(false);
  }
};

// ...

ここで、Chatterbox を実行してみます。MessageBar を使用してメッセージの下書きを作成し、SendButton をタップしてメッセージを送信します。先に作成済みの MessageList 内にレンダリングされた、送信済みメッセージが表示されるはずです。

メッセージの削除

チャットルームからメッセージを削除するには、適切な権限が必要です。これらの権限は、チャットルームへの認証時に使用するチャットトークンの初期化中に付与されます。このセクションでは、「ローカル認証/承認サーバーのセットアップ」(このチュートリアルのパート 1) にある ServerApp により、モデレーターの機能を指定しています。この処理は、「トークンプロバイダーの作成」(同じくパート 1) で作成した tokenProvider オブジェクトを使用して、アプリ内で実行されます。

ここでは、Message を変更し、メッセージを削除する関数を追加します。

まず、App.tsx を開き DELETE_MESSAGE の機能を追加します。 (capabilities は tokenProvider 関数の 2 番目のパラメータです。)

注: これにより、生成されたチャットトークンに関連付けられているユーザーがチャットルーム内のメッセージを削除できることが、ServerApp から IVS Chat API に対し伝達されます。実際には、サーバーアプリのインフラストラクチャでユーザーの権限を管理するためのバックエンドロジックは、さらに複雑なものになるでしょう。

TypeScript/JavaScript:


// App.tsx / App.jsx

// ...

const [room] = useState(() =>
    new ChatRoom({
      regionOrUrl: process.env.REGION,
      tokenProvider: () => tokenProvider(userId, ['SEND_MESSAGE', 'DELETE_MESSAGE']),
    }),
);

// ...

以降のステップでは、削除ボタンを表示するために、Message を変更していきます。

文字列をパラメータの 1 つとして受け取り Promise を返す新しい関数を、onDelete の名前で定義します。文字列パラメータには、コンポーネントのメッセージ ID を渡します。

TypeScript


// Message.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { useUserContext } from './UserContext';

export type Props = {
  message: ChatMessage;
  onDelete(id: string): Promise<void>;
};

export const Message = ({ message, onDelete }: Props) => {
  const userId = useUserContext();

  const isMine = message.sender.userId === userId;
  const handleDelete = () => onDelete(message.id);

  return (
    <View style={[styles.root, isMine && styles.mine]}>
      {!isMine && <Text>{message.sender.userId}</Text>}
      <View style={styles.content}>
        <Text style={styles.textContent}>{message.content}</Text>
        <TouchableOpacity onPress={handleDelete}>
          <Text>Delete<Text/>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: 'silver',
    padding: 6,
    borderRadius: 10,
    marginHorizontal: 12,
    marginVertical: 5,
    marginRight: 50,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  textContent: {
    fontSize: 17,
    fontWeight: '500',
    flexShrink: 1,
  },
  mine: {
    flexDirection: 'row-reverse',
    backgroundColor: 'lightblue',
  },
});

JavaScript


// Message.jsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { useUserContext } from './UserContext';

export const Message = ({ message, onDelete }) => {
  const userId = useUserContext();

  const isMine = message.sender.userId === userId;
  const handleDelete = () => onDelete(message.id);

  return (
    <View style={[styles.root, isMine && styles.mine]}>
      {!isMine && <Text>{message.sender.userId}</Text>}
      <View style={styles.content}>
        <Text style={styles.textContent}>{message.content}</Text>
        <TouchableOpacity onPress={handleDelete}>
          <Text>Delete<Text/>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: 'silver',
    padding: 6,
    borderRadius: 10,
    marginHorizontal: 12,
    marginVertical: 5,
    marginRight: 50,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  textContent: {
    fontSize: 17,
    fontWeight: '500',
    flexShrink: 1,
  },
  mine: {
    flexDirection: 'row-reverse',
    backgroundColor: 'lightblue',
  },
});

次に、FlatList コンポーネントに加えられた最新の変更を反映するように renderItem を更新します。

App の中で handleDeleteMessage という名前の関数を定義し、それを MessageList onDelete プロパティに渡します。

DeleteMessageRequest のインスタンスを新しく作成して、関連するメッセージ ID をコンストラクタのパラメータに渡し、リクエストを用意します。用意したリクエストを受け入れるために deleteMessage を呼び出します。

次に、messages の状態を更新し、削除済みメッセージが消去された新しいメッセージリストを反映させます。

useEffect フックでは messageDelete イベントを監視し、message パラメーターと一致する ID を持つメッセージを削除して、messages 状態配列を更新します。

注: messageDelete イベントは、現在のユーザー、またはチャットルーム内の他のユーザーによってメッセージが削除された場合に発生します。これを、deleteMessage リクエストの後ではなくイベントハンドラーで処理することで、メッセージ削除の処理をまとめることができます。

TypeScript/JavaScript:


// App.tsx / App.jsx

// ...

const unsubscribeOnMessageDeleted = room.addListener('messageDelete', (deleteMessageEvent) => {
  setMessages((prev) => prev.filter((message) => message.id !== deleteMessageEvent.id));
});

return () => {
  // ...

  unsubscribeOnMessageDeleted();
};

// ...

この段階で、チャットアプリのチャットルームからユーザーを削除することが可能になりました。

次のステップ

実験として、他のユーザーの接続切断など追加のアクションも、ルームに実装してみてください。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

React Native チュートリアルのパート 1: Chat Rooms (チャットルーム)

React と React Native のベストプラクティス