디지털 휴먼 종료

현재 연결중인 디지털 휴먼과의 연결을 종료합니다.

메서드

disconnect()

모든 연결을 종료하고 리소스를 정리합니다.

public async disconnect(): Promise<void>

사용법

JavaScript/TypeScript

import { KleverOneClient } from "@klever/sdk/core";

const client = new KleverOneClient({
  apiKey: "your-api-key",
  container: document.getElementById("streaming-container"),
});

// 연결 후...
await client.connect();

// 연결 종료
client.disconnect();

React Hook

"use client";

import { useRef, useEffect, useMemo } from "react";
import { useKleverOneClient, type Message } from "@klever-one/web-sdk/react";

function MyComponent() {
  const containerRef = useRef(null);
  const tempContainer = useMemo(() => {
    if (typeof document !== "undefined") {
      return document.createElement("div");
    }
    return {} as HTMLDivElement;
  }, []);

  const client = useKleverOneClient({
    apiKey: "your-api-key",
    container: containerRef.current || tempContainer,
    callbacks: {
      onReady: () => console.log("디지털 휴먼 준비 완료!"),
      onMessageReceived: (message: Message) =>
        console.log("받은 메시지:", message),
      onError: (error: Error) => console.error("오류:", error),
    },
  });

  useEffect(() => {
    return () => {
      if (client.client) {
        client.disconnect();
      }
    };
  }, [client.client]);


  const handleConnect = async () => {
    if (containerRef.current && client.client) {
      try {
        await client.connect();
        console.log("연결 성공!");
      } catch (error) {
        console.error("연결 실패:", error);
      }
    }
  };

  const handleDisconnect = () => {
    if (client.client) {
      client.disconnect();
      console.log("연결 종료 완료");
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black"
      ></div>
      <button onClick={handleConnect}>디지털 휴먼 연결</button>
      <button onClick={handleDisconnect}>디지털 휴먼 종료</button>
      <p>상태: {client.state.connection}</p>
    </div>
  );
}

종료 과정

연결 종료 시 다음 작업들이 순차적으로 수행됩니다:

1. 녹음 중인 경우 중지
2. 대화 내역 삭제
3. 스트리밍 연결 종료
4. 방 WebSocket 연결 종료
5. 이벤트 리스너 정리
6. 상태 초기화

상태 확인

종료 상태는 다음과 같이 확인할 수 있습니다:

// 종료 전 상태 확인
if (client.getState().connection !== "disconnected") {
  client.disconnect();
}

// 종료 후 상태 확인
const state = client.getState();
console.log("연결 상태:", state.connection); // "disconnected"

안전한 종료

앱 종료 시 명시적으로 연결을 정리합니다:

// 페이지 언로드 시 정리
window.addEventListener("beforeunload", async () => {
  if (client.getState().connection !== "disconnected") {
    client.disconnect();
  }
});

// React useEffect cleanup
useEffect(() => {
  return () => {
    if (client.getState().connection !== "disconnected") {
      client.disconnect();
    }
  };
}, []);

재연결

종료 후 다시 연결하려면:

// 종료
client.disconnect();

// 잠시 대기 후 재연결
setTimeout(async () => {
  await client.connect();
}, 1000);

// 또는 reconnect 메서드 사용
await client.reconnect();