IVS 聊天用戶端傳訊 SDK：React Native 教學課程第 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 接聽程式函數中，將 message 附加至 messages 陣列：

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、使用者名稱，以及傳送訊息時的時間戳記。

辨識目前使用者所傳送的訊息

為了辨識目前使用者傳送的訊息，我們修改程式碼並建立 React 內容來儲存目前使用者的 userId。

在 src 目錄中建立新檔案，並將其命名為 UserContext：

注意：此處我們使用 useState 勾點來儲存 userId 值。日後，您可以使用 setUserId 來變更使用者關聯內容或實現登入目的。

接下來，使用先前建立的內容來替換傳遞給 tokenProvider 的第一個參數中的 userId。請務必將 SEND_MESSAGE 功能新增至字符提供者 (如下所述)；需要此功能以傳送訊息：

在您的 Message 元件中，使用之前建立的 UserContext，宣告 isMine 變數，比對寄件者的 userId 與來自內容的 userId，並為目前使用者套用不同樣式的訊息。

呈現聊天訊息清單

接著，請使用 FlatList 和 Message 元件列出訊息：

所有拼圖現在都已準備就緒，您的 App 可以開始呈現聊天室收到的訊息。繼續進行以下操作，了解如何利用您建立的元件在聊天室中執行動作。

在聊天室中執行動作

傳送訊息和執行仲裁者動作，是您與聊天室互動的一些主要方式。在此處，您將了解如何使用各種聊天請求物件在 Chatterbox 中執行常用動作，例如傳送訊息、刪除訊息以及中斷其他使用者的連線。

聊天室中的所有動作都遵循一個常見的模式：對於您在聊天室中執行的每個動作，都有一個對應的請求物件。對於每個請求，您在請求確認時都會收到一個對應的回應物件。

只要您的使用者在建立聊天字符時被授予正確的功能，他們就可以使用請求物件成功執行對應的操作，從而查看您可以在聊天室中執行哪些請求。

下面我們將說明如何傳送訊息和刪除訊息。

傳送訊息

SendMessageRequest 類別允許在聊天室中傳送訊息。在此處，您會使用自己在建立訊息輸入 (在本教學課程的第 1 部分) 中建立的元件來修改 App，以便傳送訊息請求。

若要開始，請使用 useState 勾點定義一個名為 isSending 的新布林屬性。使用此新屬性，透過 isSendDisabled 常數來切換 button 元素的停用狀態。在您的 SendButton 事件處理常式中，清除 messageToSend 的值，並將 isSending 設定為 true。

由於您將從此按鈕進行 API 呼叫，新增 isSending 布林值可協助防止同時發生多個 API 呼叫，方法為在請求完成之前停用 SendButton 上的使用者互動。

注意：您必須將 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 函數的第二個參數。)

注意：這是您的 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 以顯示刪除按鈕。

定義一個名為 onDelete 的新函數，該函數接受字串作為其參數之一並傳回 Promise。若為字串參數，則傳入您的元件訊息 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',
  },
});

接下來，您將更新 renderItem 以反映 FlatList 元件的最新變更。

在 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。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

React Native 教學課程第 1 部分：聊天室

React 和 React Native 最佳實務