Twitch Plays 모여봐요 동물의 숲 개발 일기 ② - Chatbox 에 이모티콘 적용, 서버 시간 및 UPTIME 달기

Posted 2020. 2. 17. 04:42, Filed under: 개발

본 글은 [Twitch Plays 모여봐요 동물의 숲 개발 일기 ① - 장면 틀 만들기] 에서 이어지는 글이다.

Chatbox 수정

이전 글에서 직접 만든 Chatbox 는 받아온 메시지의 내용만을 다시 바로 뿌려주는 구조라서 이모티콘 등을 표시할 수 없었다. 이것을 더 보기좋게 고쳐보자고 마음먹고 작업을 시작했다.

가장 먼저 이모티콘의 표시를 도와줄 적당한 라이브러리를 찾아봤다. 처음에는 twitch-emoticon 을 사용하여 이모티콘을 표시하려고 했는데, 이유는 기본 Twitch 의 이모티콘을 비롯하여 BTTV, FFZ 와 같은 서드파티 이모티콘까지 한 번에 보여줄 수 있다는 것이 매력적으로 느껴져서이다. 그런데 직접 적용해보니 Twitch Emotes API 를 이용하는데, 버전이 v4 가 아닌 deprecated 된 v3 버전을 쓰고있어서 오류가 발생했다. 오류가 발생한 코드를 들여다보다 간단히 직접 짜는 것이 빠를 것 같아 다른 방법을 찾아봤다.

일단 IRC 에서 받아오는 Twitch chat 의 내용은 아래와 같이 생겼다.

여러가지 정보가 있는데, 그 중 이모티콘에 대한 정보는 emotes 에 담겨있다. 먼저, 채팅에 삽입된 이모티콘의 종류에 따라 "/" 문자로 구분된다. : 앞의 숫자는 각 이모티콘의 고유한 id 이다. : 뒤의 0-12 와 같은 숫자는 message 에서 해당 이모티콘을 나타내는 글자(code) 의 시작문자열-끝문자열 숫자을 의미한다.

즉 위 그림에서 1833318, 1833330, 1944784 는 해당 이모티콘의 고유한 id 이다. 1833318 의 경우, message 의 0-12 에 해당하는 문자열에 해당하는 이모티콘의 id 이므로 OWL2019Tracer 가 1833318 을 나타내는 code 가 될 것이다. 따라서 이미 받아온 정보에 이모티콘 표시를 위한 모든 정보가 담겨있으므로 별도로 Twitch Emotes API 를 호출할 필요는 없었다.

위와 같은 구조를 가진 message 내의 emotes 를 파싱하여 replace 하기 위한 코드를 찾아보니 역시나 있었다.

https://github.com/tmijs/tmi.js/issues/11#issuecomment-116459845

위 링크의 코드를 copy & pates 하고, color 를 입힌 displace_name 를 추가하여 아래와 같이 만들 수 있었다.