Содержание статьи
Бэкенд
Самое важное — интерактивность и налаженное взаимодействие между пользователями и стримером. Для этого нам понадобится хороший сервер.
У расширений Twitch такой сервер называется Extension Backend Service (EBS). В отличие от фронтенда, ответственность за непрерывную работу которого берет на себя Twitch, хостинг и размещение EBS стриминговым сервисом не обеспечивается — а значит, эту проблему нам нужно решать самостоятельно.
Бэк состоит из нескольких частей.
-
Общение с пользователями и верификация JWT. Twitch для каждого человека, который активирует расширение, генерирует уникальный токен JWT, подписанный секретным ключом. Это позволяет идентифицировать пользователя, не раскрывая его персональных данных, и отделять настоящих зрителей от ботов, спама и DDoS.
-
Обработка действий пользователей внутри расширения. Это может быть, например, подсчет голосов зрителей или работа с базой данных.
-
Взаимодействие с Twitch API и в первую очередь с PubSub — сервисом, который позволяет фронтенду и бэкенду общаться без задержек.
Здесь мы используем популярное и надежное решение — ExpressJS. Для хостинга бэкенда можно использовать любой сервис, даже собственный компьютер. Для небольших разработок нам пригодится сервис Heroku, который, помимо хостинга, предоставит удобоваримый URL.
Фронтенд
Фронтенд каждого расширения состоит из одного или нескольких экранов (view), они бывают разных типов и вместе составляют пользовательский интерфейс.
- Mobile extension — специальный блок, предназначенный для показа внутри официального приложения Twitch с помощью WebView.
- Video-overlay extension — виджет, который накладывается поверх всего видео (максимум на один стрим).
- Video-component extension — блок, который занимает лишь часть видеопотока. Стример может расположить его на свое усмотрение.
- Panel extension — полностью настраиваемая панель, которая отображается не поверх видео, а внизу, вместе с другими панелями.
Кроме различных view, предназначенных для зрителей, есть также два view для самого стримера, которые нужны для управления расширением.
- Live-config (Live Dashboard) — настройки, доступные в прямом эфире, прямо в дашборде — там же, где и все остальные самые необходимые элементы управления.
- Config (Configuration) — параметры, которые устанавливаются при инсталляции расширения (или в отдельном меню всех расширений).
На самом деле каждый из этих view — это не более чем специально оформленный тег <iframe> или отдельный WebView (для телефонов), который занимается отображением своего интерфейса и обработкой действий пользователя. Именно поэтому, чтобы упростить разработку фронтенда, мы используем React.
Разработка своего расширения
Теперь давай я на примере покажу, как написать основу для собственного расширения. Пусть это будет онлайновое голосование с обновлением голосов в реальном времени.
Упростить разработку расширений для Twitch помогает специальное приложение, которое работает в Windows, macOS или Linux. Оно называется Twitch Developer Rig и нужно исключительно для создания и тестирования расширений.
Продолжение доступно только участникам
Вариант 1. Присоединись к сообществу «Xakep.ru», чтобы читать все материалы на сайте
Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», позволит скачивать выпуски в PDF, отключит рекламу на сайте и увеличит личную накопительную скидку! Подробнее
Вариант 2. Открой один материал
Заинтересовала статья, но нет возможности стать членом клуба «Xakep.ru»? Тогда этот вариант для тебя! Обрати внимание: этот способ подходит только для статей, опубликованных более двух месяцев назад.
Я уже участник «Xakep.ru»
