如何为我的应用程序设置聊天小组件，使其与 Amazon Connect 和 Amazon Connect Participant Service API 以原生方式交互？

解决方法

要使用 Amazon Connect 和 Amazon Connect Participant Service API 直接从您的应用程序发起客户聊天联系，请将您的应用程序配置为执行以下操作。

客户发起聊天联系时，请调用 StartChatContact Amazon Connect API

将您的应用程序配置为在客户发起聊天联系时调用 StartChatContact Amazon Connect API。API 响应返回在下一步中调用 CreateParticipantConnection API 所需的 ParticipantToken 值。

**重要提示：**进行 API 调用的客户端必须具有 AWS Identity and Access Management (IAM) 权限才能执行 connect:StartChatContact 操作。

要部署从应用程序调用 StartChatContact API 所需的资源，您可以在 GitHub 上使用以下 AWS CloudFormation 模板：amazon-connect-chat-ui-examples。此模板将创建 Amazon API Gateway 终端节点，该终端节点调用包含所需 IAM 权限的 AWS Lambda 函数。AWS Lambda 函数调用 Amazon Connect StartChatContact API 并返回该调用的结果。

StartChatContact API 请求示例 (JavaScript)

如果在应用程序中使用 axios，您可以使用以下 JavaScript 代码调用 StartChatContact API：

const startChatApi = "https://xxxxxxxxxx.execute-api.<region>.amazonaws.com/Prod"; // API endpoint you deployed with the CloudFormation template. 

...

axios.post(
  startChatApi,
  {
    ParticipantDetails: {
      DisplayName: "CUSTOMER" // This is going to be a display name of your customer during a chat contact
    }
  }
);

调用 CreateParticipantConnection Amazon Connect Participant Service API 并传递 ParticipantToken 值

将您的应用程序配置为在发起聊天联系后调用 CreateParticipantConnection Amazon Connect Participant Service API。

调用 CreateParticipantConnection API 将返回 WebSocket URL 和 ConnectionToken。客户端必须手动连接到 WebSocket URL 并订阅所需主题（“aws/聊天”）才能创建聊天参与者的连接。

**注意：**Amazon Connect Participant Service API 不使用签名版本 4 身份验证。对于 X-Amz-Bearer 请求标头值，您必须改用 ParticipantToken 或 ConnectionToken 值。仅在调用 CreateParticipantConnection API 时才会使用 ParticipantToken 值。其他 Amazon Connect Participant Service API 要求您传递 ConnectionToken 值。

CreateParticipantConnection API 请求示例 (JavaScript)

如果在应用程序中使用 axios，您可以使用以下 JavaScript 代码调用 CreateParticipantConnection API：

const participantServiceEndpoint = "https://participant.connect.<region>.amazonaws.com";
// Replace <region> with the one that you are using. i.e. us-west-2. Endpoint list is available in https://docs.aws.amazon.com/general/latest/gr/connect_region.html

...

const requestHeaders = {
  "X-Amz-Bearer": "ParticipantToken", // Replace "ParticipantToken" with the one you obtained from the response of StartChatContact API
  "Content-type": "application/json"
};
const requestBody = {
  "Type": ["WEBSOCKET", "CONNECTION_CREDENTIALS"]
};

axios.post(participantServiceEndpoint + "/participant/connection", requestBody, {
  headers: requestHeaders
});

使用返回的 WebSocket URL 创建 WebSocket 连接，然后为应用程序订阅“aws/聊天”主题

调用 CreateParticipantConnection API 后，客户端必须手动连接到返回的 WebSocket URL 并订阅**“aws/聊天”**主题。

有有关更多信息，请参阅 Amazon Connect Participant Service API 参考中的 CreateParticipantConnection。

用于创建 WebSocket 连接并为客户端订阅“aws/聊天”主题的 JavaScript 代码示例

const ws = new WebSocket(websocketUrl); // Here, you use the websocket URL that you obtained from the response of CreateParticipantConnection API

const initialMessage = {
  topic: "aws/subscribe",
  content: {
    topics: ["aws/chat"]
  }
};
ws.addEventListener("open", () => {
  ws.send(JSON.stringify(initialMessage))
});

通过调用 Amazon Connect Participant Service API 发送聊天消息或事件

**注意：**您无法直接通过 WebSocket 连接发送消息或事件。您必须改用其中一个 Amazon Connect Participant Service API。

要发送聊天消息，请调用 SendMessage Amazon Connect Participant Service API。

-或者-

要发送事件，请调用 SendEvent Amazon Connect Participant Service API。

**重要提示：**对于 X-Amz-Bearer 请求标头，请确保使用 CreateParticipantConnection API 返回的 ConnectionToken 值。

SendMessage API 请求示例 (JavaScript)

如果在应用程序中使用 axios，您可以使用以下 JavaScript 代码调用 SendMessage API：

const requestHeaders = {
  "X-Amz-Bearer": "ConnectionToken", // Replace "ConnectionToken" with the one you obtained from the response of CreateParticipantConnection API
  "Content-type": "application/json"
};
const requestBody = {
  "ClientToken": "unique string", // [Optional] A unique, case-sensitive identifier that you provide to ensure the idempotency of the request 
  "Content": message, // The actual chat message
  "ContentType": "text/plain", // Currently, supported type is text/plain
};

axios.post(participantServiceEndpoint + "/participant/message", requestBody, {
  headers: requestHeaders
});

SendEvent API 请求示例 (JavaScript)

如果在应用程序中使用 axios，您可以使用以下 JavaScript 代码调用 SendEvent API：

const requestHeaders = {
  "X-Amz-Bearer": "ConnectionToken", //Replace "ConnectionToken" with the one you obtained from the response of CreateParticipantConnection API
  "Content-type": "application/json"
};
const requestBody = {
  "ClientToken": "unique string", //[Optional] A unique, case-sensitive identifier that you provide to ensure the idempotency of the request 
  "ContentType": "application/vnd.amazonaws.connect.event.typing", //Typing event. You can specify "application/vnd.amazonaws.connect.event.connection.acknowledged" for acknowledged event
};

axios.post(participantServiceEndpoint + "/participant/event", requestBody, {
  headers: requestHeaders
});

---