本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 以程式設計方式中斷 Amazon Connect 通訊小工具的聊天工作階段
<a name="programmatic-chat-disconnect"></a>

您可以呼叫存放在小工具 `iframe` 的 `disconnect` 方法，以程式設計方式使用 JavaScript 中斷通訊小工具的聊天工作階段連線。從小工具的託管文件中，您可以使用下列程式碼片段來參考 `disconnect` 函數：

```
document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()
```

您可以直接將其新增至現有的小工具指令碼。以下是範例程式碼片段：

```
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>
```

## 實作和使用案例
<a name="implementation-chat-disconnect"></a>

以程式設計方式呼叫中斷連線，在多種情況下都有其效用。如此，您可以進一步控制何時應以手動點按 `End Chat` 按鈕以外的方式終止對話。以下是呼叫 `disconnect` 的一些常見使用案例。

### 關閉或導覽時
<a name="close-chat-disconnect"></a>

常見的使用案例是將中斷連線功能連接至瀏覽器或索引標籤內容銷毀時所引發的事件。`pagehide` 和 `beforeunload` 是當清除瀏覽器時引發的常見事件。當使用者重新整理、導覽至不同的 URL，或是關閉索引標籤或瀏覽器時，就會觸發這些事件。雖然兩個事件都會在瀏覽器內容銷毀時觸發，但無法保證 `disconnect` 函數可在瀏覽器的資源清除之前完整執行。

`pagehide` 是更新式的頁面生命週期事件，所有主要瀏覽器和作業系統均加以支援。`beforeunload` 是替代事件，可在 `pagehide` 事件無法一致呼叫中斷連線時試著使用。`beforeunload` 會在 `pagehide` 之前觸發，可在 `disconnect` 函數無法在瀏覽器關閉之前完成時提供額外的可靠性。`beforeunload` 方面一直都有可靠性問題，尤其是在 iOS 裝置上。

以下是範例程式碼片段：

```
// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});
```

### 在內容切換時
<a name="context-chat-disconnect"></a>

另一個使用案例是在使用者切換內容時觸發中斷連線，例如，當使用者切換或最小化索引標籤/應用程式，或鎖定其畫面時。`visibilitychange` 事件可以可靠處理這類不再顯示內容的案例。

以下是範例程式碼片段：

```
window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});
```