기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 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` 함수가 완료되지 않는 경우 추가 신뢰성을 제공할 수 있습니다. 특히 iOS 디바이스에서 `beforeunload`와 관련하여 신뢰성 문제가 있었습니다.

다음은 예제 코드 조각입니다.

```
// 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") {
        ...
    }
});
```