카카오 챗봇 5초 타임아웃, 콜백 응답으로 해결하기

 

카카오 챗봇을 본인의 서버(스킬서버)로 통신하고자 하는데

카카오 챗봇의 타임아웃은 5초입니다.. 

심지어 이 타임아웃 시간은 변경하지 못한다고 오피셜에서도 못박아두고 있어요.

 

그런데 여기에 콜백 기능을 제공해주고 있다고 써있죠?

콜백 기능이 5초의 타임아웃을 보완해줄 수 있는 기능입니다 !

 

삽질을 좀 했는데 제가 알아낸 이 콜백 기능에 대해 적어보려고 해요😀

 

---

 

먼저, 카카오 챗봇에서 제공하는 콜백 기능은

5초 이내 답변이 불가능한 경우, 지연 메세지(예. 잠시만 기다려주세요)를 보내고 1분 이내로 1건의 응답을 보낼 수 있는 기능입니다.

 

이 콜백 기능을 사용하려면 AI 챗봇 전환을 해야하는데, 이 AI 챗봇 전환은 신청해주어야 합니다.

 

그렇게 비즈니스적으로 상세하게 작성하지 않아도 이상해보이지 않으면 승인되는 것 같아요.

저는 "서비스 챗봇 개발중 콜백 기능 사용을 위함" 뭐 이런 식으로 작성했던 것 같아요.

 

1~2일 내로 승인이 되는데 승인이 되면

이렇게 ON 상태로 전환이 가능합니다.

 

 

콜백 응답을 사용하는데 공식 개발 가이드가 있습니다.

친절하게 이미지와 함께 자세히 설명이 되어 있기는 해요 👍🏻

https://kakaobusiness.gitbook.io/main/tool/chatbot/skill_guide/ai_chatbot_callback_guide

AI 챗봇 콜백 개발 가이드 - kakao business 비즈니스 가이드

 

 

먼저!

챗봇 관리자센터에서 설정해야 하는 것은 폴백 블록에 대해서 보겠습니다.

폴백 블록은 사용자의 메세지에 대해 응답할 수 없을 때 실행되는 블록으로

 

ex)

"오늘 날씨 어때요" 라는 날씨 블록만 설정했을 때, 사용자가 "오늘 lck 경기 어느 팀이 이겼나요?" 라고 입력하면 실행되게 되는 블록이 폴백 블록이에요.

 

 

시나리오 -> 폴백 블록 에서 오른쪽 상단 ... 버튼 -> Callback 설정 을 클릭합니다.

그러면 위 사진같은 화면이 뜨는데 

설정 스위치를 ON 해주고 메세지 입력란에 원래의 응답이 나오기 전에 어떤 메세지가 나오면 될지 입력해줍니다.

"입력중입니다." 라던가 "잠시만 기다려주세요" 라던가의 메세지가 되겠죠?

 

