Создаём свой оверлей DonationAlerts

Если вы уже знаете, что такое DonationAlerts, прыгайте в следующий абзац.

Вкратце, DonationAlerts — это сервис позволяющий отправлять в стрим на YouTube или Twitch сообщения за денюжку, которые показываются поверх стрима и проговариваются ботом.

Оверлей DonationAlerts выглядит так:

Эта веб-страница вставляется в стрим и зелёный фон вырезается. (Картинку можно менять)
Мне оверлей не понравился и я начал перерывать их сайт в поисках API, чтобы сделать свой.
Когда я понял что API нет, я написал в поддержку, и… они ответили с подробной «документацией».

Их сайт использует для коммуникации библиотеку Socket.IO ^[1].

Для примера я накидал быстрый скрипт:

var socket = io("socket.donationalerts.ru:3001");
socket.emit('add-user', {token: "Ваш токен (содержится в URL каждого виджета)", type: "minor"});
socket.on('donation', function(msg){
  // Ваша функция, обрабатывающая донат
});

Давайте его разберём.

var socket = io("socket.donationalerts.ru:3001");

— подключается к сокету

socket.emit('add-user', {token: "Ваш токен (содержится в URL каждого виджета)", type: "minor"});

— отправляет данные, нужные для получения уведомлений

socket.on('donation', function(msg){
  // Ваша функция, обрабатывающая донат
});

— получает информацию о донате, суёт переменную:

{
	"id": "24335622",
	"alert_type": "1",
	"additional_data": "{"randomness":517}",
	"username": "Имя",
	"amount": "50.00",
	"amount_formatted": "50",
	"amount_main": "50.00",
	"currency": "RUB",
	"message": "Сообщение",
	"date_paid": "2017-06-01 11:46:56",
	"emotes": null,
	"_is_test_alert": true
}

→ Демо на Plnkr ^[2]

Спасибо, что прочитали! Извиняюсь, если что-то непонятно объяснил, у меня с изложением мыслей проблемы.

Автор: призывник

Источник ^[3]