wizebot chat history

¿Por qué este script wizebot-chat-history?

Soy un streamer en la plataforma Twitch.

Para mostrar el chat en OBS, podemos usar una superposición de widget Wizebot. Esto nos permite tener un chat diferente mientras disfrutamos de efectos y características de Wizebot.
Sin embargo, cuando se usa algunas escenas en OBS con diferentes configuraciones de chat para cada escena, se pierde el historial de chat.

El propósito de este script es mantener este historial y garantizar que esté disponible incluso si no estamos transmitiendo.

Cómo preparar su Almalinux 9.3 o 9.4

Conéctese a un SSH con una raíz o una cuenta similar en su Almalinux:

dnf install epel-release

dnf module enable nodejs:20

dnf install nodejs -y

dnf install chromium -y

dnf install git -y

node -v

Instalar el script

Con tu sesión de 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

Cómo usar el script

1. Vaya a su panel de administración Wizebot.tv

2. Widgets abiertos (superposiciones)

3. CHATBOT de widget abierto

4. Crear un nuevo widget

5. Seleccione la plantilla de limpieza (en el lado derecho)

6. Importe el siguiente código HTML en la parte Wizebot HTML :

 < 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. Borrar el código CSS en la parte CSS Wizebot

8. Cambie el nombre del canal en el código JavaScript en la parte de Wizebot JavaScript a su nombre de canal

   Para mi canal Twitch, uso: var channel_name = "alexia_vassiliki";

9. Haga clic en "Copiar el enlace" en la parte superior de la página web de Wizebot

10. Con su sesión de SSH, abra el wizebot-url.txt con nano nano wizebot-url.txt y pegue el enlace a nano.

Personalizar el diseño

Ahora puede modificar el archivo CSS llamado Wizebot-Inject.css para aplicar su propio diseño.

No olvide reiniciar el script NodeJS después de cada modificación.

Ejecutar el guión

Configure su firewall / puertos abiertos

Abra 1 o 2 puertos TCP en su sistema:

8080 para http

8443 para https si proporciona algunos certs

¿Quieres probar inmediatamente el script?

¿Quieres ejecutar el script Wizebot-Chat-History ahora?

Ejecute el comando: node wizebot-node.js

Verás el siguiente texto:

 HTTP server started
Running...

Presione Ctrl+C para detener el script.

Instale e inicie el script con el sistema

Con tu sesión de SSH:

chmod +x wizebot-run.sh

Agregamos el script a cron al inicio, este comando edita el cron con vim:

crontab -e

Y agregar la siguiente línea al cron

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

Nota: Si prefiere editar el cron con nano en lugar de vim

export VISUAL=nano

O volver a seleccionar Vim

export VISUAL=vim

Parámetros de la URL de la historia de Wizebot

Suponemos que el script se ejecuta en un sistema utilizando la IP 192.168.1.126 y usando el puerto HTTP 8080.

---

Pantalla básica

> http: // 192.168.1.126:8080/

---

Clear Historia inmediatamente

La historia se limpia de inmediato. Todas las páginas web abiertas deben ser recargadas.

Abra una nueva pestaña del navegador y pegue la siguiente URL.
> http:// 192.168.1.126:8080/?reset

Espere la carga de la pestaña y cierre. Ahora necesita recargar todas las demás pestañas y ventanas que muestran el chat.

Esta característica es muy útil antes de comenzar una nueva transmisión en vivo para borrar todos los mensajes anteriores.

---

Muestra un color plano debajo del chatbot

Hay 2 parámetros: altura y altura:
La altura es el área de texto de chatbot en porcentajes.
HeightColor es color de área plana con un valor RGB.

Muestras de 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)

---

Cambiar el tamaño de los mensajes de texto

MessageSize es el tamaño del mensaje en las unidades CSS (recomiendo que use VW y VH).
Más información sobre las unidades CSS.

Muestras de URL
> http: // 192.168.1.126:8080/?Messagesize=2.5VW
> http: // 192.168.1.126:8080/?Messagesize=4VH

---

Cambiar el tamaño del apodo

NickSize es el tamaño del apodo en las unidades CSS (recomiendo que use VW y VH).

Muestras de URL
> http: // 192.168.1.126:8080/?nickSize=4VW
> http: // 192.168.1.126:8080/?nicksize=5.2vh

---

Resaltar un nuevo mensaje

Destacar un nuevo mensaje es una característica muy útil para Streamer para resaltar todos los nuevos mensajes entrantes.
resaltar el parámetro sin ningún valor habilitará la función. Los nuevos mensajes entrantes parpadean unos pocos segundos para resaltarlos.

Muestra de url
> http: // 192.168.1.126:8080/?height=60%&heightcolor=rgb(255,255,255)&messagesize=3vw&nickname=5vw&highlight

---

Combinar múltiples parámetros

Podrías combinar múltiples parámetros ... ¿Debes usar? Para el primer parámetro y y para cada uno de los siguientes parámetros.

Muestras de 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