반응형
SOOP 종겜핀볼 도우미에 이어서 이번엔 투표 도우미를 만들어 보았다. 블루점프 반장선거 콘텐츠 이야기에서 아이디어가 떠올랐다. 숲 자체 투표 기능은 실시간 확인도 안 되고 그 방 시청자들만 대상으로만 가능해서, 어느 방에서든 투표할 수 있으면 좋겠다 싶어서 만들었다.
연결한 채팅방에서 "!투표 [키]"로 채팅을 치면 투표에 반영된다. 그리고 방송에 오버레이로 띄울 수 있도록 별도 브라우저 소스로 띄우는 기능을 만들었다. 오버레이 기능을 위해 IPC 통신 대신 fastify로 웹서버를 띄워서 api 통신을 하는 구조가 되었다.
이번엔 대량의 채팅 데이터를 처리해야 하다 보니 SQLite를 도입했다. nodejs에 내장 기능으로 sqlite가 추가되었는데 fastify 플러그인 중엔 아직 이걸 활용하는 플러그인이 없고, 이미 존재하는 sqlite 플러그인은 네이티브 모듈이라 일렉트론 패키징할 때 약간 애로사항이 있어서 GPT를 시켜서 간단하게 fastify-node-sqlite 플러그인을 만들었다.
sql 데이터에서 집계 결과를 뽑아내는 것도 gpt한테 물어보니까 나는 엄두도 안 나는 복잡한 sql 문을 잘 뽑아줬다.
리포지토리: https://github.com/joyfuI/soop-vote-helper
다운로드: https://github.com/joyfuI/soop-vote-helper/releases/tag/release
사용법
설정탭을 엽니다.SOOP ID 연결에 채팅을 읽을 스트리머의 SOOP ID를 추가하고 재생 버튼을 눌러 연결합니다.투표 항목에 투표 키, 항목명, 차트 컬러를 등록합니다.- 예: 키가
1, 항목명이A팀이면 시청자는!투표 1로 투표합니다.
- 예: 키가
집계 시작을 누르면 연결된 채팅방의 채팅을 읽어 투표 집계가 시작됩니다.투표탭에서 실시간 결과를 확인합니다.오버레이탭에서 원하는 화면에 마우스를 올리고 URL을 복사해 OBS 또는 프릭샷의 브라우저 소스에 추가합니다.
사용하는 모습 (임의로 랜덤 투표 데이터가 들어오도록 세팅한 뒤 찍음)

반응형
'프로그래밍 > React' 카테고리의 다른 글
| [자작] SOOP 종겜핀볼 도우미 (0) | 2026.05.02 |
|---|---|
| [자작] SOOP 시청자 역스코프 프로그램 (0) | 2026.04.19 |
| [자작] S3 파일 브라우저 (0) | 2025.08.30 |
| CRA 없이 React 개발환경 구축하기 (Snowpack편) (0) | 2022.05.08 |
| CRA 없이 React 개발환경 구축하기 (Rollup편) (0) | 2022.03.05 |
| 스토리북에서 CSS Modules 사용하기 (0) | 2022.02.05 |
| CRA 없이 React 개발환경 구축하기 (Parcel편) (0) | 2022.01.22 |
| We no longer support global installation of Create React App 오류 해결법 (0) | 2022.01.05 |


