프론트엔드 polling

[yj0524]

프론트엔드 polling

[yj0524]

답변 감사합니다! polling / reconnect가 정상적으로 작동하는 것을 확인했습니다. 항상 감사드립니다.

[kimcore]

#6 이슈에서 추가된 기능을 활용하시면 됩니다. 치지직 API로 연결되는 프록시 서버를 여신 후,
ChzzkClient 혹은 ChzzkChat을 생성하실 때 #6 (comment) 코드처럼 baseUrls 지정을 해주시면
프론트엔드에서 해당 프록시 서버로 요청을 보내게 됩니다.

[yj0524]

그러면 혹시 accessToken이 어디에 사용되는지 알 수 있을까요?

[kimcore]

accessToken은 채팅 전송을 위해 인증할 때만 사용되고, 채팅 전송을 사용하지 않을 경우 accessToken을 빈 문자열로 설정해도 문제없이 작동하는 것으로 확인됩니다만
치지직 공식 사이트는 비로그인시에도 accessToken을 발급받기에 chzzk 라이브러리 또한 polling을 사용할 때 accessToken을 발급받도록 되어있습니다.

[yj0524]

잘 되는 줄 알았더니, 페이지를 새로고침해서 되었던 것 같습니다.

...
        const options = {
            baseUrls: {
                chzzkBaseUrl: "<사이트 URL (작동 확인 됨)>/api/proxy/chzzkBase",
                gameBaseUrl: "<사이트 URL (작동 확인 됨)>/api/proxy/gameBase"
            }
        };

        const client = new ChzzkClient(options);

        let liveDetail = await client.live.detail(channel);
        let liveStatus = await client.live.status(channel);

        if (liveStatus?.chatChannelId === undefined) {
            console.log(`Failed to connect to ${channel}`);
            document.getElementById("notice").innerHTML = "채널이 존재하지 않습니다.";
        }

        else {
            const chzzkChat = client.chat({
                ...options,
                channelId: channel,
                pollInterval: 1000 * 10,
                accessToken: await client.chat.accessToken(liveStatus.chatChannelId)
            });
...

위 코드를 사용하였는데 되지 않는 것 같습니다. 혹시 제가 잘못 사용한 부분이 있는지요?

[kimcore]

polling 사용하실 때는 accessToken 없이 channelId만 넘겨주셔도 됩니다! ChzzkChat 내부에서 알아서 accessToken을 발급하도록 되어있습니다.
추가로 ChzzkClient에 baseUrls를 설정하셨다면 해당 ChzzkClient를 통해 생성한 ChzzkChat에도 동일한 baseUrls가 적용되기에 ...options 부분도 제거해주셔도 됩니다.

const chzzkChat = client.chat({
    channelId: channel,
    pollInterval: 1000 * 10
})

위와는 별개로, 현재 사용하시는 코드로도 polling이 작동해야 하는 것이 정상입니다.
한번 브라우저 개발자 도구에서 네트워크 탭을 확인하셔서 polling이 작동하는지 확인해보시겠어요?

[yj0524]

모두 10초마다 정상적으로 live-status를 polling하고 있습니다.

[kimcore]

reconnect 이벤트가 발생하는지 여부도 확인해주시겠어요?

chzzkChat.on("reconnect", newChatChannelId => {
    console.log(`Reconnected to ${newChatChannelId}`)
})

[yj0524]

이미 아래 코드를 삽입하여 제가 아는 거의 모든 방송에 테스트해보았지만 한 군데도 뜨지 않았습니다.

chzzkChat.on('reconnect', chatChannelId => {
    console.log(`Reconnected to ${liveDetail.channel.channelName} (${chatChannelId})`);
});

[yj0524]

가끔씩 되는 것으로 보아, "Not connected"라는 오류가 가끔 뜨면 되지 않는 것으로 보입니다.

[yj0524]

Not connect라는 오류가 없어도 안 되는 것 같습니다. 진짜 무슨 문제인지 모르겠네요.

[yj0524]

Not connected라는 오류가 없으면 잘 작동합니다! 위 comment로 혼동을 드려 죄송합니다.

[yj0524]

[yj0524]

Not connected 문제 외에는 아무 문제가 없어 이슈 닫겠습니다.
다시 한번 혼동을 드려 죄송합니다.
항상 감사드립니다.