Twitch Extensions. Пишем свое расширение для взаимодействия со зрителями

Содержание статьи

• Бэкенд
• Фронтенд
• Разработка своего расширения
• Developer Rig
• Фронт
• Бэк
• Развертывание и публикация расширения
• Выводы

Два года назад разработчики стриминговой платформы Twitch представили новый способ взаимодействия стримеров и зрителей — Twitch Extensions. Эта система позволяет разработчикам дополнять и улучшать интерфейс как сайта, так и мобильного приложения, создавая различные интерактивные элементы. Я расскажу, как работают эти расширения и как при желании создать свое.

Бэкенд

Самое важное — интерактивность и налаженное взаимодействие между пользователями и стримером. Для этого нам понадобится хороший сервер.

У расширений Twitch такой сервер называется Extension Backend Service (EBS). В отличие от фронтенда, ответственность за непрерывную работу которого берет на себя Twitch, хостинг и размещение EBS стриминговым сервисом не обеспечивается — а значит, эту проблему нам нужно решать самостоятельно.

Бэк состоит из нескольких частей.

1. Общение с пользователями и верификация JWT. Twitch для каждого человека, который активирует расширение, генерирует уникальный токен JWT, подписанный секретным ключом. Это позволяет идентифицировать пользователя, не раскрывая его персональных данных, и отделять настоящих зрителей от ботов, спама и DDoS.

2. Обработка действий пользователей внутри расширения. Это может быть, например, подсчет голосов зрителей или работа с базой данных.

3. Взаимодействие с 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 и нужно исключительно для создания и тестирования расширений.

Продолжение доступно только участникам

Материалы из последних выпусков становятся доступны по отдельности только через два месяца после публикации. Чтобы продолжить чтение, необходимо стать участником сообщества «Xakep.ru».

Присоединяйся к сообществу «Xakep.ru»!

Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», увеличит личную накопительную скидку и позволит накапливать профессиональный рейтинг Xakep Score! Подробнее

Я уже участник «Xakep.ru»

Источник