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. เปิดวิดเจ็ต chatbot

4. สร้างวิดเจ็ตใหม่

5. เลือกเทมเพลตที่สะอาด (ทางด้านขวา)

6. นำเข้ารหัส HTML ต่อไปนี้ลงในส่วน 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. ล้างรหัส CSS ในส่วน WizeBot CSS

8. เปลี่ยนชื่อช่องในรหัส JavaScript ในส่วน WizeBot JavaScript เป็น ชื่อช่องของคุณ

   สำหรับช่อง Twitch ของฉันฉันใช้: var channel_name = "alexia_vassiliki";

9. คลิกที่ "คัดลอกลิงค์" ที่ด้านบนของหน้าเว็บ WizeBot

10. ด้วยเซสชัน SSH ของคุณเปิด wizebot-url.txt ด้วยนาโน nano wizebot-url.txt และวางลิงก์ลงในนาโน

ปรับแต่งการออกแบบ

ตอนนี้คุณสามารถแก้ไขไฟล์ CSS ชื่อ wizebot-inject.css เพื่อใช้การออกแบบของคุณเอง

อย่าลืมรีสตาร์ทสคริปต์ NodeJS หลังจากการดัดแปลงแต่ละครั้ง

เรียกใช้สคริปต์

กำหนดค่าพอร์ตไฟร์วอลล์ / เปิดของคุณ

เปิดพอร์ต 1 หรือ 2 TCP ในระบบของคุณ:

8080 สำหรับ http

8443 สำหรับ https หากคุณให้ใบรับรองบางอย่าง

ต้องการทดสอบสคริปต์ทันทีหรือไม่?

คุณต้องการเรียกใช้สคริปต์ WizeBot-Chat-History ตอนนี้หรือไม่?

เรียกใช้คำสั่ง: node wizebot-node.js

คุณจะเห็นข้อความต่อไปนี้:

 HTTP server started
Running...

กด Ctrl+C เพื่อหยุดสคริปต์

ติดตั้งและเริ่มสคริปต์ด้วยระบบ

ด้วยเซสชัน SSH ของคุณ:

chmod +x wizebot-run.sh

เราเพิ่มสคริปต์ลงใน cron เมื่อเริ่มต้นคำสั่งนี้แก้ไข cron ด้วย vim:

crontab -e

และเพิ่มบรรทัดต่อไปนี้ลงใน cron

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

หมายเหตุ: หากคุณชอบแก้ไข cron ด้วยนาโนแทน vim

export VISUAL=nano

หรือ Reselect 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

รอการโหลดแท็บและปิด ตอนนี้คุณต้องโหลดแท็บอื่น ๆ และหน้าต่างอื่น ๆ ที่แสดงการแชท

คุณสมบัตินี้มีประโยชน์มากก่อนที่จะเริ่มสตรีมสดใหม่เพื่อล้างข้อความก่อนหน้าทั้งหมด

---

แสดงสีแบนด้านล่าง chatbot

มี 2 ​​พารามิเตอร์: ความสูงและความสูง:
ความสูง คือพื้นที่ข้อความ chatbot ใน percents
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)

---

รวมพารามิเตอร์หลายตัว

คุณสามารถรวมพารามิเตอร์หลายตัว ... คุณต้องใช้? สำหรับพารามิเตอร์แรกและ & สำหรับแต่ละพารามิเตอร์ต่อไปนี้

ตัวอย่าง URL
> http: // 192.168.1.126:8080/?height=80%&heightColor=rgb(200,255,200,200)
> http: // 192.168.1.126:8080/?height=60%&heightColor=rgb(255,255,255)