wizebot chat history

Pourquoi ce script wizebot-chat-history?

Je suis un streamer sur la plate-forme Twitch.

Pour afficher le chat dans OBS, nous pouvons utiliser une superposition de widget Wizebot. Cela nous permet d'avoir une conversation différente tout en profitant des effets et des fonctionnalités de Wizebot.
Cependant, lorsque vous utilisez certaines scènes dans OBS avec différentes configurations de chat pour chaque scène, l'historique de chat est perdu.

Le but de ce script est de maintenir cette histoire et de s'assurer qu'elle est disponible même si nous ne streamions pas.

Comment préparer votre Almalinux 9.3 ou 9.4

Connectez-vous à un SSH avec un compte racine ou similaire sur votre Almalinux:

dnf install epel-release

dnf module enable nodejs:20

dnf install nodejs -y

dnf install chromium -y

dnf install git -y

node -v

Installez le script

Avec votre session 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

Comment utiliser le script

1. Accédez à votre panneau d'administration Wizebot.TV

2. Widgets ouverts (superpositions)

3. Chatbot de widget ouvert

4. Créer un nouveau widget

5. Sélectionnez le modèle Clean (sur le côté droit)

6. Importez le code HTML suivant dans la pièce 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. Effacer le code CSS dans la partie Wizebot CSS

8. Modifiez le nom de la chaîne dans le code JavaScript dans la partie JavaScript de Wizebot dans le nom de votre canal

   Pour mon canal Twitch, j'utilise: var channel_name = "alexia_vassiliki";

9. Cliquez sur "Copier le lien" en haut de la page Web de Wizebot

10. Avec votre session SSH, ouvrez le wizebot-url.txt avec nano nano wizebot-url.txt et collez le lien en nano.

Personnaliser la conception

Vous pouvez maintenant modifier le fichier CSS nommé wizebot inject.css pour appliquer votre propre conception.

N'oubliez pas de redémarrer le script NodeJS après chaque modification.

Exécutez le script

Configurez votre pare-feu / ports ouverts

Ouvrez 1 ou 2 ports TCP sur votre système:

8080 pour http

8443 pour HTTPS si vous fournissez des certificats

Vous voulez tester immédiatement le script?

Vous souhaitez exécuter le script Wizebot-chat-histoire maintenant?

Exécutez la commande: node wizebot-node.js

Vous verrez le texte suivant:

 HTTP server started
Running...

Appuyez sur Ctrl + C pour arrêter le script.

Installez et démarrez le script avec le système

Avec votre session SSH:

chmod +x wizebot-run.sh

Nous ajoutons le script dans Cron au démarrage, cette commande modifie le cron avec vim:

crontab -e

Et ajoutant la ligne suivante dans le cron

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

Remarque: si vous préférez, modifiez le cron avec nano au lieu de VIM

export VISUAL=nano

Ou vim reélectionné

export VISUAL=vim

Paramètres de l'URL de l'historique Wizebot

Nous supposons que le script s'exécute sur un système à l'aide du port IP 192.168.1.126 et à l'aide du port HTTP 8080.

---

Affichage de base

> http: // 192.168.1.126:8080/

---

Effacer l'histoire immédiatement

L'histoire est immédiatement effacée. Toutes les pages Web ouvertes doivent être rechargées.

Ouvrez un nouvel onglet de navigateur et collez l'URL suivante.
> http: // 192.168.1.126:8080/?reset

Attendez le chargement de l'onglet et fermez-le. Vous devez maintenant recharger tous les autres onglets et fenêtres affichant le chat.

Cette fonctionnalité est très utile avant de démarrer un nouveau flux en direct pour effacer tous les messages précédents.

---

Affichez une couleur plate sous le chatbot

Il y a 2 paramètres: hauteur et hauteur Color:
La hauteur est la zone de texte du chatbot à Percents.
Hightcolor est de couleur plate à l'aide d'une valeur RVB.

Échantillons d'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)

---

Modifier la taille des messages texte

Les messages sont la taille des messages dans les unités CSS (je vous recommande d'utiliser VW et VH).
Plus d'informations sur les unités CSS.

Échantillons d'URL
> http: // 192.168.1.126:8080/?Messagesize=2.5vw
> http: // 192.168.1.126:8080/?Messagesize=4VH

---

Changer la taille du surnom

Nicksize est la taille du surnom dans les unités CSS (je vous recommande d'utiliser VW et VH).

Échantillons d'URL
> http: // 192.168.1.126:8080/?nicksize=4vw
> http: // 192.168.1.126:8080/?nicksize=5.2vh

---

Mettre en évidence un nouveau message

La mise en évidence d'un nouveau message est une fonctionnalité très utile pour Streamer afin de mettre en évidence tous les nouveaux messages entrants.
Le paramètre en surbrillance sans aucune valeur permettra la fonctionnalité. Les nouveaux messages entrants sont clignés par des yeux quelques secondes pour les mettre en évidence.

Échantillon d'URL
> http: // 192.168.1.126:8080/?height=60%&HeightColor=rgB(255,255,255)&messagesize=3vw&nickname=5vw&highlight

---

Combiner plusieurs paramètres

Vous pouvez combiner plusieurs paramètres ... vous devez utiliser? pour le premier paramètre et & pour chacun des paramètres suivants.

Échantillons d'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