헤드리스 웹 SDK는 애플리케이션 내에서 특정 작업이나 업데이트를 처리하기 위해 수신 대기할 수 있는 이벤트를 제공합니다. .on 및 .off 메서드를 사용하여 이벤트 리스너를 추가하고 삭제할 수 있습니다.
const handleReady = () => {
console.log("**** client is ready")
}
client.on("ready", handleReady)
// client.off("ready", handleReady)
일반 이벤트
다음은 SDK의 일반적인 이벤트입니다.
ready
클라이언트가 통신할 준비가 되면 내보냅니다.
client.on("ready", () => {
})
authenticated
클라이언트가 사용자의 토큰으로 인증된 경우 발생합니다.
client.on("authenticated", () => {
})
채팅 이벤트
다음은 채팅 세션 관련 이벤트입니다.
chat.ongoing
진행 중인 채팅이 있을 때 내보냅니다.
client.on("chat.ongoing", (chat) => {
console.log(chat)
})
chat.updated
채팅 인스턴스가 업데이트되면 내보냅니다.
client.on("chat.updated", (chat) => {
// the `chat` property on `client` has updated
console.log(chat)
})
chat.message
새 메시지가 있을 때 내보냅니다.
client.on("chat.message", message => {
console.log(message)
})
메시지 유형:
interface MessageResponse {
$index: number;
$sid: string;
$timestamp: Date;
$userType: string;
$userId: number;
type: string;
content?: string;
event?: string;
file?: File;
// extra parameters
}
chat.memberJoined
새 멤버가 대화에 참여할 때 발생합니다.
client.on("chat.memberJoined", (identity) => {
console.log(identity)
})
chat.memberLeft
구성원이 대화에서 나갈 때 발생합니다.
client.on("chat.memberLeft", (identity) => {
console.log(identity)
})
chat.typingStarted
구성원이 입력하기 시작할 때 내보냅니다.
client.on("chat.typingStarted", (identity) => {
console.log(identity)
})
chat.typingEnded
구성원이 입력을 중지할 때 발생합니다.
client.on("chat.typingEnded", (identity) => {
console.log(identity)
})
chat.connected
채팅이 대화 제공자와 연결될 때 발생합니다.
client.on("chat.connected", () => {
console.log("connected")
})
드물지만 SDK가 채팅에 참여하기 전에 메시지가 채팅으로 전송되는 지연 시간 문제가 있을 수 있습니다. 이 경우 채팅이 연결된 후 fetchMessages를 사용하여 대화의 기존 메시지를 모두 가져올 수 있습니다. 다음 코드 샘플을 참고하세요.
client.on("chat.connected", async () = {
const messages = await
client.fetchMessages()
})
chat.disconnected
채팅이 대화 제공업체에서 연결이 끊어지면 발생합니다.
client.on("chat.disconnected", () => {
console.log("disconnected")
})
chat.dismissed
채팅 상태가 dismissed로 변경될 때 발생합니다.
client.on("chat.dismissed", () => {
console.log("dismissed")
})
chat.timeout
채팅이 종료될 때 timeout을 이유로 내보냅니다.
client.on("chat.timeout", () => {
console.log("timeout")
})
chat.ended
채팅이 종료되면 내보냅니다.
client.on("chat.ended", () => {
console.log("ended")
})
chat.destroyed
destroyChat가 호출될 때 내보냅니다.
client.on("chat.destroyed", () => {
console.log("destroyed")
})
채팅 체크인
다음은 채팅 체크인 이벤트입니다.
checkIn
최종 사용자가 대기열에 있는지 확인합니다.
메서드 서명
checkIn(): Promise<CheckInResponse>
반환 값
CheckInResponse 객체를 반환합니다.
인터페이스
interface CheckInResponse {
chat_id: number;
check_in_status: CheckInStatus;
check_in_at?: string;
}
enum CheckInStatus {
CONFIRMED = 'confirmed',
EXITED = 'exited',
PENDING = 'pending',
REQUESTED = 'requested',
SKIPPED = 'skipped',
TIMED_OUT = 'timed_out',
}
예시
try {
const response = await client.checkIn()
} catch (error) {
// handle error
}
exitCheckIn
체크인 대기열에서 사용자를 삭제합니다.
메서드 서명
exitCheckIn(): Promise<CheckInResponse>
반환 값
CheckInResponse 객체를 반환합니다.
인터페이스
interface CheckInResponse {
chat_id: number;
check_in_status: CheckInStatus;
check_in_at?: string;
}
enum CheckInStatus {
CONFIRMED = 'confirmed',
EXITED = 'exited',
PENDING = 'pending',
REQUESTED = 'requested',
SKIPPED = 'skipped',
TIMED_OUT = 'timed_out',
}
notifyCheckInState
체크인 대화상자 공개 상태를 백엔드에 알립니다.
메서드 서명
notifyCheckInState(data: CheckInVisibilityStateRequest): Promise<void>
인터페이스
interface CheckInVisibilityStateRequest {
widget_minimized?: boolean;
tab_inactive?: boolean;
}
**Example**
try {
const visibilityState = {
widget_minimized: true,
tab_inactive: false,
}
await client.notifyCheckInState(visibilityState)
} catch (error) {
// handle error
}
rejoinChat
체크인을 확인하지 못한 후 사용자를 대기열에 다시 배치합니다.
메서드 서명
rejoinChat(): Promise<CheckInResponse>
반환 값
CheckInResponse 객체를 반환합니다.
인터페이스
interface CheckInResponse {
chat_id: number;
check_in_status: CheckInStatus;
check_in_at?: string;
}
enum CheckInStatus {
CONFIRMED = 'confirmed',
EXITED = 'exited',
PENDING = 'pending',
REQUESTED = 'requested',
SKIPPED = 'skipped',
TIMED_OUT = 'timed_out',
}
예시
try {
const response = await client.rejoinChat()
} catch (error) {
// handle error
trackCheckInEvent
UI에서 체크인 이벤트가 트리거된 경우 백엔드에 신호를 보냅니다. 이 값은 체크인 대화상자가 최종 사용자에게 표시된 경우에 사용됩니다.
메서드 서명
trackCheckInEvent(): Promise<void>
예시
try {
await client.trackCheckInEvent()
} catch (error) {
// handle error
동시 탐색 이벤트
다음은 공동 탐색과 관련된 이벤트입니다.
cobrowse.request
최종 사용자 또는 상담사가 공동 탐색 세션 시작을 요청할 때 발생합니다.
client.on("cobrowse.request", { from } => {
console.log("request by", from)
})
cobrowse.loaded
공동 탐색 세션이 로드될 때 내보냅니다.
client.on("cobrowse.loaded", session => {
console.log("cobrowse session", session)
})
cobrowse.updated
공동 탐색 세션이 업데이트될 때 발생합니다.
client.on("cobrowse.updated", session => {
console.log("cobrowse session", session)
})
cobrowse.ended
공동 탐색 세션이 종료될 때 내보냅니다.
client.on("cobrowse.ended", session => {
console.log("cobrowse session", session)
})