ДИСКЛЕЙМЕР:
Я не программист, а лишь энтузиаст-копипастер, который делится тем, в чем смог разобраться. Не исключено, что знающие специалисты некоторые моменты или формулировки могут счесть ошибочными или нелепыми.
Данный материал служит исключительно для ознакомительных целей.
Наглядное пособие по тому, как подключаться к чатам на площадке ViewHub и получать оттуда все события (follow, unfollow, donation, current viewers). Может, кому пригодится для создания самодельных виджетов или мультичата.
Как Пользоваться
Представленный пример собран на javascript, поэтому потребуются установленные в системе node.js
и npm
.
Для подключения к вебсокету чата, нужно будет дополнительно установить пакет WS, находясь в одной директории со скриптом:
npm i ws
User Id
К сожалению, я не смог найти простого способа извлечь user_id
, который требуется для подключения к нужному чату. Все мои попытки сделать это через fetch
возвращали ошибку с кодом 403 (Forbidden).
Поэтому это придется сделать вручную. Подставьте название канала в
https://vh.live/api/v2/profile/<название_канала>
И перейдите по образованной ссылке.
Первая же строчка под data -> id – это и есть тот самый user_id.
Чат-логгер
Помимо обычных текстовых сообщений от пользователей, также регистрируются события о подписках/отписках, донатах (только сумма, без валюты), а также, с определенным интервалом приходит количество текущих зрителей.
▶ viewhub.js (нажмите, чтобы раскрыть блок с кодом)
const WebSocket = require("ws");
let user_id = "";
///WS
function vhConnect() {
const viewhub = new WebSocket(
"wss://realtime.vh.live/connection/websocket"
);
//Open WS-connection
viewhub.on("open", function open() {
viewhub.send(
JSON.stringify(
{"connect":{"name":"js"},"id":1}
)
);
viewhub.send(
JSON.stringify(
{"subscribe":{"channel":`user_id:${user_id}`},"id":2}
)
);
console.log("Connected to ViewHub");
});
//Add Listener
viewhub.addEventListener('message', function (event) {
try {
let res = JSON.parse(event.data)
/// PING PONG EXCHANGE
if (event.data === JSON.stringify({})) {
return viewhub.send(JSON.stringify({}));
}
let username = res.push?.pub.data.data.username;
let msg = res.push?.pub.data.data.msg;
let sum = res.push?.pub.data.data.sum;
let viewers = res.push?.pub.data.data.viewers;
///CHAT LOG
if (res.push?.pub.data.data.type === 'msg'){
console.log(`${username}: ${msg}`);
}
//VIEWERS
if (res.push?.pub.data.cmd === 'stream.viewers'){
console.log(`Current Viewers: ${viewers}`);
}
///FOLLOW
if (res.push?.pub.data.data.type === 'subscribe'){
console.log(`${username} is now following!`);
}
///UNFOLLOW
if (res.push?.pub.data.data.type === 'unsubscribe'){
console.log(`${username} unfollowed`);
}
///DONATION
if (res.push?.pub.data.data.type === 'donate'){
console.log(`${username} donated ${sum} USD and said: ${msg}`);
}
} catch (error) {
if (error.toString().includes("SyntaxError: Unexpected token")){
return;
}
return console.log(error);
}
});
//On error
viewhub.on("error", console.error);
//On close
viewhub.on("close", (reason) => {
console.log(`Disconnected from ViewHub with code ${reason}`);
viewhub.close()
console.log("Trying to reconnect..")
vhConnect();
});
}
vhConnect();
Если этот материал вам пригодился и у вас есть возможность,
то поддержите автора и сайт небольшим донатом:
Спасибо💛