` 標籤之間的所有內容。不需要預先填入程式碼。此刻，`App` 相當空。
```
// App.jsx / App.tsx
import * as React from 'react';
export default function App() {
return
Hello!
;
}
```
建立新的 `ChatRoom` 執行個體並使用 `useState` 勾點將其傳遞給狀態。其需要傳遞 `regionOrUrl` (託管聊天室的 AWS 區域) 和 `tokenProvider` (用於後續步驟中建立的後端身分驗證/授權流程)。
**重要事項**：您必須使用與在 [Amazon IVS 聊天功能入門](getting-started-chat-create-room.md)中建立聊天室的區域相同的 AWS 區域。該 API 是 AWS 區域服務。如需支援區域和 Amazon IVS 聊天功能 HTTPS 服務端點的清單，請參閱 [Amazon IVS 聊天功能區域](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 請求。聊天字符包含開發套件成功建立聊天室連線所需的資訊。Chat API 使用這些字符作為驗證使用者身分、聊天室內功能和工作階段持續時間的安全方式。
在專案導覽器中，建立名為 `fetchChatToken` 的新 TypeScript/JavaScript 檔案。建立 `backend` 應用程式的擷取請求，並從回應中傳回 `ChatToken` 物件。新增建立聊天字符所需的請求主體屬性。使用針對 [Amazon Resource Name (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 部分：訊息和事件
本教學課程的第二部分 (也是最後一部分) 分為幾個部分：
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 文件，請先閱讀 [Amazon 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/) (聊天用戶端傳訊：JavaScript 版 SDK 參考) (位於 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` 類別允許在聊天室中傳送訊息。在此處，您會使用自己在[建立訊息輸入](chat-sdk-js-tutorial-chat-rooms.md#chat-js-rooms-message-input) (在本教學課程的第 1 部分) 中建立的元件來修改 `App`，以便傳送訊息請求。
若要開始，請使用 `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` 的新布林狀態。使用此狀態，根據 `isDeleting` 的目前狀態將 `Button` 的內容更新為不同內容。在 `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` 事件，並透過刪除具有與 `message` 參數相符 ID 的訊息來更新 `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 部分：聊天室
這是由兩部分組成的教學課程的第一部分。您將透過使用 React Native 建置功能完整的應用程式，來學習使用 Amazon IVS 聊天用戶端傳訊 JavaScript SDK 的基礎知識。我們稱呼該應用程式為 *Chatterbox*。
目標對象是初次使用 Amazon IVS 聊天功能傳訊開發套件的經驗豐富的開發人員。您應該很熟悉 TypeScript 或 JavaScript 程式設計語言和 React Native 程式庫。
為了簡潔起見，我們將 Amazon IVS 聊天用戶端傳訊 JavaScript SDK 稱為 Chat JS SDK。
**注意**：在某些情況下，JavaScript 和 TypeScript 的程式碼範例是相同的，因此我們會將兩者的範例合併。
本教學課程的第一部分分為幾個部分：
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，請在 [React Native 簡介](https://reactnative.dev/docs/tutorial)中了解基礎知識。
+ 閱讀並理解 [Amazon IVS 聊天功能入門](getting-started-chat.md)。
+ 使用現有 IAM 政策中定義的 CreateChatToken 和 CreateRoom 功能建立 AWS IAM 使用者。(請參閱 [Amazon IVS 聊天功能入門](getting-started-chat.md))。
+ 確保將此使用者的私密/存取金鑰儲存在 AWS 憑證檔案中。如需指示，請參閱《[AWS 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 聊天功能入門](getting-started-chat.md)。(如果您未保存該 ARN，稍後可以使用主控台或 Chat API 來查詢。)
+ 使用 NPM 或 Yarn 套件管理工具安裝 Node.js 14\$1 環境。
## 設定本機身分驗證/授權伺服器
後端應用程式負責建立聊天室並產生 Chat JS SDK 需要的聊天字符，以便對聊天室的用戶端執行身分驗證和授權。您必須使用自己的後端，因為您無法將 AWS 金鑰安全地存放在行動應用程式中；成熟的攻擊者可擷取這些金鑰並取得 AWS 帳戶的存取權。
請參閱 *Amazon IVS 聊天功能入門*中的[建立聊天字符](getting-started-chat-auth.md)。如流程圖所示，您的伺服器端應用程式會負責建立聊天字符。這意味著應用程式必須透過從伺服器端應用程式請求聊天字符，來提供自己產生聊天字符的方法。
在本節中，您將學習在後端建立字符提供者的基礎知識。我們使用快速架構建立即時本機伺服器，以管理使用本機 AWS 環境建立聊天字符的作業。
使用 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` (託管聊天室的 AWS 區域) 和 `tokenProvider` (用於後續步驟中建立的後端身分驗證/授權流程)。
**重要事項**：您必須使用與在 [Amazon IVS 聊天功能入門](getting-started-chat-create-room.md)中建立聊天室的區域相同的 AWS 區域。該 API 是 AWS 區域服務。如需支援區域和 Amazon IVS 聊天功能 HTTPS 服務端點的清單，請參閱 [Amazon IVS 聊天功能區域](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 請求。聊天字符包含開發套件成功建立聊天室連線所需的資訊。Chat API 使用這些字符作為驗證使用者身分、聊天室內功能和工作階段持續時間的安全方式。
在專案導覽器中，建立名為 `fetchChatToken` 的新 TypeScript/JavaScript 檔案。建立 `backend` 應用程式的擷取請求，並從回應中傳回 `ChatToken` 物件。新增建立聊天字符所需的請求主體屬性。使用針對 [Amazon Resource Name (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 部分：訊息和事件
本教學課程的第二部分 (也是最後一部分) 分為幾個部分：
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` 類別允許在聊天室中傳送訊息。在此處，您會使用自己在[建立訊息輸入](chat-sdk-react-tutorial-chat-rooms.md#chat-react-rooms-message-input) (在本教學課程的第 1 部分) 中建立的元件來修改 `App`，以便傳送訊息請求。
若要開始，請使用 `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` 事件，並透過刪除具有與 `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();
};
// ...
```
您現在可以從聊天應用程式的聊天室中刪除使用者。
## 後續步驟
實驗時，請嘗試在聊天室中實作其他動作，例如中斷其他使用者的連線。
# IVS 聊天用戶端傳訊 SDK：React 和 React Native 最佳實務
本文件說明使用 React and 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` 分離出來，以免聊天訊息接聽程式在更新訊息狀態時發生多次重新渲染。請記得將 `ChatMessageContext` 套用至您會使用 `ChatMessageProvider` 的元件。
### 實作
------
#### [ 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 ;
};
```
------
## 應用程式中的多個聊天室執行個體
如果您在應用程式中使用多個並行聊天室，建議您為每個聊天建立各自的提供者，並將其用於聊天提供者。在此範例中，我們建立了 Help Bot 和 Customer Help 聊天。我們為兩者都建立了提供者。
------
#### [ 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 (
<>
);
};
```