-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblogpost.html
237 lines (237 loc) · 20.8 KB
/
blogpost.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<p class="lead">
สวัสดีครับ จารย์กานต์ Sir Lucian ครับผม
</p>
<p>
สำหรับโปรเจคนี้ก็ได้พัฒนามาซักพักใหญ่ๆแล้วล่ะครับ แค่ยังไม่ได้มีเวลาว่างมาเขียน Documentation หรือ Blogpost
จนกระทั่งวันนี้! เราจะมานำเสนอนวัตกรรมเขียนเอง งมเอง Suffer เอง และเฮฮาสังสรรค์ไปด้วยกันกับสิ่งที่เรียกว่า Twitch
Chat Overlay กันนะครับ
</p>
<p>
สำหรับคนที่ยังไม่คุ้นชินกับเหล่าสตรีมเมอร์ ไม่ว่าจะเป็น Platform ไหนนะครับ สตรีมเมอร์มักจะเพิ่ม Live Chat
ลงไปในหน้าสตรีมของเขา ซึ่งช่องที่เขาใส่ใจรายละเอียดหรืออยากให้มันเข้ากับธีมช่อง
เขาก็จะดัดแปลงช่องการแสดงแชทนี้ให้เข้าธีมครับ ไม่ว่าจะเป็นการปรับรูปลักษณ์ ลูกเล่นต่างๆ ให้เหมาะสม
บางคนก็แนวน่ารักบางคนก็ Edgy หรือสายมีมก็มีให้เห็นครับ 😂
</p>
<p>
และด้วยความที่สตรีมเมอร์เพื่อนบ้านของผมหลายๆคนก็ยังใช้ของ Stock ที่เป็น Text เปลือยๆ
เห็นแล้วก็น่ากำหมัดเล็กน้อย<s>ที่ไม่น้อย</s> ประจบกับผมต้องการหาโปรเจค dev มาหาทำนอกงานประจำที่ไม่ใช่งานวาด
ก็เลยเกิดเป็นโปรเจคนี้ขึ้นมาครับ
</p>
<p>
ทีนี้ เรามาดูสเต็ปต่างๆที่ต้องเตรียมการกันก่อน Suffer นะครับ อย่างแรกเลยคือ การตรัสรู้ว่า API Streamlabs
มันส่งอะไรมาบ้าง สาเหตุที่ผมใช้ของ Streamlabs ก็เพราะผมใช้ Chat Overlay ตัวดั้งเดิมของมันอยู่แล้ว
เลยเอามาต่อยอดให้สุดครับ แต่มันติดปัญหาที่ว่า
<strong>
ผมพลิกแผ่นดิน พลิกมหาสมุทรหา Documentation ของ Streamlabs API ก็หาไม่เจอครับ
</strong>
แบบว่า ไม่จริงน่า! ระบบที่คนใช้ก็ตั้งเยอะ แต่ไม่มี Documentation เลยเนี่ยนะ บ้าไปแล้ว 💀
แล้วผมก็กุมขมับไปวันนึงเต็มๆ จนกระทั่งผมสังเกตบรรทัดนึงในโค้ด Javascript ของ Default Chat Overlay ของ Streamlabs
ครับว่า
</p>
<p class="lead text-center">
<code>document.addEventListener('onEventReceived', function(obj) {});</code>
</p>
<p>
ทันใดนั้นครับ ผมก็มีความคิดที่ว่า ถ้าเรา <code class="text-dark bg-light rounded p-1">console.log(obj);</code> มาทั้งก้อน มันจะออกมายังไงหว่า
เท่านั้นแหละครับ ออกมาทั้ง JSON Object แบบ บอกหมดเลยว่ามี Parameters อะไรให้ใช้บ้าง ความรู้สึกแรกเลยคือ โย่ว
เสร็จชั้นล่ะ
Hehe Boi 😈
</p>
<p>
แต่เอาจริงๆทั้งก้อนมันก็เยอะกว่าที่ต้องการแหละครับ ทีนี้เรามาดูกันดีกว่าว่า ตัวที่เราจำเป็นต้องใช้มีอะไรบ้าง ตัวอย่างนี้จะเป็นของแชทสลับข้างนะครับ
โดยที่ Streamer และ Mod จะอยู่ชิดซ้าย Role อื่นๆจะอยู่ชิดขวาครับ ส่วนแบบอื่นๆอีกสองแบบเดี๋ยวกล่าวอีกทีนะครับ
</p>
<ul class="col-lg-9 mx-auto list-unstyled">
<li>
<code>obj.detail.messageId</code> <span class="text-secondary float-md-end"><small>
// String, แต่ละข้อความจะมี Unique ID</small></span>
</li>
<li>
<code>obj.detail.subscriber</code> <span class="text-secondary float-md-end"><small>
// Boolean, เช็คว่าผู้แชทเป็น Subscriber หรือไม่</small></span>
</li>
<li>
<code>obj.detail.tags.vip</code> <span class="text-secondary float-md-end"><small>
// String (0 or 1), เช็คว่าผู้แชทเป็น VIP ของช่องหรือไม่</small></span>
</li>
<li>
<code>obj.detail.tags.mod</code> <span class="text-secondary float-md-end"><small>
// String (0 or 1), เช็คว่าผู้แชทเป็นดาบ (Moderator) ของช่องหรือไม่</small></span>
</li>
<li>
<code>obj.detail.owner</code> <span class="text-secondary float-md-end"><small>
// Boolean, เช็คว่าผู้แชทเป็นเจ้าของหรือไม่</small></span>
</li>
<li>
<code>obj.detail.tags.color</code> <span class="text-secondary float-md-end"><small>
// String, สีชื่อของผู้แชท</small></span>
</li>
</ul>
<p>
ซึ่ง Parameters ต่างๆนี้ เราสามารถเอามาใช้ให้กรอบคำพูดแชทแยกตาม Role ของช่องได้ครับ
</p>
<h2 class="h4">CSS</h2>
<p>
อย่างเช่นตัวพื้นฐานที่ผมทำมาก็จะมี Streamer พื้นสีแดง, Mod พื้นสีเขียว, VIP พื้นสีชมพู, Sub พื้นสีขาว (ซึ่งต้องทำให้
Text
เป็นสีดำแทน โดยแก้สีฟอนต์ที่ <code class="text-dark bg-light rounded p-1">.username_box_sub</code> ครับ), ผู้แชทธรรมดา พื้นสีดำ ตาม Class ในไฟล์ CSS
โดยสัญลักษณ์บอก Class คือจุด <code class="text-dark bg-light rounded p-1">.</code> ครับ -
<code class="text-dark bg-light rounded p-1">.wrapper-streamer</code>,
<code class="text-dark bg-light rounded p-1">.wrapper-mod</code>,
<code class="text-dark bg-light rounded p-1">.wrapper-vip</code>,
<code class="text-dark bg-light rounded p-1">.wrapper-sub</code> ผู้แชทธรรมดา จะเป็นแค่ <code class="text-dark bg-light rounded p-1">.wrapper</code> ครับ
</p>
<p>
สำหรับในส่วน <code class="text-dark bg-light rounded p-1">.wrapper-role:before</code> หรือ <code class="text-dark bg-light rounded p-1">.wrapper-role:after</code>
นี่ก็จะเป็นส่วนที่เป็นติ่งสามเหลี่ยมหน้าหรือหลังกล่องที่แสดงข้อความครับ ถ้าเปลี่ยนสีพื้น Role
ไหนก็อย่าลืมเปลี่ยนตรงนี้ตาม Role ด้วยนะครับ
</p>
<p>
ในส่วนของ Badge ผมได้ใส่ไว้อยู่ทั้งหมด 2 ตำแหน่งในกล่องข้อความหนึ่งกล่อง แล้วใช้วิธีปิด Class และการแสดงผลตาม Role ครับ จะเป็นมุมซ้ายและขวาบนของกล่องนะครับ
</p>
<hr class="lucian-divider" />
<h2 class="h4">Javascript</h2>
<p>
สำหรับในส่วนของ Javascript นะครับ หรือที่ทุกคนพอจะนึกภาพได้ว่าตรงนี้แหละ คือ True Coding/Programming เป็นส่วนของ
การทำงานใช้ Logic นะครับ ซึ่งในส่วนของการอัพเดตแชทแบบ Real Time ก็คือ ให้ตรวจจับตามอัพเดทแชท หรือบรรทัดที่เขียนว่า
<code class="text-dark bg-light rounded p-1">document.addEventListener('onEventReceived', function(obj) {});</code> นะครับ
โดยในวงเล็บปีกกา <code class="text-dark bg-light rounded p-1">{}</code> ก็จะเป็นชุดคำสั่งว่า เราจะต้องทำอะไรกับข้อมูลบ้างทุกครั้งที่แชทอัพเดตนะครับ
</p>
<p>
ขั้นแรกคือการแปะ ID ตามกล่องครับ โดยจะมีการแปะที่ตัวกล่อง ชื่อผู้แชท และข้อความของผู้แชท เพื่อจำแนก
ว่าข้อความนี้ต้องใช้ข้อมูลอะไรในการเปลี่ยนการแสดงผลต่อไป ตามนี้
</p>
<ul class="col-lg-9 mx-auto list-unstyled">
<li>
<code>var messageID = obj.detail.messageId+'-wrapper';</code> <span class="text-secondary float-md-end"><small>
// แปะ ID ที่กล่องข้อความ
</small></span>
</li>
<li>
<code>var messageFrom = obj.detail.messageId+'-username-box';</code> <span class="text-secondary float-md-end"><small>
// แปะ ID ที่ชื่อผู้แชท
</small></span>
</li>
<li>
<code>var messageBody = obj.detail.messageId+'-message-box';</code> <span class="text-secondary float-md-end"><small>
// แปะ ID ที่ข้อความแชทในกล่อง
</small></span>
</li>
</ul>
<p>
เสร็จแล้วก็จะเป็นการดึง Role ของผู้แชทจาก JSON มาเก็บไว้ให้เช็คต่อง่ายๆครับ
</p>
<ul class="col-lg-9 mx-auto list-unstyled">
<li>
<code>var isSub = obj.detail.subscriber;</code>
</li>
<li>
<code>var isVIP = obj.detail.tags.vip;</code>
</li>
<li>
<code>var isMod = obj.detail.tags.mod;</code>
</li>
<li>
<code>isStreamer = obj.detail.owner;</code>
</li>
</ul>
<p>
จากนั้นก็จะเป็นการเช็ค if-else ตาม Role เลยครับ เรียกจาก if แรกที่เป็นเจ้าของช่อง else if ที่เป็น Mod, VIP, Sub
และปิดท้ายด้วย else ผู้แชททั่วไปครับ ขอยกตัวอย่างการเช็คว่าเป็น Subscriber ในแชทสลับด้านแล้วกันนะครับ
</p>
<p class="col-lg-9 mx-auto">
<code>
else if (isSub) { // Subscriber<br>
    var elementWrapper = document.getElementById(messageID);<br>
    elementWrapper.classList.add("wrapper-sub");<br>
    elementWrapper.classList.remove("wrapper");<br>
</code>
</p>
<p>
อันแรกก็จะเป็นการดึงกล่องที่ถูกต้องจาก ID ที่เราแปะไว้นะครับ โดยการใช้ <code class="text-dark bg-light rounded p-1">document.getElementById(messageID);</code>
เราก็จะได้เลือกกล่องนั้นมาสลับใส่ Class ที่ถูกต้องตาม Role โดยการเพิ่ม <code class="text-dark bg-light rounded p-1">elementWrapper.classList.add("wrapper-sub");</code>
และลบ Class <code class="text-dark bg-light rounded p-1">elementWrapper.classList.remove("wrapper");</code> ครับ
</p>
<p class="col-lg-9 mx-auto">
<code>
    if (obj.detail.tags.hasOwnProperty('color')) {<br>
        elementWrapper.style.borderRightColor = obj.detail.tags.color;<br>
    }<br>
    else {<br>
        elementWrapper.style.borderRightColor = 'white';<br>
    }
</code>
</p>
<p>
จากนั้นจะเป็นการดึงข้อมูลสีชื่อผู้แชท <code class="text-dark bg-light rounded p-1">obj.detail.tags.color</code> มาใส่ที่ขอบครับ โดยใช้การเช็คว่าถ้ามีสีก็จะใช้ค่าสีครับ <code class="text-dark bg-light rounded p-1">if (obj.detail.tags.hasOwnProperty('color'))</code>
ซึ่งในกรณี Subscriber นี้จะอยู่ทางขวา ก็จะใช้การเปลี่ยนสีขอบที่กล่องตามนี้ครับ <code class="text-dark bg-light rounded p-1">elementWrapper.style.borderRightColor = obj.detail.tags.color;</code>
</p>
<p> ถ้าไม่สามารถดึงข้อมูลได้ก็จะใช้สีขาวตาม else นั่นเอง</p>
<p class="col-lg-9 mx-auto">
<code>
    document.getElementById(obj.detail.messageId+'-d-none-right-inv').style.display = "none";<br>
    document.getElementById(obj.detail.messageId+'-d-none-right-top').style.display = "none";<br>
    document.getElementById(obj.detail.messageId+'-meta').style.textAlign = "right";<br>
    document.getElementById(obj.detail.messageId+'-message-box').style.textAlign = "right";
</code>
</p>
<p>
ต่อไปจะเป็นการปิดการแสดงผล badge ในข้างที่ผิดนะครับ เนื่องจากเราได้วาง badge ไว้ทั้งสองข้างใน HTML เราจึงต้อง
ทำการใส่ <code class="text-dark bg-light rounded p-1">.style.display: "none";</code> ในด้านที่ผิดครับ เช่น กล่อง Sub ชิดขวา ก็ต้องปิดขวาให้แสดงผลแต่ซ้าย
โดยใช้ <code class="text-dark bg-light rounded p-1">.style.textAlign = "right";</code> ครับ
</p>
<p>
อีกสิ่งที่ต้องทำคือจัด text-align ให้ชิดซ้ายชิดควาตามด้านครับ อย่างอันนี้ก็เป็น <code class="text-dark bg-light rounded p-1">.style.textAlign = "right";</code>
</p>
<p class="col-lg-9 mx-auto">
<code>
    var elementFrom = document.getElementById(messageFrom);<br>
    elementFrom.classList.add("username_box_sub");<br>
    elementFrom.classList.remove("username_box");<br>
    var elementBody = document.getElementById(messageBody);<br>
    elementBody.classList.add("message_box_sub");<br>
    elementBody.classList.remove("message_box");<br>
}
</code>
</p>
<p>
ส่วนสุดท้าย เป็นเรื่อง optional ของสีพื้นกล่องสีกว่าที่ต้องปรับให้สีฟอนต์เป็นสีเข้มครับ เหมือนเดิมครับ เพิ่ม-ลบ Class
</p>
<p>
โดยที่ผลสุดท้ายก็จะออกมาเป็นตามที่เห็นคล้ายๆด้านล่างเลยครับ เพียงแค่ว่ามันเป็นแชทของผมเอง ซึ่งผมเซ็ตไว้ให้เช็คแค่ Streamer, Sub, และผู้แชททั่วไปครับ แล้วก็เป็นชิดขวาทั้งหมด
</p>
<p>
สำหรับ Release 1.0 นี้ ผมได้จัดเตรียมไว้ให้สามแบบครับ
</p>
<ol class="col-lg-9 mx-auto">
<li>
ชิดซ้าย <code class="text-secondary float-md-end">twitch-chat-left</code>
</li>
<li>
ชิดขวา <code class="text-secondary float-md-end">twitch-chat-right</code>
</li>
<li>
สลับซ้ายขวา (สตรีมเมอร์และ Mod อยู่ซ้าย คนอื่นอยู่ขวา) <code class="text-secondary float-md-end">twitch-chat-alt</code>
</li>
</ol>
<p>
โดยที่วิธีใช้ก็คือสามารถ Copy Paste ไปวางช่อง HTML, CSS, Javascript ได้เลยครับ แล้วผมก็แถมด้วยสไตล์ที่ผมใช้เองด้วย <code class="text-secondary">lucian-chat</code> ใครอยากเอาไปใช้ก็
ตามสะดวกเลยครับ ลิงก์เชิญไปที่
</p>
<p><a href="https://github.com/lucidkarn/tw-custom-chat-overlay" target="_blank" class="btn btn-outline-dark btn-lg w-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub Repository
</a></p>
<hr class="lucian-divider" />
<p class="lead text-center">
หรือใครอยากจะมาให้ผมดัดแปลงอะไรนิดหน่อยเพื่อคุณก็สามารถจ้างได้นะครับ คิดค่าบริการเริ่มต้นที่
</p>
<h2 class="lang-thai display-5 text-center"><span class="gold-highlight">500</span> บาท/<small>Custom Made</small></h2>
<p class="lead text-center">
<span class="text-danger">*</span>เพิ่มตามความซับซ้อนสำหรับคนที่ไม่อยากปวดหัวกับการแงะโค้ด 😂
</p>
<hr class="lucian-divider" />
<p>อย่างไรก็ดี ก็ขอให้สตรีมเมอร์ทุกท่านมีความสุขกับการสตรีมนะครับ วันนี้มีเพียงเท่านี้ ใครมีคำถามอยากไปแงะเองก็สอบถามได้ตามช่องทางติดต่อต่างๆนะครับ</p>
<p>Farewell, lads and lassies.</p>