如何为我的应用程序设置聊天小组件，使其能够与 Amazon Connect 和 Amazon Connect 参与者服务 API 进行本地交互？

解决方法

要通过 Amazon Connect 和 Amazon Connect 参与者服务 API 直接从您的应用程序发起客户聊天，请执行以下操作：

当客户发起聊天时，调用 startChatContact Amazon Connect API

将您的应用程序配置为在客户发起聊天时调用 StartChatContact Amazon Connect API。API 响应会返回一个 ParticipantToken 值。此值是调用 CreateParticipantConnection API 所必需的。

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

使用 GitHub 网站上的 amazon-connect-chat-ui-examples AWS CloudFormation 模板部署调用 StartChatContact API 所需的资源。该模板会创建一个 Amazon API Gateway 端点，该端点会调用包含所需的 IAM 权限的 AWS Lambda 函数。AWS Lambda 函数会调用 Amazon Connect StartChatContact API 并返回该调用的结果。

StartChatContact API 请求 (JavaScrip) 示例

如果您在应用程序中使用 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" // A display name of your customer during a chat contact
    }
  }
);

有关更多信息，请参阅 GitHub 网站上的 axios 命令。

调用 CreateParticipantConnection Amazon Connect 参与者服务 API 并传递 ParticipantToken 值

将您的应用程序配置为在发起聊天后调用 CreateParticipantConnection Amazon Connect 参与者服务 API。

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

注意：Amazon Connect 参与者服务 API 不使用签名版本 4 身份验证。对于 X-Amz-Bearer 请求标头值，必须改用 ParticipantToken 或 ConnectionToken 值。ParticipantToken 值仅用于调用 CreateParticipantConnection API。其他 Amazon Connect 参与者服务 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/chat”主题

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

有关更多信息，请参阅 Amazon Connect 参与者服务 API 参考中的 CreateParticipantConnection。

创建 WebSocket 连接并为客户端订阅“aws/chat”主题的 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))
});

通过 WebSocket 连接接收聊天事件和消息

打开 WebSocket 连接并订阅**“aws/chat”**主题后，您可以通过 WebSocket 接收聊天事件和消息。为此，请为 “消息” 事件添加一个事件侦听器。

为 “消息” 事件创建事件侦听器的 JavaScript 代码示例：

ws.addEventListener("message", (event) => {
  // process event here
  const response = JSON.parse(event.data);
  if (response.topic === "aws/chat") {
  const responseMessage = JSON.parse(response.content);
    if (responseMessage.Type === "MESSAGE") {
      // display message in interface here
    }
  }
}

有关 ResponseMessage 对象结构的更多信息，请参阅 Amazon Connect 文档中的项目。

通过 Amazon Connect 参与者服务 API 发送聊天消息或事件

**注意：**不能直接通过 WebSocket 连接发送消息或事件。必须改用 Amazon Connect 参与者服务 API 之一。

要发送聊天消息，请调用 SendMessage Amazon Connect 参与者服务 API。或者，要发送事件，请调用 SendEvent Amazon Connect 参与者服务 API。

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

发送消息 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
});