사진처럼 {{#webhook.text}} 를 입력하게 되면 서버에서 보내는 응답 메세지로 하겠다~ 의 의미가 되겠습니다.

 

 

 

사용자가 입력하는 모든 메세지에 대해 스킬 서버를 이용하겠다 하는 분들은 시스템 엔티티 설정이 필요한데요.

오른쪽 상단 `엔티티` 라는 버튼에서 `시스템 엔티티` 에서 `@sys.text` 의 스위치를 On해서 추가해주시고

 

 

폴백 블록의 파라미터를 아래 사진과 같이 설정해주시면 됩니다.

 

파라미터명은 원하는 대로 구분가능한 변수명 해주시면 되는데 (일단 제가 찾아본 거에 따르면 ) 엔티티와 필수파라미터 설정이 필요한 것 같아요.

 

 

폴백 블록에서 설정한 이유는 

사용자의 메세지가 매번 다르다면 폴백 블록으로 빠지기 때문이에요

정해진 케이스가 있다면 .. 해당하는 블록을 생성하시면 되겠..죠..? 😅

 

 

다 설정하면 아래 사진처럼 보이게 됩니다.

 

파라미터 설정 아래 봇 응답은 `스킬데이터 사용`으로 설정해주세요

 

---

 

이제 스킬 서버에서 처리할 차례입니다!

본인의 서버에 따라 구현 코드는 다르겠지만, 일반적으로 카카오 챗봇 콜백 응답 기능 로직은 다음과 같아요!

 

1. 사용자 메세지를 받아온다
2. 사용자 메세지에 따른 응답값을 받아온다.
    a. 5초 이상 소요시 
	    ① “잠시만 기다려주세요”와 같은 메세지가 담긴 callbackResponse를 보낸다
	    ② 결과값을 받아오면 callbackUrl에 결과값을 전송한다
    b. 5초 이내 소요시
	    ① 받아온 결과값을 바로 보낸다

 

 

그러니까

1. 사용자의 메세지에를 request.body로 받아오는데 그 안에 callbackUrl이 포함되어 있어요.

2. 5초 전에 응답값이 보내질 것 같지 않으면 (= 응답으로 보낼 메세지가 4초까지도 받아오지 않으면) response에 "잠시만 기다려주세요" 와 같은 메세지를 담아서 200번 코드로 보내고

그 이후에 응답으로 보낼 메세지를 받아오면 callbackUrl에 전송하는 거에요.

3. 5초 이전에 응답값을 보낼 수 있으면 (= 응답으로 보낼 메세지가 4초 이전에 받아오면) 200번 코드로 response에 보내줍니다.

 

(4초는 제가 임의로 정한 시간입니다. 5초가 타임아웃이니까 그 이전으로..)

 

 

 

저는 Node.js로 서버를 구현하고 있는데 모범답안은 아니라 참고용으로만 봐주세요

 

const userMessage = req.body.userRequest.utterance;
const callbackUrl = req.body.userRequest.callbackUrl;

    let result = "";

    const setTimeout = setTimeout(async () => {
        const callbackResponse = {
            "version": "2.0",
            "useCallback": true,
            "data": {
                "text": '답변을 입력중입니다 . . .'
            }
        };
        res.status(200).send(callbackResponse);
    }, 4000);

    try {
        result = await getBotMessage(userMessage);
        if (typeof result === 'string' && result.trim() !== '') {
            const template = {
                "version":"2.0",
                "template": {
                    "outputs": [
                        {
                            "simpleText": {
                                "text": result
                            }
                        }
                    ]
                }
            }
            res.status(200).send(template);
        }
       
        clearTimeout(setTimeout);
    } catch (error) {
        console.error("Error :", error)
    }

    if (result !== "") {
        await kakaoCallback(callbackUrl, result);
    }

 

 

여기서 참고하실 코드는

"잠시만 기다려주세요" 메세지를 보낼 때는 useCallback:true 파라미터 값을 보내주셔야 한다는 거고

그리고 타임아웃 이후에 callbackUrl로 보내는 코드는 아래처럼 작성할 수 있어요.

 

async function kakaoCallback(callbackUrl, result) {
    const responseBody = {
        version: "2.0",
        template: {
            outputs: [
                {
                    simpleText: {
                        text: result
                    }
                }
            ]
        }
    };
    axios.post(callbackUrl, responseBody)
        .then(() => console.log('callbackurl send successfully'))
        .catch((error) => console.error('callback url send error:', error));
}

 

그냥 저런 template이고 callbackUrl로 POST 보낸다 ! 정도로만 참고해주세용

자세한 메세지 전송 템플릿은 공식 개발 가이드에서 볼 수 있어요 !

https://kakaobusiness.gitbook.io/main/tool/chatbot/skill_guide/answer_json_format

응답 타입별 JSON 포맷 - kakao business 비즈니스 가이드

 

 

이렇게 개발 완료하면 테스트 해봐야하는데

콜백 기능은 아쉽게도 봇테스트에서 진행할 수 없대요.

그래서 테스트 채널에 연결해주거나 해주셔야 합니다..

 

 

---

 

위와 같이 서버 구현하다가 간혹 에러가 발생하는데요,,

https://kakaobusiness.gitbook.io/main/tool/chatbot/skill_guide/ai_chatbot_callback_guide#callbackresponse

AI 챗봇 콜백 개발 가이드 - kakao business 비즈니스 가이드

 

 

저는 두 개의 에러가 발생했었습니다.

Invalid callback token. Check your callback token.

The skill server settings are incorrect. Use callback true setting required.

 

 

첫번째 Invalid callback token. Check your callback token. 에러는 가이드에 이렇게 나와있는데요

callback token의 설정이 잘못되어 있는 상태로 아래 내용을 확인하여 주시기 바랍니다.

1. callback token의 기입이 잘못된 경우
2. callback token이 만료된 상태(1분이내 요청 필요)

 

callback token은 건들지 않으니 높은 확률로 1. 1분 이내에 요청이 안됐거나 2. 로직이 뭔가 잘못 된 경우 입니다.

저는 지금도 계속 로직을 수정중이라 위 에러가 나올 때 있고, 안 나올 때 있는데 

 

1번의 경우에는 58~9초에도 응답 메세지를 받아오지 못한다면 "죄송합니다 오류가 발생했습니다" 와 같은 메세지를 callbackUrl로 보내고 끝내는 방법이 있습니다.

콜백 응답도 `1분 이내 1건의 메세지` 라는 제한이 있어서 어쩔 수 없네요 🥲

 

2번의 경우에는 좀 짜치는 방법으로 무조건 callback 메세지를 보내고 원래 응답 메세지를 callbackurl로 보내는 방법이 있습니다.

무조건 callback 메세지를 보내는거라 

"안녕하세요" 보내도 "잠시만 기다려주세요" "안녕하세요 ! 무엇을 도와드릴까요?" 가 나와서 비추천하는 로직이긴합니다..😅

모범적으로 하려면 타임아웃 이전에 받아온 메세지를 잘 보냈는가, 타임아웃이 지나면 callback메세지를 보내고 callbackUrl로 메세지를 잘 보냈는가, 중복으로 같은 곳으로 보내지 않았는가 를 확인하시면 될 것 같습니다.

 

 

 

두번째 The skill server settings are incorrect. Use callback true setting required. 에러는 가이드에 이렇게 나와있습니다.

사용자의 스킬서버와 제대로 통신이 되지 않은 상태입니다.
usecallback true 처리가 되어 있는지 확인하여 주시기 바랍니다.

 

useCallback:true 보냈는데?

하시면.. 그냥 모든 곳에 해당 파라미터를 추가해 보내고 에러가 안난다면 여기를 빼먹었군.. 하시면 될 것 같습니다.

사실 저도 아직 헷갈리는데 위에 썼던 코드에서 파라미터를 추가하니 괜찮은 것 같았어요..

async function kakaoCallback(callbackUrl, result) {
    const responseBody = {
        version: "2.0",
        useCallback : true,
        template: {
            outputs: [
                {
                    simpleText: {
                        text: result
                    }
                }
            ]
        }
    };
    axios.post(callbackUrl, responseBody)
        .then(() => console.log('callbackurl send successfully'))
        .catch((error) => console.error('callback url send error:', error));
}

 

그런데 일반 응답 메세지에는 추가하면 안되는 것 같더라구요.

 

 

 

 

 

 

너무 구구절절 작성해봤는데.. 

미래의 나든 어느 누군가든 이 글을 보고 도움을 조금이라도 얻었으면 좋겠습니다 🥹