wizebot chat history

Mengapa skrip ini wisty-chat-history?

Saya seorang streamer di platform Twitch.

Untuk menampilkan obrolan di OBS, kami dapat menggunakan overlay widget Wizebot. Ini memungkinkan kami untuk memiliki obrolan yang berbeda sambil menikmati efek dan fitur dari Wizebot.
Namun ketika menggunakan beberapa adegan di OBS dengan konfigurasi obrolan yang berbeda untuk setiap adegan, riwayat obrolan hilang.

Tujuan dari skrip ini adalah untuk mempertahankan sejarah ini dan memastikan itu tersedia bahkan jika kita tidak streaming.

Cara Mempersiapkan Almalinux 9.3 atau 9.4 Anda

Hubungkan ke SSH dengan root atau akun serupa di Almalinux Anda:

dnf install epel-release

dnf module enable nodejs:20

dnf install nodejs -y

dnf install chromium -y

dnf install git -y

node -v

Instal skrip

Dengan sesi SSH Anda:

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

Cara menggunakan skrip

1. Buka panel admin wizebot.tv Anda

2. Widget terbuka (overlay)

3. Buka widget chatbot

4. Buat widget baru

5. Pilih template bersih (di sisi kanan)

6. Impor kode HTML berikut ke bagian 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. Hapus kode CSS di bagian Wizebot CSS

8. Ubah nama saluran dalam kode JavaScript di bagian Wizebot JavaScript ke nama saluran Anda

   Untuk saluran Twitch saya, saya menggunakan: var channel_name = "alexia_vassiliki";

9. Klik "Salin Tautan" di bagian atas halaman web Wizebot

10. Dengan sesi SSH Anda, buka wizebot-url.txt dengan nano nano wizebot-url.txt dan tempel tautan ke nano.

Kustomisasi desain

Sekarang Anda dapat memodifikasi file CSS bernama wizebot-inject.css untuk menerapkan desain Anda sendiri.

Jangan lupa untuk memulai ulang skrip NodeJS setelah setiap modifikasi.

Jalankan skrip

Konfigurasikan firewall / port terbuka Anda

Buka 1 atau 2 port TCP di sistem Anda:

8080 untuk http

8443 untuk https jika Anda memberikan beberapa sertifikat

Ingin segera menguji skrip?

Anda ingin menjalankan skrip wizebot-chat-history sekarang?

Jalankan perintah: node wizebot-node.js

Anda akan melihat teks berikut:

 HTTP server started
Running...

Tekan Ctrl+C untuk menghentikan skrip.

Instal dan mulai skrip dengan sistem

Dengan sesi SSH Anda:

chmod +x wizebot-run.sh

Kami menambahkan skrip ke dalam cron di startup, perintah ini mengedit cron dengan vim:

crontab -e

Dan menambahkan baris berikut ke dalam cron

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

Catatan: Jika Anda lebih suka mengedit cron dengan nano daripada vim

export VISUAL=nano

Atau pilih kembali vim

export VISUAL=vim

Parameter URL riwayat Wizebot

Kami menganggap skrip sedang berjalan pada sistem menggunakan IP 192.168.1.126 dan menggunakan port HTTP 8080.

---

Tampilan Dasar

> http: // 192.168.1.126:8080/

---

Sejarah yang jelas segera

Sejarah segera dihapus. Semua halaman web yang dibuka perlu dimuat ulang.

Buka tab browser baru dan tempel URL berikut.
> http: // 192.168.1.126:8080/?reset

Tunggu tab memuat dan tutup. Sekarang Anda perlu memuat ulang semua tab dan jendela lain yang menampilkan obrolan.

Fitur ini sangat berguna sebelum memulai streaming langsung baru untuk menghapus semua pesan sebelumnya.

---

Tampilkan warna datar di bawah chatbot

Ada 2 parameter: Tinggi dan Heightcolor:
Tinggi adalah area teks chatbot di Percents.
HeightColor adalah warna area datar menggunakan nilai RGB.

Sampel 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)

---

Ubah Ukuran Pesan Teks

Pesan adalah ukuran pesan dalam unit CSS (saya merekomendasikan Anda untuk menggunakan VW dan VH).
Informasi lebih lanjut tentang unit CSS.

Sampel URL
> http: // 192.168.1.126:8080/?messageSize=2.5VW
> http: // 192.168.1.126:8080/?messageSize=4VH

---

Ubah ukuran nama panggilan

NickSize adalah ukuran nama panggilan dalam unit CSS (saya merekomendasikan Anda untuk menggunakan VW dan VH).

Sampel URL
> http: // 192.168.1.126:8080/?nicksize=4vw
> http: // 192.168.1.126:8080/?nicksize=5.2VH

---

Sorot pesan baru

Menyoroti pesan baru adalah fitur yang sangat berguna bagi Streamer untuk menyoroti semua pesan yang masuk baru.
Parameter sorot tanpa nilai apa pun akan memungkinkan fitur. Pesan -pesan yang baru masuk berkedip beberapa detik untuk menyoroti mereka.

Sampel URL
> http: // 192.168.1.126:8080/?height=60%&HeightColor=rgb(255.255.255)&messageSize=3vw&nickname=5vw&highlight

---

Gabungkan banyak parameter

Anda dapat menggabungkan beberapa parameter ... Anda harus menggunakan? untuk parameter pertama dan & untuk masing -masing parameter berikut.

Sampel 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