wizebot chat history

Почему этот скрипт Wizebot-Chat-History?

Я стример на платформе Twitch.

Чтобы отобразить чат в OBS, мы можем использовать наложение WizeBot Виджета. Это позволяет нам иметь другой чат, наслаждаясь эффектами и функциями от Wizebot.
Однако при использовании некоторых сцен в OBS с различными конфигурациями чата для каждой сцены история чата теряется.

Цель этого сценария - поддерживать эту историю и убедиться, что она доступна, даже если мы не потопив.

Как подготовить свой Almalinux 9.3 или 9.4

Подключитесь к SSH с корневой или аналогичной учетной записью на вашем Almalinux:

dnf install epel-release

dnf module enable nodejs:20

dnf install nodejs -y

dnf install chromium -y

dnf install git -y

node -v

Установите сценарий

С вашей сеансом SSH:

cd /var

mkdir nodejs

cd nodejs

git clone https://github.com/AlexiaGossa/wizebot-chat-history

cd wizebot-chat-history

npm i puppeteer

npm install puppeteer-core

npm install -g npm

Как использовать сценарий

1. Перейдите на свою панель администратора Wizebot.tv

2. Открытые виджеты (наложения)

3. Откройте виджет чатбот

4. Создать новый виджет

5. Выберите шаблон чистой (справа)

6. Импортируйте следующий HTML -код в HTML -часть WizeBot:

 < link href =" https://fonts.googleapis.com/css?family=Inter " rel =" stylesheet " >

< div class =" template message_div animated fadeIn " >
    < div >
        < div class =" sticker " style =" background-color:{user_color}; " > </ div >
        < div class =" time " > {message_time} </ div >
        < div class =" badges " > </ div >
        < div class =" nicksimple " > {user_display_name} </ div >
        < div class =" nick " > </ div >
        < div class =" left " > </ div >
        < div class =" message " msgtype =" {message_type} " > </ div >
    </ div >
</ div >
< div id =" messagescontainer " >
< div id =" messages " dir =" ltr " > </ div >
</ div > 

<!-- Horizontal order : dir="ltr" = Left to right / dir="rtl" = Right to left -->
<!-- TAGs available : {user_name} {user_display_name} {user_name_full} (Display name + Username) {user_color} {user_invert_color} (For background ?) {user_badges} {message_text} {message_time} {message_type} {message_color} (For announcement type) -->

7. Очистить код CSS в части WizeBot CSS

8. Измените имя канала в коде JavaScript в части Wizebot JavaScript на имя вашего канала

   Для моего канала Twitch я использую: var channel_name = "alexia_vassiliki";

9. Нажмите «Скопировать ссылку» в верхней части веб -страницы Wizebot

10. С помощью вашего сеанса SSH откройте Wizebot-Url.txt с Nano nano wizebot-url.txt и вставьте ссылку в Nano.

Настройте дизайн

Теперь вы можете изменить файл CSS с именем wizebot inject.css, чтобы применить свой собственный дизайн.

Не забудьте перезапустить сценарий Nodejs после каждой модификации.

Запустите сценарий

Настройте порты брандмауэра / открыть

Откройте 1 или 2 порта TCP в вашей системе:

8080 для http

8443 для HTTPS, если вы предоставите несколько сертификатов

Хотите немедленно проверить сценарий?

Вы хотите сейчас выполнить скрипт проживания Wizebot-Chat?

Запустите команду: node wizebot-node.js

Вы увидите следующий текст:

 HTTP server started
Running...

Нажмите Ctrl+C, чтобы остановить сценарий.

Установите и запустите скрипт с системой

С вашей сеансом SSH:

chmod +x wizebot-run.sh

Мы добавляем скрипт в Cron в запуске, эта команда редактирует Cron с Vim:

crontab -e

И добавление следующей строки в крон

@reboot sh /var/nodejs/wizebot-chat-history/wizebot-run.sh > /var/nodejs/wizebot-chat-history/wizebot-run.log

Примечание. Если вы предпочитаете редактировать Cron с нано вместо Vim

export VISUAL=nano

Или повторно выбрать Vim

export VISUAL=vim

Параметры URL истории Wizebot

Мы предполагаем, что сценарий работает на системе с использованием IP 192.168.1.126 и используя порт HTTP 8080.

---

Базовый дисплей

> http: // 192.168.1.126:8080/

---

Ясная история немедленно

История немедленно очищена. Все открытые веб -страницы должны быть перезагружены.

Откройте новую вкладку браузера и вставьте следующий URL.
> http: // 192.168.1.126:8080/?reset

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

Эта функция очень полезна перед началом нового живого потока, чтобы очистить все предыдущие сообщения.

---

Показать плоский цвет под чат -ботом

Есть 2 параметра: высота и ростколора:
Высота - это текстовая область чат -бота в перкажевых.
HeightColor - это плоский цвет, используя значение RGB.

Образцы URL
> http: // 192.168.1.126:8080/?height=80%&heightcolor=rgb(255,230,200)
> http: // 192.168.1.126:8080/?height=63%&heightcolor=rgb(255,255,255)

---

Изменить размер текстовых сообщений

Размер сообщений - это размер сообщения в единицах CSS (я рекомендую вам использовать VW и VH).
Более подробная информация о единицах CSS.

Образцы URL
> http: // 192.168.1.126:8080/?messagesize=2.5VW
> http: // 192.168.1.126:8080/?messagesize=4VH

---

Измените размер прозвища

Nicksize - это размер псевдонимы в единицах CSS (я рекомендую вам использовать VW и VH).

Образцы URL
> http: // 192.168.1.126:8080/?nicksize=4vw
> http: // 192.168.1.126:8080/?nicksize=5.2vh

---

Выделите новое сообщение

Выделение нового сообщения является функцией, очень полезной для Streamer для выделения всех новых входящих сообщений.
Выделите параметр без какого -либо значения позволит функции. Новые входящие сообщения моргают на несколько секунд, чтобы выделить их.

Образец URL
> http: // 192.168.1.126:8080/?height=60%&heightcolor=rgb(255,255,255)&messagesize=3vw&nickname=5vw&highlight

---

Объедините несколько параметров

Вы могли бы объединить несколько параметров ... вы должны использовать? для первого параметра и и для каждого из следующих параметров.

Образцы URL
> http: // 192.168.1.126:8080/?height=80%&heightcolor=rgb(200,255,200)&messagesize=2vh&nickname=3vh
> http: // 192.168.1.126:8080/?height=60%&heightcolor=rgb(255,255,255)&messagesize=3vw&nickname=5vw