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 nano wizebot-url.txt وقم بصق الرابط في Nano.

تخصيص التصميم

يمكنك الآن تعديل ملف CSS المسمى WizeBot Bound.CSS لتطبيق التصميم الخاص بك.

لا تنس إعادة تشغيل البرنامج النصي NodeJS بعد كل تعديل.

تشغيل البرنامج النصي

قم بتكوين جدار الحماية / المنافذ المفتوحة

افتح 1 أو 2 منافذ TCP على نظامك:

8080 ل HTTP

8443 لـ HTTPS إذا قدمت بعض الشركات

هل تريد اختبار البرنامج النصي على الفور؟

هل تريد تنفيذ نص WizeBot-Chat-Chistory الآن؟

قم بتشغيل الأمر: 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 مع nano بدلاً من vim

export VISUAL=nano

أو إعادة صياغة VIM

export VISUAL=vim

معلمات عنوان URL لـ WizeBot History

نفترض أن البرنامج النصي يعمل على نظام باستخدام IP 192.168.1.126 واستخدام منفذ HTTP 8080.

---

العرض الأساسي

> http: // 192.168.1.126:8080/

---

تاريخ واضح على الفور

تم مسح التاريخ على الفور. جميع صفحات الويب المفتوحة تحتاج إلى إعادة تحميلها.

افتح علامة تبويب متصفح جديدة ولصق عنوان URL التالي.
> http: // 192.168.1.126:8080/؟reset

انتظر تحميل علامة التبويب وأغلقه. أنت الآن بحاجة إلى إعادة تحميل جميع علامات التبويب الأخرى والنوافذ التي تعرض الدردشة.

هذه الميزة مفيدة للغاية قبل بدء دفق مباشر جديد لمسح جميع الرسائل السابقة.

---

عرض لونًا مسطحًا أسفل chatbot

هناك معلمتان: الارتفاع و Alemecolor:
الارتفاع هو منطقة نص chatbot في المئوية.
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