Javascript 로 Twitch API 접근하여 Stream 정보 얻기
Posted 2017. 9. 29. 20:55, Filed under: 개발/JavaScript아래에는 제목 그대로 Javascript 로 Twitch API에 접근하여 Stream 정보 얻는 법을 간단히 정리해보았다.
Client-ID 발급받기
Twitch API 접근하기 위해서는 반드시 Client-ID 라고 불리는 일종의 고유 코드를 발급받아야 한다. 단순히 API에 접근하여 어떤 스트림이 Online, Offline 인지 여부만 확인하고 싶은 정도라도 해당 코드의 발급을 필요로한다.
트위치에 로그인 한 후 아래의 이미지처럼 설정-연결 에 접속한다. (https://www.twitch.tv/settings/connections)
페이지를 맨 아래로 스크롤하면 개발자 커스텀 애플리케이션 이라는 란이 있다. 아마 기존에 등록한 애플리케이션이 없는 경우 앱 리스트는 공란으로 되어 있고 어플리케이션 등록 버튼만 보일텐데, 해당 버튼을 클릭한다.
적당히 입력한다. Name 의 경우 원하는 이름을 입력해주면 되고, Redirection URL 의 경우 단순히 익명으로 스트림 권한만 읽어오길 원하는 경우에는 정확히 입력해 줄 필요가 없다. 그 이외에 것들에 대해서는 적당히 선택한다.
해당 과정을 완료하면 Client-ID 를 발급받을 수 있다.
Client-ID는 공개되어도 상관 없는 정보이므로 소스코드가 노출되는 Javascript 코드에 삽입하여도 무방하다. 실제로 다수의 Twitch 관련 Browser extension 의 코드를 뜯어봤는데, 별도의 파싱서버 또는 캐싱서버 없이 소스코드 내에 Client-ID 를 포함하고 있었다.
Javascript code
원래 스트림이 온라인인지를 확인하기 위한 간단한 예제 코드를 직접 작성하려고 했는데, 2017년 9월 기준으로 잘 작동하는 적당한 예제를 찾아서 소개한다. 핵심은 ajax call 하는 부분이며 그 외에 별 다른 것은 없다.
https://codepen.io/flem/pen/zBvoYo
다만 위 코드에서 수정되어야 하는 부분이 있다. 트위치 개발자 포럼을 확인하면 최소 호출 간격에 대한 명확한 기준은 없지만, 1초에 1번 이상 API를 호출하지 말라는 것이 권장사항이라고 한다. 하지만 위 코드를 보면 배열인 arr의 요소들 각각에 대해 API 를 따로따로 호출하게 되는데, 그 결과로 매우 짧은 순간동안 많은 API 호출을 하게 된다.
따라서 이 경우에는 arr[i] 대신 "id1,id2,id3,id4" 와 같이 Streamer ID 를 콤마(,) 구분자로 나열한 것을 사용하면 단 한 번의 API 호출만으로도 현재 online 인 stream 의 정보들을 object array 형태로 리턴받을 수 있다.
다만 이 경우 현재 offline인 채널의 정보는 아예 주지 않으므로 offline 인 채널의 display name 등은 알 수 없다. 만약 offline 인 채널의 정보도 얻고 싶은 경우에는 위 코드처럼 offline 인 채널 각각에 대하여 호출하여야 한다. 현재까지는 짧은 간격으로 잦은 호출을 하더라도 정상적인 경우라면 막히지는 않는 것 같지만 혹시 모른다.
