Skip to content

Latest commit

 

History

History
99 lines (69 loc) · 4.53 KB

File metadata and controls

99 lines (69 loc) · 4.53 KB

Chatmeter — Статистика чата Twitch

Метрики вовлечённости чата в реальном времени — в виде расширения Chrome, которое встраивает статистику прямо в Twitch, и отдельного веб-приложения.

Авторизация в Twitch не нужна. Подключается анонимно через IRC WebSocket.

Демо: dev.ezzha.ru/chatmeter  |  🇬🇧 Read in English


Что показывает

Метрика Описание
💬 Сообщения Всего сообщений с момента открытия стрима
⚡ Скорость Сообщений в минуту (последние 60 с)
👥 Активных Уникальных чаттеров за последние 5 минут
Уникальных Всего уникальных чаттеров
Вовлечённых Чаттеры с ≥ 3 сообщениями
Пик Максимальная скорость за сессию
Топ чаттеры Топ 25 по количеству сообщений
Команды % сообщений, начинающихся с !
Только эмоуты % сообщений только из эмоутов (Twitch + 7TV + BTTV + FFZ)

Расширение Chrome

Встраивает бейдж со статистикой прямо в шапку Twitch — работает на обычных стримах и в режиме модератора.

💬 1 204    47/м   👥 312

При наведении на бейдж открывается попап с подробной статистикой и топ-10 чаттеров.

Установка

  1. Клонировать репозиторий
  2. Открыть chrome://extensions/
  3. Включить Режим разработчика
  4. Нажать Загрузить распакованное → выбрать папку с репозиторием
  5. Открыть любой стрим на Twitch

Веб-приложение

Полноценный дашборд с графиками скорости и активности, карточками статистики, топом чаттеров, фильтром ботов и лентой чата в реальном времени.

mise run serve   # запускает Docker-контейнер, при первом запуске копирует конфиг
mise run stop    # остановить

Открыть http://localhost:8080, ввести имя канала, нажать Connect.

Чтобы изменить порт — отредактировать docker-compose.yml перед запуском.


Разработка

mise run install       # установить dev-зависимости
mise run test          # запустить тесты
mise run test:watch    # watch-режим

После изменений в файлах расширения — перезагрузить его на chrome://extensions/.


Структура проекта

chatmeter/
├── core/
   └── ChatStatsEngine.js   # Общий IRC-движок (расширение + веб-приложение)
├── extension/
   ├── content.js           # Встройка в DOM Twitch
   └── styles.css
├── webapp/
   ├── index.html
   ├── app.js
   └── nginx.conf
├── tests/
   └── ChatStatsEngine.test.js
├── manifest.json                  # Манифест расширения Chrome (MV3)
└── docker-compose.example.yml

Как работает

ChatStatsEngine открывает анонимный WebSocket на wss://irc-ws.chat.twitch.tv под ником justinfan, запрашивает IRCv3-теги, заходит в канал и парсит строки PRIVMSG + ROOMSTATE. Статистика пересчитывается на каждом сообщении и отдаётся через простой event emitter. При потере соединения — переподключение с экспоненциальной задержкой.

Сторонние эмоуты (7TV, BTTV, FFZ) загружаются через публичные API по room-id канала из ROOMSTATE.