widget

Начало работы с виджетами

О статье

Этот раздел создан чисто под разработку виджетов.
В большинстве своем будем говорить про Twitch на основе StreamElements, но то же самое можно реализовать и на других платформах - будь то самописный сервис или условный Streamer.bot.

Касательно Streamer.bot - было бы желание у стримеров, я бы их туда и пересадил. Это буквально сервис с безграничными возможностями, который разворачивается у тебя на компьютере и ест ресурсов по минимуму.

Что нужно для самого начала?

Для того, чтобы понимать, как именно разработать свой виджет, нужно знать хотя бы какую-никакую да базу верстки (HTML, JS, CSS для написания логики и воплощения дизайна), JSON (для создания конфигурационных файлов) и английского языка (переводчик не поможет).
Без этого ничего не получится. Если у вас не хватит сил своих лапок - можете обратиться к знающим кодерам за помощью или уже полноценным заказом.

К кому можно обратиться:

• An1by
• [здесь могла быть ваша реклама]

Обладаем нужными знаниями? Прекрасно, идем учить мат.часть!

1. Если вы вообще не в курсе, как создавать хоть какие-то виджеты - для этого есть отдельный гайд.
2. Знаем основу, значит переходим к изучению документации по виджетам - одной из самых полезных страниц с ярким примером разработки виджета со взаимодействием SE_API.
   Получаем простое понимание о том, что такое SE_API и с чем его едят. А также обрабатываем информацию своего первого виджета.
3. Нам не должно хватить того примера, что у нас есть. Поэтому для получения информации о других ивентах мы идем на следующую страничку.
   Далее от этого можно вертеться.

Также рекомендую сразу импортировать JQuery в свой проект. Довольствуемся тем, что есть, так сказать.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Нюансы по работе со StreamElements

Недостаток "шаблонной" информации

С опытом разработки вы начнете осознавать, что выход с ивентов может быть абсолютно разный, а он не описан в документации у StreamElements. Допустим, нужно будет узнать, как детектить роль пользователя: стример, випер, художник, сабкер или простой люд он.

Для этого существует простой console.log(event) и ваш личный Twitch-аккаунт.

Да, лучше быть и стримером, и кодером, чтобы иметь представлением о большем количестве подводных камней.

Комфорт клиента и картинки

Чтобы пользователю не пришлось догружать какие-то картинки, а вам танцевать с бубном для их вытягивания через SE_API, придется потанцевать с Base64.

Я обычно использую этот сайт для конвертации PNG в data-Base64 формат, а после просто вставляю в код через условный <script/> в HTML, чтобы у меня IDE каждый раз не помирала от изменений в JS-файле.

Ограничения по размеру

Максимальный размер отправляемого запроса на StreamElements - 1МБ.
Сюда входит вся информация со вкладок (HTML, CSS, JS, DATA, FIELDS) + передаваемые метаданные.

Хотите грузить что-то более крупное - используйте другие виджеты, которые можно совмещать в одном оверлее. Или конвертируйте в WEBP с возможной потерей качества.

API от StreamElements можно использовать вне сервиса

Как оказывается, для того, чтобы читать события, которые может отправлять StreamElements, необязательно даже ужиматься в 5 файликов и оставлять свой виджет на их серверах.

Для использования их API достаточно подключиться к WebSocket'у. Формат сообщений отличается от того, что мы получаем в ивентах виджета, но это вообще не критично.

Зато можно будет не париться и выстраивать адекватную архитектуру проекта без ограничений по размеру, танцев с бубнами по конвертации элементов в base64, а также ручной загрузке каких-то файлов пользователем виджета.