Счётчик зрителей

streamvi-plugin-counter показывает виджет на React, TypeScript и Vite. Страница настроек изменяет оформление, а отдельная страница /obs показывает число зрителей по каналам и общий итог. Изменения трансляции и шаблона приходят через Centrifugo.

Подготовка

Нужны Git, npm и поддерживаемая версия Node.js из диапазона engines в package.json примера. Создайте приложение типа «Виджет», установите его в учебный проект и создайте шаблон по инструкции виджета. Там же показаны URL приложения и открытие настроек шаблона.

Пример читает информацию о проекте (project:read), трансляцию (broadcast:read), сохранённый шаблон (integration:read) и получает токены WebSocket (centrifuge:read). Эти права нужны конкретным операциям примера; integration:read не является общим требованием для создания любого плагина.

Локальный запуск

git clone https://github.com/StreamVi/streamvi-plugin-counter.git
cd streamvi-plugin-counter
npm install

Создайте .env.local. Для подключения к production StreamVi используйте:

PORT=5511
VITE_STREAMVI_API_HOST=https://api-v2.streamvi.io
VITE_CENTRIFUGO_HOST=wss://events.streamvi.io

В .env.example репозитория указаны локальные серверы API и Centrifugo. Они не запускаются командой Vite; замените адреса, если таких серверов у вас нет. К WebSocket-хосту пример сам добавляет /connection/websocket.

npm run dev

Страница настроек доступна на http://localhost:5511/, отображение для OBS на http://localhost:5511/obs. Обе используют template_id и token в query-параметрах. Это ID шаблона и API-токен установки из параметров запуска виджета, а не секрет приложения и не токен обмена сообщениями iframe. Не публикуйте полную ссылку с токеном.

При открытии из production-кабинета размещайте страницу на доступном ему HTTPS-адресе. Локальный HTTP-адрес предназначен для локальной проверки; его встраивание в HTTPS-страницу может блокироваться браузером. Открытие / напрямую с параметрами не создаёт обмен с кабинетом и не сохраняет настройки шаблона само по себе.

Как устроен пример

Файл или каталог	Назначение
App.tsx	Выбор страницы настроек или `/obs`
settings/	Предпросмотр, оформление и ссылка для OBS
useCabinetBridge.ts	Сообщения `init`, `ready`, `sync`, `update` для шаблона
client.ts	HTTP-запросы с API-токеном в параметре `widget`
useViewerWidget.ts	Состояние трансляции, список каналов, сумма зрителей
realtime/	Подключение и подписки Centrifugo

Данные оформления хранятся в payload шаблона. Обмен с кабинетом описан в протоколе виджета. Отправка update не является отдельным подтверждением сохранения: после изменения проверьте результат повторным открытием шаблона.

Обновления в реальном времени

Сначала HTTP-запросы загружают шаблон, проект, состояние трансляции и каналы. Для соединения пример получает отдельный токен через /method/centrifuge/auth/connect?v=1. Для закрытых подписок используются токены /method/centrifuge/auth/channel?v=1 с channel_name.

Подписка	Для чего используется в примере
`project#PROJECT_ID`	Начало и окончание трансляции
`$broadcast:BROADCAST_ID`	Изменение зрителей и состава ретрансляций
`$widget_template:TEMPLATE_ID`	Изменение данных шаблона

Токен API, токен соединения и токен подписки выполняют разные задачи. Успешный HTTP-запрос не подтверждает подключение WebSocket. Если число зрителей перестало обновляться, отдельно проверяйте HTTP-ответы, состояние соединения и подписку на нужную трансляцию. Форматы методов сверяйте со справочником API.

В payload предусмотрен testMode: он показывает сгенерированные значения для проверки оформления. Это не реальные зрители и не полностью автономный режим: загрузка шаблона и подключение к событиям остаются частью работы примера. В обычном режиме учитывайте состояния загрузки, ошибки и отсутствия эфира.

Перед использованием своего варианта

Сохраняйте закреплённую в репозитории зависимость @streamvi/streamvi-ui. Новый UI Kit использует другой API и требует миграции.

В примере токен установки попадает в ссылку OBS, а обработчик сообщений проверяет форму данных, но не ограничивает отправителя до их принятия. Для собственного приложения примените проверку event.origin и event.source из примера виджета. Проверяйте подпись запуска на сервере и используйте отдельный ограниченный доступ для публичного отображения, как описано в использовании OBS. Серверного хранения токена и такой проверки подписи в этом React-примере нет.

Сборка выполняется через npm run build. Она проверяет TypeScript и создаёт статические файлы; не создаёт приложение StreamVi, доступ к проекту или шаблон.