# IVS 聊天功能客户端消息收发 SDK：React Native 教程第 2 部分：消息和事件
<a name="chat-sdk-react-tutorial-messages-events"></a>

本教程的第 2 部分（也是最后一部分）分为几个章节：

1. [订阅聊天消息事件](#chat-react-messages-events-subscribe)

1. [显示收到的消息](#chat-react-messages-events-show)

   1.  [创建消息组件](#chat-react-messages-create-component)

   1. [识别当前用户发送的消息](#chat-react-messages-recognize)

   1. [呈现聊天消息列表](#chat-react-messages-render-list)

1. [在聊天室中执行操作](#chat-react-messages-events-room-actions)

   1. [发送消息](#chat-react-room-actions-sending-message)

   1. [删除消息](#chat-react-room-actions-deleting-message)

1. [后续步骤](#chat-react-messages-events-next-steps)

**注意**：在某些情况下，JavaScript 和 TypeScript 的代码示例是相同的，因此我们将它们合并在一起。

## 先决条件
<a name="chat-react-messages-events-prerequisite"></a>

确保您已完成本教程的第 1 部分[聊天室](chat-sdk-react-tutorial-chat-rooms.md)。

## 订阅聊天消息事件
<a name="chat-react-messages-events-subscribe"></a>

当聊天室中发生事件时，`ChatRoom` 实例使用事件进行通信。要开始实现聊天体验，您需要向用户显示其他用户在他们连接的聊天室中发送消息的时间。

在这里，您订阅了聊天消息事件。稍后，我们将向您展示如何更新您创建的消息列表，该列表将随着每条消息/事件而更新。

在您的 `App` 中，请在 `useEffect` 钩子内订阅所有消息事件：

**TypeScript/JavaScript**：

```
// App.tsx / App.jsx

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

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

## 显示收到的消息
<a name="chat-react-messages-events-show"></a>

接收消息是聊天体验的核心部分。通过使用 Chat JS SDK，您可以对代码进行设置，以轻松接收来自连接到聊天室的其他用户的事件。

稍后，我们将向您展示如何利用您在此处创建的组件在聊天室中执行操作。

在您的 `App` 中，使用名为 `messages` 的 `ChatMessage` 数组类型定义名为 `messages` 的状态：

------
#### [ TypeScript ]

```
// App.tsx

// ...

import { ChatRoom, ChatMessage, ConnectionState } from 'amazon-ivs-chat-messaging';

export default function App() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);

  //...
}
```

------
#### [ JavaScript ]

```
// App.jsx

// ...

import { ChatRoom, ConnectionState } from 'amazon-ivs-chat-messaging';

export default function App() {
  const [messages, setMessages] = useState([]);

  //...
}
```

------

接下来，在 `message` 侦听器函数中，将 `message` 附加到 `messages` 数组中：

**TypeScript/JavaScript**：

```
// App.tsx / App.jsx

// ...

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

// ...
```

下面我们逐步完成显示收到的消息的任务：

1.  [创建消息组件](#chat-react-messages-create-component)

1. [识别当前用户发送的消息](#chat-react-messages-recognize)

1. [呈现聊天消息列表](#chat-react-messages-render-list)

### 创建消息组件
<a name="chat-react-messages-create-component"></a>

`Message` 组件负责呈现您的聊天室收到的消息内容。在本节中，您将创建一个消息组件，用于在 `App` 中呈现单个聊天消息。

在 `src` 目录中创建一个新文件并将其命名为 `Message`。传入该组件的 `ChatMessage` 类型，然后从 `ChatMessage` 属性中传递 `content` 字符串，以显示从聊天室消息侦听器收到的消息文本。在项目导航器中，转到 `Message`。

------
#### [ TypeScript ]

```
// Message.tsx

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

type Props = {
  message: ChatMessage;
}

export const Message = ({ message }: Props) => {
  return (
    <View style={styles.root}>
      <Text>{message.sender.userId}</Text>
      <Text style={styles.textContent}>{message.content}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: 'silver',
    padding: 6,
    borderRadius: 10,
    marginHorizontal: 12,
    marginVertical: 5,
    marginRight: 50,
  },
  textContent: {
    fontSize: 17,
    fontWeight: '500',
    flexShrink: 1,
  },
});
```

------
#### [ JavaScript ]

```
// Message.jsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export const Message = ({ message }) => {
  return (
    <View style={styles.root}>
      <Text>{message.sender.userId}</Text>
      <Text style={styles.textContent}>{message.content}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    backgroundColor: 'silver',
    padding: 6,
    borderRadius: 10,
    marginHorizontal: 12,
    marginVertical: 5,
    marginRight: 50,
  },
  textContent: {
    fontSize: 17,
    fontWeight: '500',
    flexShrink: 1,
  },
});
```

------

**提示**：使用该组件存储您要在消息行中呈现的不同属性；例如，头像 URL、用户名和消息发送时的时间戳。

### 识别当前用户发送的消息
<a name="chat-react-messages-recognize"></a>

为了识别当前用户发送的消息，我们修改了代码并创建了 React 上下文来存储当前用户的 `userId`。

在 `src` 目录中创建一个新文件并将其命名为 `UserContext`：

------
#### [ TypeScript ]

```
// UserContext.tsx

import React from 'react';

const UserContext = React.createContext<string | undefined>(undefined);

export const useUserContext = () => {
  const context = React.useContext(UserContext);

  if (context === undefined) {
    throw new Error('useUserContext must be within UserProvider');
  }

  return context;
};

export const UserProvider = UserContext.Provider;
```

------
#### [ JavaScript ]

```
// UserContext.jsx

import React from 'react';

const UserContext = React.createContext(undefined);

export const useUserContext = () => {
  const context = React.useContext(UserContext);

  if (context === undefined) {
    throw new Error('useUserContext must be within UserProvider');
  }

  return context;
};

export const UserProvider = UserContext.Provider;
```

------

注意：这里我们使用了 `useState` 钩子来存储 `userId` 值。今后，您可以使用 `setUserId` 来更改用户上下文或用于登录目的。

然后使用之前创建的上下文替换传递给 `tokenProvider` 的第一个参数中的 `userId`。务必要按下文的规定，将 `SEND_MESSAGE` 功能添加到您的令牌提供者；发送消息将需要此功能：

------
#### [ TypeScript ]

```
// App.tsx

// ...

import { useUserContext } from './UserContext';

// ...


export default function App() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const userId = useUserContext();
  const [room] = useState(
    () =>
      new ChatRoom({
        regionOrUrl: process.env.REGION,
        tokenProvider: () => tokenProvider(userId, ['SEND_MESSAGE']),
      }),
  );

  // ...
}
```

------
#### [ JavaScript ]

```
// App.jsx

// ...

import { useUserContext } from './UserContext';

// ...


export default function App() {
  const [messages, setMessages] = useState([]);
  const userId = useUserContext();
  const [room] = useState(
    () =>
      new ChatRoom({
        regionOrUrl: process.env.REGION,
        tokenProvider: () => tokenProvider(userId, ['SEND_MESSAGE']),
      }),
  );

  // ...
}
```

------

在您的 `Message` 组件中，使用之前创建的 `UserContext`，声明 `isMine` 变量，将发件人的 `userId` 与上下文中的 `userId` 进行匹配，然后为当前用户应用不同样式的消息。

------
#### [ 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';

type Props = {
  message: ChatMessage;
}

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

  const isMine = message.sender.userId === userId;

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

const styles = StyleSheet.create({
  root: {
    backgroundColor: 'silver',
    padding: 6,
    borderRadius: 10,
    marginHorizontal: 12,
    marginVertical: 5,
    marginRight: 50,
  },
  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 }) => {
  const userId = useUserContext();

  const isMine = message.sender.userId === userId;

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

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

------

### 呈现聊天消息列表
<a name="chat-react-messages-render-list"></a>

现在使用 `FlatList` 和 `Message` 组件列出消息：

------
#### [ TypeScript ]

```
// App.tsx

// ...

const renderItem = useCallback<ListRenderItem<ChatMessage>>(({ item }) => {
  return (
    <Message key={item.id} message={item} />
  );
}, []);

return (
  <SafeAreaView style={styles.root}>
    <Text>Connection State: {connectionState}</Text>
    <FlatList inverted data={messages} renderItem={renderItem} />
    <View style={styles.messageBar}>
      <MessageInput value={messageToSend} onMessageChange={setMessageToSend} />
      <SendButton disabled={isSendDisabled} onPress={onMessageSend} />
    </View>
  </SafeAreaView>
);

// ...
```

------
#### [ JavaScript ]

```
// App.jsx

// ...

const renderItem = useCallback(({ item }) => {
  return (
    <Message key={item.id} message={item} />
  );
}, []);

return (
  <SafeAreaView style={styles.root}>
    <Text>Connection State: {connectionState}</Text>
    <FlatList inverted data={messages} renderItem={renderItem} />
    <View style={styles.messageBar}>
      <MessageInput value={messageToSend} onMessageChange={setMessageToSend} />
      <SendButton disabled={isSendDisabled} onPress={onMessageSend} />
    </View>
  </SafeAreaView>
);

// ...
```

------

所有部分都已准备就绪，您的 `App` 可以开始呈现聊天室收到的消息。继续阅读下文，了解如何在聊天室中利用您创建的组件执行操作。

## 在聊天室中执行操作
<a name="chat-react-messages-events-room-actions"></a>

发送消息和执行主持人操作是您与聊天室互动的一些主要方式。在这里，您将学习如何使用各种聊天请求对象在 Chatterbox 中执行常见操作，例如发送消息、删除消息和断开其他用户的连接。

聊天室中的所有操作都遵循一个通用模式：对于您在聊天室中执行的每个操作，都有一个相应的请求对象。对于每个请求，您在请求确认时都会收到相应的响应对象。

只要您在创建聊天令牌时向用户授予了正确的功能，他们就可以使用请求对象成功执行相应的操作，以查看您可以在聊天室中执行的请求。

下面，我们介绍如何[发送消息](#chat-react-room-actions-sending-message)和[删除消息](#chat-react-room-actions-deleting-message)。

### 发送消息
<a name="chat-react-room-actions-sending-message"></a>

`SendMessageRequest` 类允许在聊天室中发送消息。在这里，您可以修改您的 `App`，以使用您在[创建消息输入](chat-sdk-react-tutorial-chat-rooms.md#chat-react-rooms-message-input)（在本教程的第 1 部分）中创建的组件发送消息请求。

首先，使用 `useState` 钩子定义一个名为 `isSending` 的新布尔属性。借助这一新属性可使用 `isSendDisabled` 常量切换 `button` 元素的禁用状态。在 `SendButton` 的事件处理程序中，清除 `messageToSend` 的值并将 `isSending` 设置为 true。

*由于您将通过此按钮进行 API 调用，因此添加 `isSending` 布尔值有助于防止同时发生多个 API 调用，方法是在请求完成之前禁用 `SendButton` 上的用户交互。*

注意：只有当您向令牌提供者添加了该 `SEND_MESSAGE` 功能时，发送消息才能正常工作，详见上文 [识别当前用户发送的消息](#chat-react-messages-recognize)。

**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` 中呈现。

### 删除消息
<a name="chat-react-room-actions-deleting-message"></a>

要从聊天室删除消息，您需要具有适当的权限。权限是在聊天令牌（向聊天室进行身份验证时需要使用该令牌）的初始化期间授予的。就本节而言，[设置本地身份验证/授权服务器](chat-sdk-react-tutorial-chat-rooms.md#chat-react-rooms-auth-server)（在本教程的第 1 部分）中的 `ServerApp` 允许您指定主持人权限。这是在您的应用程序中使用您在[构建令牌提供程序](chat-sdk-react-tutorial-chat-rooms.md#chat-react-rooms-token-provider)（也在第 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` 属性：

------
#### [ TypeScript ]

```
// App.tsx

// ...

const handleDeleteMessage = async (id: string) => {};

const renderItem = useCallback<ListRenderItem<ChatMessage>>(({ item }) => {
  return (
    <Message key={item.id} message={item} onDelete={handleDeleteMessage} />
  );
}, [handleDeleteMessage]);

// ...
```

------
#### [ JavaScript ]

```
// App.jsx

// ...

const handleDeleteMessage = async (id) => {};

const renderItem = useCallback(({ item }) => {
  return (
    <Message key={item.id} message={item} onDelete={handleDeleteMessage} />
  );
}, [handleDeleteMessage]);

// ...
```

------

通过创建一个新的 `DeleteMessageRequest` 实例并将相关的消息 ID 传递给构造函数参数来准备请求，然后调用接受上述准备好的请求的 `deleteMessage`：

------
#### [ TypeScript ]

```
// App.tsx

// ...

const handleDeleteMessage = async (id: string) => {
  const request = new DeleteMessageRequest(id);
  await room.deleteMessage(request);
};

// ...
```

------
#### [ JavaScript ]

```
// App.jsx

// ...

const handleDeleteMessage = async (id) => {
  const request = new DeleteMessageRequest(id);
  await room.deleteMessage(request);
};

// ...
```

------

接下来，更新 `messages` 状态以反映新的消息列表，该列表忽略了您刚刚删除的消息。

在 `useEffect` 钩子中，侦听 `messageDelete` 事件，并通过删除 ID 与 `message` 参数相匹配的消息来更新 `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();
};

// ...
```

现在，您可以从聊天应用程序的聊天室中删除用户。

## 后续步骤
<a name="chat-react-messages-events-next-steps"></a>

作为实验，尝试在聊天室中执行其他操作，例如断开其他用户的连接。