` 标签之间的所有内容。不需要任何预填充的代码。此时，我们的 `App` 还很空。
```
// App.jsx / App.tsx
import * as React from 'react';
export default function App() {
return
Hello!
;
}
```
创建一个新的 `ChatRoom` 实例并使用 `useState` 钩子将其传递给状态。该实例需要传递 `regionOrUrl`（托管聊天室的亚马逊云科技区域）和 `tokenProvider`（用于后续步骤中创建的后端身份验证/授权流程）。
**重要提示**：您必须使用与您在 [Amazon IVS Chat 入门](getting-started-chat-create-room.md)中创建聊天室的区域相同的亚马逊云科技区域。该 API 是一项亚马逊云科技区域服务。有关支持的区域和 Amazon IVS Chat HTTPS 服务终端节点的列表，请参阅 [Amazon IVS Chat 区域](https://docs.aws.amazon.com/general/latest/gr/ivs.html#ivs_region)页面。
```
// App.jsx / App.tsx
import React, { useState } from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
export default function App() {
const [room] = useState(() =>
new ChatRoom({
regionOrUrl: process.env.REGION as string,
tokenProvider: () => {},
}),
);
return
Hello!
;
}
```
## 构建令牌提供程序
下一步，我们需要构建 `ChatRoom` 构造函数所需的无参数 `tokenProvider` 函数。首先，我们将创建一个 `fetchChatToken` 函数，该函数将向您在 [设置本地身份验证/授权服务器](#chat-js-rooms-auth-server) 中设置的后端应用程序发出 POST 请求。聊天令牌包含该 SDK 成功建立聊天室连接所需的信息。Chat API 使用这些令牌作为验证用户身份、聊天室中的功能和会话持续时间的安全方式。
在项目导航器中，创建一个名为 `fetchChatToken` 的新 TypeScript/JavaScript 文件。构建对 `backend` 应用程序的提取请求，并从响应中返回 `ChatToken` 对象。添加创建聊天令牌所需的请求正文属性。使用为 [Amazon 资源名称 (ARN)](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference-arns.html) 定义的规则。这些属性记录在 [CreateChatToken](https://docs.aws.amazon.com//ivs/latest/ChatAPIReference/API_CreateChatToken.html#API_CreateChatToken_RequestBody) 操作中。
**注意**：您在此处使用的 URL 与运行后端应用程序时本地服务器创建的 URL 相同。
------
#### [ TypeScript ]
```
// fetchChatToken.ts
import { ChatToken } from 'amazon-ivs-chat-messaging';
type UserCapability = 'DELETE_MESSAGE' | 'DISCONNECT_USER' | 'SEND_MESSAGE';
export async function fetchChatToken(
userId: string,
capabilities: UserCapability[] = [],
attributes?: Record
,
sessionDurationInMinutes?: number,
): Promise {
const response = await fetch(`${process.env.BACKEND_BASE_URL}/create_chat_token`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userId,
roomIdentifier: process.env.ROOM_ID,
capabilities,
sessionDurationInMinutes,
attributes
}),
});
const token = await response.json();
return {
...token,
sessionExpirationTime: new Date(token.sessionExpirationTime),
tokenExpirationTime: new Date(token.tokenExpirationTime),
};
}
```
------
#### [ JavaScript ]
```
// fetchChatToken.js
export async function fetchChatToken(
userId,
capabilities = [],
attributes,
sessionDurationInMinutes) {
const response = await fetch(`${process.env.BACKEND_BASE_URL}/create_chat_token`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userId,
roomIdentifier: process.env.ROOM_ID,
capabilities,
sessionDurationInMinutes,
attributes
}),
});
const token = await response.json();
return {
...token,
sessionExpirationTime: new Date(token.sessionExpirationTime),
tokenExpirationTime: new Date(token.tokenExpirationTime),
};
}
```
------
## 观察连接更新
对聊天室连接状态的变化做出反应是制作聊天应用程序的重要组成部分。让我们从订阅相关事件开始：
```
// App.jsx / App.tsx
import React, { useState, useEffect } from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
import { fetchChatToken } from './fetchChatToken';
export default function App() {
const [room] = useState(
() =>
new ChatRoom({
regionOrUrl: process.env.REGION as string,
tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']),
}),
);
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {});
const unsubscribeOnConnected = room.addListener('connect', () => {});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {});
return () => {
// Clean up subscriptions.
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
return Hello!
;
}
```
接下来，我们需要提供读取连接状态的功能。我们使用 `useState` 钩子在 `App` 中创建一些本地状态，并在每个侦听器内设置连接状态。
------
#### [ TypeScript ]
```
// App.tsx
import React, { useState, useEffect } from 'react';
import { ChatRoom, ConnectionState } from 'amazon-ivs-chat-messaging';
import { fetchChatToken } from './fetchChatToken';
export default function App() {
const [room] = useState(
() =>
new ChatRoom({
regionOrUrl: process.env.REGION as string,
tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']),
}),
);
const [connectionState, setConnectionState] = useState('disconnected');
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setConnectionState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setConnectionState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setConnectionState('disconnected');
});
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
return Hello!
;
}
```
------
#### [ JavaScript ]
```
// App.jsx
import React, { useState, useEffect } from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
import { fetchChatToken } from './fetchChatToken';
export default function App() {
const [room] = useState(
() =>
new ChatRoom({
regionOrUrl: process.env.REGION,
tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']),
}),
);
const [connectionState, setConnectionState] = useState('disconnected');
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setConnectionState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setConnectionState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setConnectionState('disconnected');
});
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
return Hello!
;
}
```
------
订阅连接状态后，显示连接状态并使用 `useEffect` 钩子内的 `room.connect` 方法连接到聊天室：
```
// App.jsx / App.tsx
// ...
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setConnectionState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setConnectionState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setConnectionState('disconnected');
});
room.connect();
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
// ...
return (
Connection State: {connectionState}
);
// ...
```
您已成功实现聊天室连接。
## 创建发送按钮组件
在本节中，您将创建一个发送按钮，该按钮针对每种连接状态都有不同的设计。该发送按钮有助于在聊天室中发送消息。它还可以直观地指示是否/何时可以发送消息；例如，在连接断开或聊天会话过期的情况下。
首先，在 Chatterbox 项目的 `src` 目录中创建一个新文件并将其命名为 `SendButton`。然后，创建一个组件，该组件将显示聊天应用程序的按钮。导出您的 `SendButton` 并将其导入 `App`。在空的 `` 中，添加 ``。
------
#### [ TypeScript ]
```
// SendButton.tsx
import React from 'react';
interface Props {
onPress?: () => void;
disabled?: boolean;
}
export const SendButton = ({ onPress, disabled }: Props) => {
return (
);
};
// App.tsx
import { SendButton } from './SendButton';
// ...
return (
Connection State: {connectionState}
);
```
------
#### [ JavaScript ]
```
// SendButton.jsx
import React from 'react';
export const SendButton = ({ onPress, disabled }) => {
return (
);
};
// App.jsx
import { SendButton } from './SendButton';
// ...
return (
Connection State: {connectionState}
);
```
------
接下来，在 `App` 中定义一个名为 `onMessageSend` 的函数，并将其传递给 `SendButton onPress` 属性。定义另一个名为 `isSendDisabled` 的变量（该变量可防止在未连接聊天室时发送消息），并将其传递给 `SendButton disabled` 属性。
```
// App.jsx / App.tsx
// ...
const onMessageSend = () => {};
const isSendDisabled = connectionState !== 'connected';
return (
Connection State: {connectionState}
);
// ...
```
## 创建消息输入
Chatterbox 消息栏是您将与之交互以向聊天室发送消息的组件。通常，它包含用于编写消息的文本输入和用于发送消息的按钮。
要创建 `MessageInput` 组件，首先在 `src` 目录中创建一个新文件并将其命名为 `MessageInput`。然后，创建一个受控输入组件，该组件将显示聊天应用程序的输入。导出您的 `MessageInput` 并将其导入 `App`（在 `` 上方）。
使用 `useState` 钩子创建一个名为 `messageToSend` 的新状态，其默认值为空字符串。在应用程序正文中，将 `messageToSend` 传递给 `MessageInput` 的 `value`，并将 `setMessageToSend` 传递给 `onMessageChange` 属性：
------
#### [ TypeScript ]
```
// MessageInput.tsx
import * as React from 'react';
interface Props {
value?: string;
onValueChange?: (value: string) => void;
}
export const MessageInput = ({ value, onValueChange }: Props) => {
return (
onValueChange?.(e.target.value)} placeholder="Send a message" />
);
};
// App.tsx
// ...
import { MessageInput } from './MessageInput';
// ...
export default function App() {
const [messageToSend, setMessageToSend] = useState('');
// ...
return (
Connection State: {connectionState}
);
```
------
#### [ JavaScript ]
```
// MessageInput.jsx
import * as React from 'react';
export const MessageInput = ({ value, onValueChange }) => {
return (
onValueChange?.(e.target.value)} placeholder="Send a message" />
);
};
// App.jsx
// ...
import { MessageInput } from './MessageInput';
// ...
export default function App() {
const [messageToSend, setMessageToSend] = useState('');
// ...
return (
Connection State: {connectionState}
);
```
------
## 后续步骤
现在，您已经为 Chatterbox 构建了一个消息栏，请继续阅读本 JavaScript 教程的第 2 部分[消息和事件](chat-sdk-js-tutorial-messages-events.md)。
# IVS 聊天功能客户端消息收发 SDK：JavaScript 教程第 2 部分：消息和事件
本教程的第 2 部分（也是最后一部分）分为几个章节：
1. [订阅聊天消息事件](#chat-js-messages-events-subscribe)
1. [显示收到的消息](#chat-js-messages-events-show)
1. [创建消息组件](#chat-js-messages-create-component)
1. [识别当前用户发送的消息](#chat-js-messages-recognize)
1. [创建消息列表组件](#chat-js-messages-create-list-component)
1. [呈现聊天消息列表](#chat-js-messages-render-list)
1. [在聊天室中执行操作](#chat-js-messages-events-room-actions)
1. [发送消息](#chat-js-room-actions-sending-message)
1. [删除消息](#chat-js-room-actions-deleting-message)
1. [后续步骤](#chat-js-messages-events-next-steps)
**注意**：在某些情况下，JavaScript 和 TypeScript 的代码示例是相同的，因此我们将它们合并在一起。
要学习完整的 SDK 文档，请从[亚马逊 IVS 聊天功能客户端消息收发 SDK](chat-sdk.md)（在《Amazon IVS 聊天功能用户指南**》中）和 [Chat Client Messaging: SDK for JavaScript Reference](https://aws.github.io/amazon-ivs-chat-messaging-sdk-js/latest/)（在 GitHub 上）开始。
## 先决条件
确保您已完成本教程的第 1 部分[聊天室](chat-sdk-js-tutorial-chat-rooms.md)。
## 订阅聊天消息事件
当聊天室中发生事件时，`ChatRoom` 实例使用事件进行通信。要开始实现聊天体验，您需要向用户显示其他用户在他们连接的聊天室中发送消息的时间。
在这里，您订阅了聊天消息事件。稍后，我们将向您展示如何更新您创建的消息列表，该列表将随着每条消息/事件而更新。
在您的 `App` 中，请在 `useEffect` 钩子内订阅所有消息事件：
```
// App.tsx / App.jsx
useEffect(() => {
// ...
const unsubscribeOnMessageReceived = room.addListener('message', (message) => {});
return () => {
// ...
unsubscribeOnMessageReceived();
};
}, []);
```
## 显示收到的消息
接收消息是聊天体验的核心部分。通过使用 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([]);
//...
}
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
export default function App() {
const [messages, setMessages] = useState([]);
//...
}
```
------
接下来，在 `message` 侦听器函数中，将 `message` 附加到 `messages` 数组中：
```
// App.jsx / App.tsx
// ...
const unsubscribeOnMessageReceived = room.addListener('message', (message) => {
setMessages((msgs) => [...msgs, message]);
});
// ...
```
下面我们逐步完成显示收到的消息的任务：
1. [创建消息组件](#chat-js-messages-create-component)
1. [识别当前用户发送的消息](#chat-js-messages-recognize)
1. [创建消息列表组件](#chat-js-messages-create-list-component)
1. [呈现聊天消息列表](#chat-js-messages-render-list)
### 创建消息组件
`Message` 组件负责呈现您的聊天室收到的消息内容。在本节中，您将创建一个消息组件，用于在 `App` 中呈现单个聊天消息。
在 `src` 目录中创建一个新文件并将其命名为 `Message`。传入该组件的 `ChatMessage` 类型，然后从 `ChatMessage` 属性中传递 `content` 字符串，以显示从聊天室消息侦听器收到的消息文本。在项目导航器中，转到 `Message`。
------
#### [ TypeScript ]
```
// Message.tsx
import * as React from 'react';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
type Props = {
message: ChatMessage;
}
export const Message = ({ message }: Props) => {
return (
);
};
```
------
#### [ JavaScript ]
```
// Message.jsx
import * as React from 'react';
export const Message = ({ message }) => {
return (
);
};
```
------
提示：使用该组件存储您要在消息行中呈现的不同属性；例如，头像 URL、用户名和消息发送时的时间戳。
### 识别当前用户发送的消息
为了识别当前用户发送的消息，我们修改了代码并创建了 React 上下文来存储当前用户的 `userId`。
在 `src` 目录中创建一个新文件并将其命名为 `UserContext`：
------
#### [ TypeScript ]
```
// UserContext.tsx
import React, { ReactNode, useState, useContext, createContext } from 'react';
type UserContextType = {
userId: string;
setUserId: (userId: string) => void;
};
const UserContext = createContext(undefined);
export const useUserContext = () => {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('useUserContext must be within UserProvider');
}
return context;
};
type UserProviderType = {
children: ReactNode;
}
export const UserProvider = ({ children }: UserProviderType) => {
const [userId, setUserId] = useState('Mike');
return {children};
};
```
------
#### [ JavaScript ]
```
// UserContext.jsx
import React, { useState, useContext, createContext } from 'react';
const UserContext = createContext(undefined);
export const useUserContext = () => {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('useUserContext must be within UserProvider');
}
return context;
};
export const UserProvider = ({ children }) => {
const [userId, setUserId] = useState('Mike');
return {children};
};
```
------
注意：这里我们使用了 `useState` 钩子来存储 `userId` 值。今后，您可以使用 `setUserId` 来更改用户上下文或用于登录目的。
接下来，使用之前创建的上下文替换传递给 `tokenProvider` 的第一个参数中的 `userId`：
```
// App.jsx / App.tsx
// ...
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 * as React from 'react';
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 (
);
};
```
------
#### [ JavaScript ]
```
// Message.jsx
import * as React from 'react';
import { useUserContext } from './UserContext';
export const Message = ({ message }) => {
const { userId } = useUserContext();
const isMine = message.sender.userId === userId;
return (
);
};
```
------
### 创建消息列表组件
`MessageList` 组件负责随时间显示聊天室的对话。`MessageList` 文件是存放所有消息的容器。`Message` 是 `MessageList` 中的一行。
在 `src` 目录中创建一个新文件并将其命名为 `MessageList`。使用类型为 `ChatMessage` 数组的 `messages` 定义 `Props`。在正文内，映射我们的 `messages` 属性并将 `Props` 传递给您的 `Message` 组件。
------
#### [ TypeScript ]
```
// MessageList.tsx
import React from 'react';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { Message } from './Message';
interface Props {
messages: ChatMessage[];
}
export const MessageList = ({ messages }: Props) => {
return (
{messages.map((message) => (
))}
);
};
```
------
#### [ JavaScript ]
```
// MessageList.jsx
import React from 'react';
import { Message } from './Message';
export const MessageList = ({ messages }) => {
return (
{messages.map((message) => (
))}
);
};
```
------
### 呈现聊天消息列表
现在，将新的 `MessageList` 导入您的主要 `App` 组件中：
```
// App.jsx / App.tsx
import { MessageList } from './MessageList';
// ...
return (
Connection State: {connectionState}
);
// ...
```
所有部分都已准备就绪，您的 `App` 可以开始呈现聊天室收到的消息。继续阅读下文，了解如何在聊天室中利用您创建的组件执行操作。
## 在聊天室中执行操作
在聊天室中发送消息和执行主持人操作是您与聊天室互动的一些主要方式。在这里，您将学习如何使用各种 `ChatRequest` 对象在 Chatterbox 中执行常见操作，例如发送消息、删除消息和断开其他用户的连接。
聊天室中的所有操作都遵循一个通用模式：对于您在聊天室中执行的每个操作，都有一个相应的请求对象。对于每个请求，您在请求确认时都会收到相应的响应对象。
只要在您创建聊天令牌时用户获得了正确的权限，他们就可以使用请求对象成功执行相应的操作，以查看您可以在聊天室中执行哪些请求。
下面，我们介绍如何[发送消息](#chat-js-room-actions-sending-message)和[删除消息](#chat-js-room-actions-deleting-message)。
### 发送消息
`SendMessageRequest` 类允许在聊天室中发送消息。在这里，您可以修改您的 `App`，以使用您在[创建消息输入](chat-sdk-js-tutorial-chat-rooms.md#chat-js-rooms-message-input)（在本教程的第 1 部分）中创建的组件发送消息请求。
首先，使用 `useState` 钩子定义一个名为 `isSending` 的新布尔属性。使用这个新属性通过 `isSendDisabled` 常量切换 `button` HTML 元素的禁用状态。在 `SendButton` 的事件处理程序中，清除 `messageToSend` 的值并将 `isSending` 设置为 true。
*由于您将通过此按钮进行 API 调用，因此添加 `isSending` 布尔值有助于防止同时发生多个 API 调用，方法是在请求完成之前禁用 `SendButton` 上的用户交互。*
```
// App.jsx / App.tsx
// ...
const [isSending, setIsSending] = useState(false);
// ...
const onMessageSend = () => {
setIsSending(true);
setMessageToSend('');
};
// ...
const isSendDisabled = connectionState !== 'connected' || isSending;
// ...
```
通过创建一个新的 `SendMessageRequest` 实例并将消息内容传递给构造函数来准备请求。设置 `isSending` 和 `messageToSend` 状态后，调用 `sendMessage` 方法，将该请求发送到聊天室。最后，在收到确认或拒绝该请求的响应后清除 `isSending` 标志。
------
#### [ TypeScript ]
```
// App.tsx
// ...
import { ChatMessage, 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);
}
};
// ...
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
import { ChatRoom, 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：尝试发送一条消息，方法是用 `MessageInput` 编写一条消息，然后点击 `SendButton`。您应该会看到您发送的消息在之前创建的 `MessageList` 中呈现。
### 删除消息
要从聊天室删除消息，您需要具有适当的权限。权限是在聊天令牌（向聊天室进行身份验证时需要使用该令牌）的初始化期间授予的。就本节而言，[设置本地身份验证/授权服务器](chat-sdk-js-tutorial-chat-rooms.md#chat-js-rooms-auth-server)（在本教程的第 1 部分）中的 `ServerApp` 允许您指定主持人权限。这是在您的应用程序中使用您在[构建令牌提供程序](chat-sdk-js-tutorial-chat-rooms.md#chat-js-rooms-token-provider)（也在第 1 部分）中创建的 `tokenProvider` 对象完成的。
在这里，您可以通过添加删除消息的函数来修改您的 `Message`。
首先，打开 `App.tsx` 并添加 `DELETE_MESSAGE` 权限。（`capabilities` 是 `tokenProvider` 函数的第二个参数。）
注意：`ServerApp` 通过这种方式通知 IVS Chat API，与生成的聊天令牌相关联的用户可以删除聊天室中的消息。在实际情况中，您可能需要更复杂的后端逻辑来管理服务器应用程序基础架构中的用户权限。
------
#### [ TypeScript ]
```
// App.tsx
// ...
const [room] = useState( () =>
new ChatRoom({
regionOrUrl: process.env.REGION as string,
tokenProvider: () => tokenProvider(userId, ['SEND_MESSAGE', 'DELETE_MESSAGE']),
}),
);
// ...
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
const [room] = useState( () =>
new ChatRoom({
regionOrUrl: process.env.REGION,
tokenProvider: () => tokenProvider(userId, ['SEND_MESSAGE', 'DELETE_MESSAGE']),
}),
);
// ...
```
------
在接下来的步骤中，您将更新 `Message` 以显示删除按钮。
打开 `Message` 并使用初始值为 `false` 的 `useState` 钩子定义一个名为 `isDeleting` 的新布尔状态。使用此状态，将 `Button` 的内容更新为因 `isDeleting` 的当前状态而异。当 `isDeleting` 为 true 时禁用您的按钮；这样可以防止您尝试同时发出两个删除消息请求。
------
#### [ TypeScript ]
```
// Message.tsx
import React, { useState } from 'react';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { useUserContext } from './UserContext';
type Props = {
message: ChatMessage;
}
export const Message = ({ message }: Props) => {
const { userId } = useUserContext();
const [isDeleting, setIsDeleting] = useState(false);
const isMine = message.sender.userId === userId;
return (
);
};
```
------
#### [ JavaScript ]
```
// Message.jsx
import React from 'react';
import { useUserContext } from './UserContext';
export const Message = ({ message }) => {
const { userId } = useUserContext();
const [isDeleting, setIsDeleting] = useState(false);
return (
);
};
```
------
定义一个名为 `onDelete` 的新函数，该函数接受字符串作为其参数之一并返回 `Promise`。在 `Button` 操作闭包的正文中，使用 `setIsDeleting` 在调用 `onDelete` 之前和之后切换 `isDeleting` 布尔值。对于字符串参数，传入您的组件消息 ID。
------
#### [ TypeScript ]
```
// Message.tsx
import React, { useState } from 'react';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { useUserContext } from './UserContext';
export type Props = {
message: ChatMessage;
onDelete(id: string): Promise;
};
export const Message = ({ message onDelete }: Props) => {
const { userId } = useUserContext();
const [isDeleting, setIsDeleting] = useState(false);
const isMine = message.sender.userId === userId;
const handleDelete = async () => {
setIsDeleting(true);
try {
await onDelete(message.id);
} catch (e) {
console.log(e);
// handle chat error here...
} finally {
setIsDeleting(false);
}
};
return (
);
};
```
------
#### [ JavaScript ]
```
// Message.jsx
import React, { useState } from 'react';
import { useUserContext } from './UserContext';
export const Message = ({ message, onDelete }) => {
const { userId } = useUserContext();
const [isDeleting, setIsDeleting] = useState(false);
const isMine = message.sender.userId === userId;
const handleDelete = async () => {
setIsDeleting(true);
try {
await onDelete(message.id);
} catch (e) {
console.log(e);
// handle the exceptions here...
} finally {
setIsDeleting(false);
}
};
return (
);
};
```
------
接下来，更新 `MessageList` 以反映对 `Message` 组件的最新更改。
打开 `MessageList` 并定义一个名为 `onDelete` 的新函数，该函数接受字符串作为参数并返回 `Promise`。更新您的 `Message` 并将其传递给 `Message` 的属性。新闭包中的字符串参数将是您要删除的消息的 ID，该消息是从您的 `Message` 中传递的。
------
#### [ TypeScript ]
```
// MessageList.tsx
import * as React from 'react';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { Message } from './Message';
interface Props {
messages: ChatMessage[];
onDelete(id: string): Promise;
}
export const MessageList = ({ messages, onDelete }: Props) => {
return (
<>
{messages.map((message) => (
))}
);
};
```
------
#### [ JavaScript ]
```
// MessageList.jsx
import * as React from 'react';
import { Message } from './Message';
export const MessageList = ({ messages, onDelete }) => {
return (
<>
{messages.map((message) => (
))}
);
};
```
------
接下来，更新 `App` 以反映对 `MessageList` 的最新更改。
在 `App` 中，定义一个名为 `onDeleteMessage` 的函数，并将其传递给 `MessageList onDelete` 属性：
------
#### [ TypeScript ]
```
// App.tsx
// ...
const onDeleteMessage = async (id: string) => {};
return (
Connection State: {connectionState}
);
// ...
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
const onDeleteMessage = async (id) => {};
return (
Connection State: {connectionState}
);
// ...
```
------
通过创建一个新的 `DeleteMessageRequest` 实例并将相关的消息 ID 传递给构造函数参数来准备请求，然后调用接受上述准备好的请求的 `deleteMessage`：
------
#### [ TypeScript ]
```
// App.tsx
// ...
const onDeleteMessage = async (id: string) => {
const request = new DeleteMessageRequest(id);
await room.deleteMessage(request);
};
// ...
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
const onDeleteMessage = async (id) => {
const request = new DeleteMessageRequest(id);
await room.deleteMessage(request);
};
// ...
```
------
接下来，更新 `messages` 状态以反映新的消息列表，该列表忽略了您刚刚删除的消息。
在 `useEffect` 钩子中，侦听 `messageDelete` 事件，并通过删除 ID 与 `message` 参数相匹配的消息来更新 `messages` 状态数组。
注意：当消息被当前用户或聊天室中的任何其他用户删除时，可能会引发 `messageDelete` 事件。如果在事件处理程序中（而不是 `deleteMessage` 请求旁边）处理该事件，您可以统一处理删除消息。
```
// App.jsx / App.tsx
// ...
const unsubscribeOnMessageDeleted = room.addListener('messageDelete', (deleteMessageEvent) => {
setMessages((prev) => prev.filter((message) => message.id !== deleteMessageEvent.id));
});
return () => {
// ...
unsubscribeOnMessageDeleted();
};
// ...
```
现在，您可以从聊天应用程序的聊天室中删除用户。
## 后续步骤
作为实验，尝试在聊天室中执行其他操作，例如断开其他用户的连接。
# IVS 聊天功能客户端消息收发 SDK：React Native 教程第 1 部分：聊天室
这是一个由两部分组成的教程的第 1 部分。您将通过使用 React Native 构建功能齐全的应用程序，了解使用 Amazon IVS 聊天功能客户端消息收发 JavaScript SDK 的基本知识。我们把这个应用程序称为 *Chatterbox*。
目标受众是刚接触 Amazon IVS Chat 消息收发 SDK 的经验丰富的开发人员。您需要熟悉 TypeScript 或 JavaScript 编程语言以及 React Native 库。
为简洁起见，我们将 Amazon IVS Chat 客户端消息收发 JavaScript SDK 称为 Chat JS SDK。
**注意**：在某些情况下，JavaScript 和 TypeScript 的代码示例是相同的，因此我们将它们合并在一起。
本教程的第 1 部分分为几个章节：
1. [设置本地身份验证/授权服务器](#chat-react-rooms-auth-server)
1. [创建 Chatterbox 项目](#chat-react-rooms-chatterbox)
1. [连接到聊天室](#chat-react-rooms-connect)
1. [构建令牌提供程序](#chat-react-rooms-token-provider)
1. [观察连接更新](#chat-react-rooms-connection-state)
1. [创建发送按钮组件](#chat-react-rooms-send-button)
1. [创建消息输入](#chat-react-rooms-message-input)
1. [后续步骤](#chat-react-rooms-next-steps)
## 先决条件
+ 熟悉 TypeScript 或 JavaScript 以及 React Native 库。如果您不熟悉 React Native，请访问 [Intro to React Native](https://reactnative.dev/docs/tutorial)（React Native 简介）学习基础知识。
+ 阅读并理解 [Amazon IVS Chat 入门](getting-started-chat.md)。
+ 使用现有的 IAM policy 中定义的 CreateChatToken 和 CreateRoom 功能创建 AWS IAM 用户。（请参见 [Amazon IVS Chat 入门](getting-started-chat.md)。）
+ 确保该用户的私有密钥/访问密钥存储在 Amazon 凭证文件中。有关说明，请参阅 [Amazon CLI 用户指南](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)（尤其是[配置和凭证文件设置](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html)部分）。
+ 创建聊天室并保存其 ARN。请参阅[Amazon IVS Chat 入门](getting-started-chat.md)。（如果不保存 ARN，您可以稍后使用控制台或 Chat API 查找 ARN。）
+ 使用 NPM 或 Yarn 程序包管理器安装 Node.js 14\$1 环境。
## 设置本地身份验证/授权服务器
您的后端应用程序负责创建聊天室和生成 Chat JS SDK 所需的聊天令牌，以便在您的客户端连接聊天室时进行身份验证和授权。您必须使用自己的后端，因为您无法在移动应用程序中安全地存储 Amazon 密钥；老练的攻击者可以提取这些密钥并获得对您的 Amazon 账户的访问权限。
请参阅*《Amazon IVS Chat 入门》*中的[创建聊天令牌](getting-started-chat-auth.md)。如其中的流程图所示，您的服务器端应用程序负责创建聊天令牌。这意味着您的应用程序必须通过向服务器端应用程序请求聊天令牌，来提供自己生成聊天令牌的方法。
在本节中，您将学习在后端创建令牌提供程序的基础知识。我们使用 Express 框架创建一个实时本地服务器，该服务器使用您的本地 Amazon 环境管理聊天令牌的创建。
使用 NPM 创建一个空的 `npm` 项目。创建一个用于存放应用程序的目录，并将其设为您的工作目录：
```
$ mkdir backend & cd backend
```
使用 `npm init` 为您的应用程序创建 `package.json` 文件：
```
$ npm init
```
此命令会提示您某些信息，包括您的应用程序的名称和版本。现在，只需按下 **RETURN** 即可接受其中大多数的默认值，但以下情况除外：
```
entry point: (index.js)
```
按下 **RETURN** 接受建议的默认文件名 `index.js`，或者输入任何您想要的主文件名。
现在安装所需的依赖项：
```
$ npm install express aws-sdk cors dotenv
```
`aws-sdk` 需要配置环境变量，这些变量会自动从根目录中名为 `.env` 的文件加载。要对其进行配置，请创建一个名为 `.env` 的新文件并填写缺少的配置信息：
```
# .env
# The region to send service requests to.
AWS_REGION=us-west-2
# Access keys use an access key ID and secret access key
# that you use to sign programmatic requests to AWS.
# AWS access key ID.
AWS_ACCESS_KEY_ID=...
# AWS secret access key.
AWS_SECRET_ACCESS_KEY=...
```
现在，我们在根目录中创建一个入口点文件，其名称与您在上面的 `npm init` 命令中输入的名称相同。在本例中，我们使用 `index.js` 并导入所有必需的程序包：
```
// index.js
import express from 'express';
import AWS from 'aws-sdk';
import 'dotenv/config';
import cors from 'cors';
```
现在创建一个新的 `express` 实例：
```
const app = express();
const port = 3000;
app.use(express.json());
app.use(cors({ origin: ['http://127.0.0.1:5173'] }));
```
之后，您可以为令牌提供程序创建您的第一个端点 POST 方法。从请求正文中获取所需的参数（`roomId`、`userId`、`capabilities` 和 `sessionDurationInMinutes`）：
```
app.post('/create_chat_token', (req, res) => {
const { roomIdentifier, userId, capabilities, sessionDurationInMinutes } = req.body || {};
});
```
添加必填字段的验证：
```
app.post('/create_chat_token', (req, res) => {
const { roomIdentifier, userId, capabilities, sessionDurationInMinutes } = req.body || {};
if (!roomIdentifier || !userId) {
res.status(400).json({ error: 'Missing parameters: `roomIdentifier`, `userId`' });
return;
}
});
```
准备好 POST 方法后，我们将 `createChatToken` 与 `aws-sdk` 进行集成，以实现身份验证/授权的核心功能：
```
app.post('/create_chat_token', (req, res) => {
const { roomIdentifier, userId, capabilities, sessionDurationInMinutes } = req.body || {};
if (!roomIdentifier || !userId || !capabilities) {
res.status(400).json({ error: 'Missing parameters: `roomIdentifier`, `userId`, `capabilities`' });
return;
}
ivsChat.createChatToken({ roomIdentifier, userId, capabilities, sessionDurationInMinutes }, (error, data) => {
if (error) {
console.log(error);
res.status(500).send(error.code);
} else if (data.token) {
const { token, sessionExpirationTime, tokenExpirationTime } = data;
console.log(`Retrieved Chat Token: ${JSON.stringify(data, null, 2)}`);
res.json({ token, sessionExpirationTime, tokenExpirationTime });
}
});
});
```
在文件末尾，为您的 `express` 应用程序添加一个端口侦听器：
```
app.listen(port, () => {
console.log(`Backend listening on port ${port}`);
});
```
现在，您可以从项目的根目录使用以下命令运行服务器：
```
$ node index.js
```
**提示**：此服务器在 https://localhost:3000 接受 URL 请求。
## 创建 Chatterbox 项目
首先创建名为 `chatterbox` 的 React Native 项目。运行以下命令：
```
npx create-expo-app
```
或者使用 TypeScript 模板创建一个 expo 项目。
```
npx create-expo-app -t expo-template-blank-typescript
```
您可以通过[节点程序包管理器](https://www.npmjs.com/)或 [Yarn 程序包管理器](https://yarnpkg.com/)集成 Chat 客户端消息收发 JS SDK：
+ Npm：`npm install amazon-ivs-chat-messaging`
+ Yarn：`yarn add amazon-ivs-chat-messaging`
## 连接到聊天室
在这里，您可以创建 `ChatRoom` 并使用异步方法对其进行连接。`ChatRoom` 类负责管理您的用户与 Chat JS SDK 的连接。要成功连接到聊天室，您必须在 React 应用程序中提供一个 `ChatToken` 实例。
导航到在默认 `chatterbox` 项目中创建的 `App` 文件，并删除功能组件返回的所有内容。不需要任何预填充的代码。此时，我们的 `App` 还很空。
**TypeScript/JavaScript**：
```
// App.tsx / App.jsx
import * as React from 'react';
import { Text } from 'react-native';
export default function App() {
return Hello!;
}
```
创建一个新的 `ChatRoom` 实例并使用 `useState` 钩子将其传递给状态。该实例需要传递 `regionOrUrl`（托管聊天室的亚马逊云科技区域）和 `tokenProvider`（用于后续步骤中创建的后端身份验证/授权流程）。
**重要提示**：您必须使用与您在 [Amazon IVS Chat 入门](getting-started-chat-create-room.md)中创建聊天室的区域相同的亚马逊云科技区域。该 API 是一项亚马逊云科技区域服务。有关支持的区域和 Amazon IVS Chat HTTPS 服务终端节点的列表，请参阅 [Amazon IVS Chat 区域](https://docs.aws.amazon.com/general/latest/gr/ivs.html#ivs_region)页面。
**TypeScript/JavaScript**：
```
// App.jsx / App.tsx
import React, { useState } from 'react';
import { Text } from 'react-native';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
export default function App() {
const [room] = useState(() =>
new ChatRoom({
regionOrUrl: process.env.REGION,
tokenProvider: () => {},
}),
);
return Hello!;
}
```
## 构建令牌提供程序
下一步，我们需要构建 `ChatRoom` 构造函数所需的无参数 `tokenProvider` 函数。首先，我们将创建一个 `fetchChatToken` 函数，该函数将向您在 [设置本地身份验证/授权服务器](#chat-react-rooms-auth-server) 中设置的后端应用程序发出 POST 请求。聊天令牌包含该 SDK 成功建立聊天室连接所需的信息。Chat API 使用这些令牌作为验证用户身份、聊天室中的功能和会话持续时间的安全方式。
在项目导航器中，创建一个名为 `fetchChatToken` 的新 TypeScript/JavaScript 文件。构建对 `backend` 应用程序的提取请求，并从响应中返回 `ChatToken` 对象。添加创建聊天令牌所需的请求正文属性。使用为 [Amazon 资源名称 (ARN)](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference-arns.html) 定义的规则。这些属性记录在 [CreateChatToken](https://docs.aws.amazon.com//ivs/latest/ChatAPIReference/API_CreateChatToken.html#API_CreateChatToken_RequestBody) 操作中。
**注意**：您在此处使用的 URL 与运行后端应用程序时本地服务器创建的 URL 相同。
------
#### [ TypeScript ]
```
// fetchChatToken.ts
import { ChatToken } from 'amazon-ivs-chat-messaging';
type UserCapability = 'DELETE_MESSAGE' | 'DISCONNECT_USER' | 'SEND_MESSAGE';
export async function fetchChatToken(
userId: string,
capabilities: UserCapability[] = [],
attributes?: Record,
sessionDurationInMinutes?: number,
): Promise {
const response = await fetch(`${process.env.BACKEND_BASE_URL}/create_chat_token`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userId,
roomIdentifier: process.env.ROOM_ID,
capabilities,
sessionDurationInMinutes,
attributes
}),
});
const token = await response.json();
return {
...token,
sessionExpirationTime: new Date(token.sessionExpirationTime),
tokenExpirationTime: new Date(token.tokenExpirationTime),
};
}
```
------
#### [ JavaScript ]
```
// fetchChatToken.js
export async function fetchChatToken(
userId,
capabilities = [],
attributes,
sessionDurationInMinutes) {
const response = await fetch(`${process.env.BACKEND_BASE_URL}/create_chat_token`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userId,
roomIdentifier: process.env.ROOM_ID,
capabilities,
sessionDurationInMinutes,
attributes
}),
});
const token = await response.json();
return {
...token,
sessionExpirationTime: new Date(token.sessionExpirationTime),
tokenExpirationTime: new Date(token.tokenExpirationTime),
};
}
```
------
## 观察连接更新
对聊天室连接状态的变化做出反应是制作聊天应用程序的重要组成部分。让我们从订阅相关事件开始：
**TypeScript/JavaScript**：
```
// App.tsx / App.jsx
import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
import { fetchChatToken } from './fetchChatToken';
export default function App() {
const [room] = useState(
() =>
new ChatRoom({
regionOrUrl: process.env.REGION,
tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']),
}),
);
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {});
const unsubscribeOnConnected = room.addListener('connect', () => {});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {});
return () => {
// Clean up subscriptions.
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
return Hello!;
}
```
接下来，我们需要提供读取连接状态的功能。我们使用 `useState` 钩子在 `App` 中创建一些本地状态，并在每个侦听器内设置连接状态。
**TypeScript/JavaScript**：
```
// App.tsx / App.jsx
import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { ChatRoom, ConnectionState } from 'amazon-ivs-chat-messaging';
import { fetchChatToken } from './fetchChatToken';
export default function App() {
const [room] = useState(
() =>
new ChatRoom({
regionOrUrl: process.env.REGION,
tokenProvider: () => fetchChatToken('Mike', ['SEND_MESSAGE']),
}),
);
const [connectionState, setConnectionState] = useState('disconnected');
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setConnectionState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setConnectionState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setConnectionState('disconnected');
});
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
return Hello!;
}
```
订阅连接状态后，显示连接状态并使用 `useEffect` 钩子内的 `room.connect` 方法连接到聊天室：
**TypeScript/JavaScript**：
```
// App.tsx / App.jsx
// ...
useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setConnectionState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setConnectionState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setConnectionState('disconnected');
});
room.connect();
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, [room]);
// ...
return (
Connection State: {connectionState}
);
const styles = StyleSheet.create({
root: {
flex: 1,
}
});
// ...
```
您已成功实现聊天室连接。
## 创建发送按钮组件
在本节中，您将创建一个发送按钮，该按钮针对每种连接状态都有不同的设计。该发送按钮有助于在聊天室中发送消息。它还可以直观地指示是否/何时可以发送消息；例如，在连接断开或聊天会话过期的情况下。
首先，在 Chatterbox 项目的 `src` 目录中创建一个新文件并将其命名为 `SendButton`。然后，创建一个组件，该组件将显示聊天应用程序的按钮。导出您的 `SendButton` 并将其导入 `App`。在空的 `` 中，添加 ``。
------
#### [ TypeScript ]
```
// SendButton.tsx
import React from 'react';
import { TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native';
interface Props {
onPress?: () => void;
disabled: boolean;
loading: boolean;
}
export const SendButton = ({ onPress, disabled, loading }: Props) => {
return (
{loading ? Send : }
);
};
const styles = StyleSheet.create({
root: {
width: 50,
height: 50,
borderRadius: 30,
marginLeft: 10,
justifyContent: 'center',
alignContent: 'center',
}
});
// App.tsx
import { SendButton } from './SendButton';
// ...
return (
Connection State: {connectionState}
);
```
------
#### [ JavaScript ]
```
// SendButton.jsx
import React from 'react';
import { TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native';
export const SendButton = ({ onPress, disabled, loading }) => {
return (
{loading ? Send : }
);
};
const styles = StyleSheet.create({
root: {
width: 50,
height: 50,
borderRadius: 30,
marginLeft: 10,
justifyContent: 'center',
alignContent: 'center',
}
});
// App.jsx
import { SendButton } from './SendButton';
// ...
return (
Connection State: {connectionState}
);
```
------
接下来，在 `App` 中定义一个名为 `onMessageSend` 的函数，并将其传递给 `SendButton onPress` 属性。定义另一个名为 `isSendDisabled` 的变量（该变量可防止在未连接聊天室时发送消息），并将其传递给 `SendButton disabled` 属性。
**TypeScript/JavaScript**：
```
// App.jsx / App.tsx
// ...
const onMessageSend = () => {};
const isSendDisabled = connectionState !== 'connected';
return (
Connection State: {connectionState}
);
// ...
```
## 创建消息输入
Chatterbox 消息栏是您将与之交互以向聊天室发送消息的组件。通常，它包含用于编写消息的文本输入和用于发送消息的按钮。
要创建 `MessageInput` 组件，首先在 `src` 目录中创建一个新文件并将其命名为 `MessageInput`。然后创建一个输入组件，这将会显示聊天应用程序的输入。导出您的 `MessageInput` 并将其导入 `App`（在 `` 上方）。
使用 `useState` 钩子创建一个名为 `messageToSend` 的新状态，其默认值为空字符串。在应用程序正文中，将 `messageToSend` 传递给 `MessageInput` 的 `value`，并将 `setMessageToSend` 传递给 `onMessageChange` 属性：
------
#### [ TypeScript ]
```
// MessageInput.tsx
import * as React from 'react';
interface Props {
value?: string;
onValueChange?: (value: string) => void;
}
export const MessageInput = ({ value, onValueChange }: Props) => {
return (
);
};
const styles = StyleSheet.create({
input: {
fontSize: 20,
backgroundColor: 'rgb(239,239,240)',
paddingHorizontal: 18,
paddingVertical: 15,
borderRadius: 50,
flex: 1,
}
})
// App.tsx
// ...
import { MessageInput } from './MessageInput';
// ...
export default function App() {
const [messageToSend, setMessageToSend] = useState('');
// ...
return (
Connection State: {connectionState}
);
const styles = StyleSheet.create({
root: {
flex: 1,
},
messageBar: {
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: 'rgb(160,160,160)',
flexDirection: 'row',
padding: 16,
alignItems: 'center',
backgroundColor: 'white',
}
});
```
------
#### [ JavaScript ]
```
// MessageInput.jsx
import * as React from 'react';
export const MessageInput = ({ value, onValueChange }) => {
return (
);
};
const styles = StyleSheet.create({
input: {
fontSize: 20,
backgroundColor: 'rgb(239,239,240)',
paddingHorizontal: 18,
paddingVertical: 15,
borderRadius: 50,
flex: 1,
}
})
// App.jsx
// ...
import { MessageInput } from './MessageInput';
// ...
export default function App() {
const [messageToSend, setMessageToSend] = useState('');
// ...
return (
Connection State: {connectionState}
);
const styles = StyleSheet.create({
root: {
flex: 1,
},
messageBar: {
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: 'rgb(160,160,160)',
flexDirection: 'row',
padding: 16,
alignItems: 'center',
backgroundColor: 'white',
}
});
```
------
## 后续步骤
现在，您已经为 Chatterbox 构建了一个消息栏，请继续阅读本 React Native 教程第 2 部分：[消息和事件](chat-sdk-react-tutorial-messages-events.md)。
# IVS 聊天功能客户端消息收发 SDK：React Native 教程第 2 部分：消息和事件
本教程的第 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 的代码示例是相同的，因此我们将它们合并在一起。
## 先决条件
确保您已完成本教程的第 1 部分[聊天室](chat-sdk-react-tutorial-chat-rooms.md)。
## 订阅聊天消息事件
当聊天室中发生事件时，`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` 的状态：
------
#### [ TypeScript ]
```
// App.tsx
// ...
import { ChatRoom, ChatMessage, ConnectionState } from 'amazon-ivs-chat-messaging';
export default function App() {
const [messages, setMessages] = useState([]);
//...
}
```
------
#### [ 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)
### 创建消息组件
`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 (
{message.sender.userId}
{message.content}
);
};
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 (
{message.sender.userId}
{message.content}
);
};
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、用户名和消息发送时的时间戳。
### 识别当前用户发送的消息
为了识别当前用户发送的消息，我们修改了代码并创建了 React 上下文来存储当前用户的 `userId`。
在 `src` 目录中创建一个新文件并将其命名为 `UserContext`：
------
#### [ TypeScript ]
```
// UserContext.tsx
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;
```
------
#### [ 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([]);
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 (
{!isMine && {message.sender.userId}}
{message.content}
);
};
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 (
{!isMine && {message.sender.userId}}
{message.content}
);
};
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',
},
});
```
------
### 呈现聊天消息列表
现在使用 `FlatList` 和 `Message` 组件列出消息：
------
#### [ TypeScript ]
```
// App.tsx
// ...
const renderItem = useCallback>(({ item }) => {
return (
);
}, []);
return (
Connection State: {connectionState}
);
// ...
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
const renderItem = useCallback(({ item }) => {
return (
);
}, []);
return (
Connection State: {connectionState}
);
// ...
```
------
所有部分都已准备就绪，您的 `App` 可以开始呈现聊天室收到的消息。继续阅读下文，了解如何在聊天室中利用您创建的组件执行操作。
## 在聊天室中执行操作
发送消息和执行主持人操作是您与聊天室互动的一些主要方式。在这里，您将学习如何使用各种聊天请求对象在 Chatterbox 中执行常见操作，例如发送消息、删除消息和断开其他用户的连接。
聊天室中的所有操作都遵循一个通用模式：对于您在聊天室中执行的每个操作，都有一个相应的请求对象。对于每个请求，您在请求确认时都会收到相应的响应对象。
只要您在创建聊天令牌时向用户授予了正确的功能，他们就可以使用请求对象成功执行相应的操作，以查看您可以在聊天室中执行的请求。
下面，我们介绍如何[发送消息](#chat-react-room-actions-sending-message)和[删除消息](#chat-react-room-actions-deleting-message)。
### 发送消息
`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` 中呈现。
### 删除消息
要从聊天室删除消息，您需要具有适当的权限。权限是在聊天令牌（向聊天室进行身份验证时需要使用该令牌）的初始化期间授予的。就本节而言，[设置本地身份验证/授权服务器](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;
};
export const Message = ({ message, onDelete }: Props) => {
const userId = useUserContext();
const isMine = message.sender.userId === userId;
const handleDelete = () => onDelete(message.id);
return (
{!isMine && {message.sender.userId}}
{message.content}
Delete
);
};
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 (
{!isMine && {message.sender.userId}}
{message.content}
Delete
);
};
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>(({ item }) => {
return (
);
}, [handleDeleteMessage]);
// ...
```
------
#### [ JavaScript ]
```
// App.jsx
// ...
const handleDeleteMessage = async (id) => {};
const renderItem = useCallback(({ item }) => {
return (
);
}, [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();
};
// ...
```
现在，您可以从聊天应用程序的聊天室中删除用户。
## 后续步骤
作为实验，尝试在聊天室中执行其他操作，例如断开其他用户的连接。
# IVS 聊天功能客户端消息收发 SDK：React 和 React Native 最佳实践
此文档说明了使用适用于 React 和 React Native 的 Amazon IVS 聊天功能消息收发 SDK 的最重要实践。利用这些信息，您应该能够在 React 应用程序中构建典型的聊天功能，此外还包括相关的背景知识，以帮助您更深入了解 IVS 聊天功能消息收发 SDK 的更高级部分。
## 创建聊天室初始化程序挂钩
`ChatRoom` 类包含核心的聊天方法和侦听器，用于管理连接状态和侦听各种事件，例如已收到消息和已删除消息。我们将在本教程中演示如何在挂钩中正确地存储聊天实例。
### 实施
------
#### [ TypeScript ]
```
// useChatRoom.ts
import React from 'react';
import { ChatRoom, ChatRoomConfig } from 'amazon-ivs-chat-messaging';
export const useChatRoom = (config: ChatRoomConfig) => {
const [room] = React.useState(() => new ChatRoom(config));
return { room };
};
```
------
#### [ JavaScript ]
```
import React from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
export const useChatRoom = (config) => {
const [room] = React.useState(() => new ChatRoom(config));
return { room };
};
```
------
注意：我们不会使用来自 `setState` 挂钩的 `dispatch` 方法，因为您无法即时更新配置参数。SDK 会一次性创建实例，并且无法更新令牌提供者。
**重要提示**：一次使用 `ChatRoom` 初始化程序挂钩来初始化一个新的聊天室实例。
### 示例
**TypeScript/JavaScript**：
```
// ...
const MyChatScreen = () => {
const userId = 'Mike';
const { room } = useChatRoom({
regionOrUrl: SOCKET_URL,
tokenProvider: () => tokenProvider(ROOM_ID, ['SEND_MESSAGE']),
});
const handleConnect = () => {
room.connect();
};
// ...
};
// ...
```
### 侦听连接状态
您还可以在聊天室挂钩中订阅连接状态更新。
#### 实施
------
#### [ TypeScript ]
```
// useChatRoom.ts
import React from 'react';
import { ChatRoom, ChatRoomConfig, ConnectionState } from 'amazon-ivs-chat-messaging';
export const useChatRoom = (config: ChatRoomConfig) => {
const [room] = useState(() => new ChatRoom(config));
const [state, setState] = React.useState('disconnected');
React.useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setState('disconnected');
});
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, []);
return { room, state };
};
```
------
#### [ JavaScript ]
```
// useChatRoom.js
import React from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
export const useChatRoom = (config) => {
const [room] = useState(() => new ChatRoom(config));
const [state, setState] = React.useState('disconnected');
React.useEffect(() => {
const unsubscribeOnConnecting = room.addListener('connecting', () => {
setState('connecting');
});
const unsubscribeOnConnected = room.addListener('connect', () => {
setState('connected');
});
const unsubscribeOnDisconnected = room.addListener('disconnect', () => {
setState('disconnected');
});
return () => {
unsubscribeOnConnecting();
unsubscribeOnConnected();
unsubscribeOnDisconnected();
};
}, []);
return { room, state };
};
```
------
## 聊天室实例提供者
要在其他组件中使用挂钩（以避免道具钻取），您可以使用 React `context` 创建聊天室提供者。
### 实施
------
#### [ TypeScript ]
```
// ChatRoomContext.tsx
import React from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
const ChatRoomContext = React.createContext(undefined);
export const useChatRoomContext = () => {
const context = React.useContext(ChatRoomContext);
if (context === undefined) {
throw new Error('useChatRoomContext must be within ChatRoomProvider');
}
return context;
};
export const ChatRoomProvider = ChatRoomContext.Provider;
```
------
#### [ JavaScript ]
```
// ChatRoomContext.jsx
import React from 'react';
import { ChatRoom } from 'amazon-ivs-chat-messaging';
const ChatRoomContext = React.createContext(undefined);
export const useChatRoomContext = () => {
const context = React.useContext(ChatRoomContext);
if (context === undefined) {
throw new Error('useChatRoomContext must be within ChatRoomProvider');
}
return context;
};
export const ChatRoomProvider = ChatRoomContext.Provider;
```
------
### 示例
创建 `ChatRoomProvider` 后，您可以通过 `useChatRoomContext` 来使用您的实例。
**重要提示**：请仅在您需要访问聊天屏幕和中间的其他组件之间的 `context` 时，才将提供者置于根级别，以避免在侦听连接时进行不必要的重新渲染。否则，应将提供者放置在尽可能靠近聊天屏幕的位置。
**TypeScript/JavaScript**：
```
// AppContainer
const AppContainer = () => {
const { room } = useChatRoom({
regionOrUrl: SOCKET_URL,
tokenProvider: () => tokenProvider(ROOM_ID, ['SEND_MESSAGE']),
});
return (
);
};
// MyChatScreen
const MyChatScreen = () => {
const room = useChatRoomContext();
const handleConnect = () => {
room.connect();
};
// ...
};
// ...
```
## 创建消息侦听器
要及时了解所有传入的消息，您需要订阅 `message` 和 `deleteMessage` 事件。以下是一些为您的组件提供聊天消息的代码。
**重要提示**：为确保理想的性能，我们将 `ChatMessageContext` 与 `ChatRoomProvider` 分开，因为当聊天消息侦听器更新其消息状态时，我们可能会进行多次重新渲染。请记住要在您要使用 `ChatMessageProvider` 的组件中应用 `ChatMessageContext`。
### 实施
------
#### [ TypeScript ]
```
// ChatMessagesContext.tsx
import React from 'react';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { useChatRoomContext } from './ChatRoomContext';
const ChatMessagesContext = React.createContext(undefined);
export const useChatMessagesContext = () => {
const context = React.useContext(ChatMessagesContext);
if (context === undefined) {
throw new Error('useChatMessagesContext must be within ChatMessagesProvider);
}
return context;
};
export const ChatMessagesProvider = ({ children }: { children: React.ReactNode }) => {
const room = useChatRoomContext();
const [messages, setMessages] = React.useState([]);
React.useEffect(() => {
const unsubscribeOnMessageReceived = room.addListener('message', (message) => {
setMessages((msgs) => [message, ...msgs]);
});
const unsubscribeOnMessageDeleted = room.addListener('messageDelete', (deleteEvent) => {
setMessages((prev) => prev.filter((message) => message.id !== deleteEvent.messageId));
});
return () => {
unsubscribeOnMessageDeleted();
unsubscribeOnMessageReceived();
};
}, [room]);
return {children};
};
```
------
#### [ JavaScript ]
```
// ChatMessagesContext.jsx
import React from 'react';
import { useChatRoomContext } from './ChatRoomContext';
const ChatMessagesContext = React.createContext(undefined);
export const useChatMessagesContext = () => {
const context = React.useContext(ChatMessagesContext);
if (context === undefined) {
throw new Error('useChatMessagesContext must be within ChatMessagesProvider);
}
return context;
};
export const ChatMessagesProvider = ({ children }) => {
const room = useChatRoomContext();
const [messages, setMessages] = React.useState([]);
React.useEffect(() => {
const unsubscribeOnMessageReceived = room.addListener('message', (message) => {
setMessages((msgs) => [message, ...msgs]);
});
const unsubscribeOnMessageDeleted = room.addListener('messageDelete', (deleteEvent) => {
setMessages((prev) => prev.filter((message) => message.id !== deleteEvent.messageId));
});
return () => {
unsubscribeOnMessageDeleted();
unsubscribeOnMessageReceived();
};
}, [room]);
return {children};
};
```
------
### React 示例
**重要提示**：请记住要用 `ChatMessagesProvider` 打包您的消息容器。`Message` 行是一个显示消息内容的示例组件。
**TypeScript/JavaScript**：
```
// your message list component...
import React from 'react';
import { useChatMessagesContext } from './ChatMessagesContext';
const MessageListContainer = () => {
const messages = useChatMessagesContext();
return (
{messages.map((message) => (
))}
);
};
```
### React Native 示例
`ChatMessage` 会默认包含 `id`，后者将在 `FlatList` 中自动用作每行的 React 键；因此，您无需传递 `keyExtractor`。
------
#### [ TypeScript ]
```
// MessageListContainer.tsx
import React from 'react';
import { ListRenderItemInfo, FlatList } from 'react-native';
import { ChatMessage } from 'amazon-ivs-chat-messaging';
import { useChatMessagesContext } from './ChatMessagesContext';
const MessageListContainer = () => {
const messages = useChatMessagesContext();
const renderItem = useCallback(({ item }: ListRenderItemInfo) => , []);
return ;
};
```
------
#### [ JavaScript ]
```
// MessageListContainer.jsx
import React from 'react';
import { FlatList } from 'react-native';
import { useChatMessagesContext } from './ChatMessagesContext';
const MessageListContainer = () => {
const messages = useChatMessagesContext();
const renderItem = useCallback(({ item }) => , []);
return ;
};
```
------
## 一个应用程序中的多个聊天室实例
如果您在应用程序中使用多个并发聊天室，我们建议为每个聊天创建一个提供者，并在聊天提供者中使用该提供者。在此例中，我们将创建一个帮助机器人和客户帮助聊天。我们将为两者分别创建了一个提供者。
------
#### [ TypeScript ]
```
// SupportChatProvider.tsx
import React from 'react';
import { SUPPORT_ROOM_ID, SOCKET_URL } from '../../config';
import { tokenProvider } from '../tokenProvider';
import { ChatRoomProvider } from './ChatRoomContext';
import { useChatRoom } from './useChatRoom';
export const SupportChatProvider = ({ children }: { children: React.ReactNode }) => {
const { room } = useChatRoom({
regionOrUrl: SOCKET_URL,
tokenProvider: () => tokenProvider(SUPPORT_ROOM_ID, ['SEND_MESSAGE']),
});
return {children};
};
// SalesChatProvider.tsx
import React from 'react';
import { SALES_ROOM_ID, SOCKET_URL } from '../../config';
import { tokenProvider } from '../tokenProvider';
import { ChatRoomProvider } from './ChatRoomContext';
import { useChatRoom } from './useChatRoom';
export const SalesChatProvider = ({ children }: { children: React.ReactNode }) => {
const { room } = useChatRoom({
regionOrUrl: SOCKET_URL,
tokenProvider: () => tokenProvider(SALES_ROOM_ID, ['SEND_MESSAGE']),
});
return {children};
};
```
------
#### [ JavaScript ]
```
// SupportChatProvider.jsx
import React from 'react';
import { SUPPORT_ROOM_ID, SOCKET_URL } from '../../config';
import { tokenProvider } from '../tokenProvider';
import { ChatRoomProvider } from './ChatRoomContext';
import { useChatRoom } from './useChatRoom';
export const SupportChatProvider = ({ children }) => {
const { room } = useChatRoom({
regionOrUrl: SOCKET_URL,
tokenProvider: () => tokenProvider(SUPPORT_ROOM_ID, ['SEND_MESSAGE']),
});
return {children};
};
// SalesChatProvider.jsx
import React from 'react';
import { SALES_ROOM_ID, SOCKET_URL } from '../../config';
import { tokenProvider } from '../tokenProvider';
import { ChatRoomProvider } from './ChatRoomContext';
import { useChatRoom } from './useChatRoom';
export const SalesChatProvider = ({ children }) => {
const { room } = useChatRoom({
regionOrUrl: SOCKET_URL,
tokenProvider: () => tokenProvider(SALES_ROOM_ID, ['SEND_MESSAGE']),
});
return {children};
};
```
------
### React 示例
您现在可以使用具有相同 `ChatRoomProvider` 的不同聊天提供者。稍后您可以在每个屏幕/视图中重复使用相同的 `useChatRoomContext`。
**TypeScript/JavaScript**：
```
// App.tsx / App.jsx
const App = () => {
return (
}
/>
}
/>
);
};
```
### React Native 示例
**TypeScript/JavaScript**：
```
// App.tsx / App.jsx
const App = () => {
return (
);
};
```
**TypeScript/JavaScript**：
```
// SupportChatScreen.tsx / SupportChatScreen.jsx
// ...
const SupportChatScreen = () => {
const room = useChatRoomContext();
const handleConnect = () => {
room.connect();
};
return (
<>
);
};
// SalesChatScreen.tsx / SalesChatScreen.jsx
// ...
const SalesChatScreen = () => {
const room = useChatRoomContext();
const handleConnect = () => {
room.connect();
};
return (
<>
);
};
```