# บทช่วยสอน WebSocket ฉบับสมบูรณ์
## 1. ชื่อเรื่อง
WebSocket และ HTTP แท้จริงแล้วมีความสัมพันธ์กันอย่างไร? เจาะลึกการจับมือ (Handshake), เฟรม, เมสกิน (Mask), และการส่งสัญญาณชีพจร (Heartbeat) แบบเคลียร์ชัด
## 2. คำอธิบาย
กำลังทำระบบข้อความแบบเรียลไทม์ แล้วยังให้ฝั่งหน้าบ้าน (Frontend) ดึงข้อมูล (Polling) ทุกๆ หนึ่งวินาทีอยู่หรือเปล่า?
ผู้ใช้ออนไลน์หนึ่งร้อยคน สร้างคำขอหกพันครั้งต่อนาที,
ซึ่งคำตอบส่วนใหญ่คือสามคำนี้: ไม่มีข้อความใหม่——
ต้นตอเป็นเพราะ HTTP อนุญาตให้ฝั่งไคลเอนต์ถาม และฝั่งเซิร์ฟเวอร์ตอบเท่านั้น
วิดีโอนี้ใช้แอนิเมชันตลอดทั้งเรื่อง เพื่อร้อยเรียงกลไกหลักของ WebSocket เข้าด้วยกันในครั้งเดียว:
ไม่ต้องจำ API พูดถึงแค่ "หลังจากการจับมือกันหนึ่งครั้งแล้ว ในที่สุดการเชื่อมต่อนี้กลายเป็นอะไร"
✅ คุณจะได้เข้าใจ:
· การจับมือ (Handshake): คำขอ GET ที่มีเฮดเดอร์ Upgrade ทำไมถึงได้รับ 101 กลับมาแทนที่จะเป็น 200
· Sec-WebSocket-Key และ Accept: มันพิสูจน์แค่ว่าอีกฝ่ายฟังรู้เรื่อง ไม่ใช่มาตรการความปลอดภัยแต่อย่างใด
· โครงสร้างเฟรม: FIN, opcode, ความยาวแบบแปรผัน, เฮดเดอร์เฟรมที่สั้นที่สุดใช้เวลาแค่ 2 ไบต์
· ความยาวที่มีแค่ 7 บิต, เมื่อใส่ 126 และ 127 จะต้องอ่านเพิ่มอีกกี่ไบต์
· เมสกิน (Mask): ทำไมฝั่งไคลเอนต์ต้องใส่ แต่ฝั่งเซิร์ฟเวอร์กลับห้ามใส่ (คำตอบเกี่ยวข้องกับการวางยาแคช Cache Poisoning)
· การเดินทางอันครบถ้วนของข้อความหนึ่ง: send → UTF-8 → ใส่เฮดเดอร์เฟรม → XOR → เฟรม → onmessage
· การส่งแบบแบ่งส่วน (Fragmentation): FIN และ opcode ทำงานร่วมกันอย่างไร, ผู้รับประกอบข้อความที่สมบูรณ์กลับมาอย่างไร
· ฮาร์ทบีท (Heartbeat): การเชื่อมต่ออาจตายอย่างเงียบๆ โดยไม่ทริกเกอร์ close, Ping/Pong และการเชื่อมต่อใหม่แบบ Exponential Backoff
· การเลือกใช้งานระหว่าง Long Polling / SSE / WebSocket, เมื่อไหร่ที่ SSE นั้นเพียงพอ
· ปัญหาความท้าทายของคลัสเตอร์: ผู้ใช้เชื่อมต่ออยู่กับเครื่องไหน? การบรอดแคสต์เทียบกับการบันทึกเส้นทาง (Route), การโหลดบาลานซ์ต้องมีการคงเซสชัน (Session Persistence)
· ประเด็นสำคัญในการผลิต: การจับมือไม่สามารถกำหนดเฮดเดอร์คำขอเองได้จะยืนยันตัวตนอย่างไร, Nginx ลืมตั้งค่า Upgrade ทำให้ล้มเหลวทันที
· คำเตือนสำคัญ: มันรับประกันแค่ลำดับแต่ไม่รับประกันการส่งถึง อย่าฝากความน่าเชื่อถือไว้ที่มัน
⏱ ไทม์ไลน์บท (คลิกเพื่อข้าม)
00:00 อินโทร: เพื่อความเรียลไทม์ หน้าบ้านจึงถามทุกๆ หนึ่งวินาที
00:52 จับมือหนึ่งครั้ง เปลี่ยน HTTP ให้เป็นช่องทางสื่อสารสองทาง
01:52 เฟรม: ข้อมูลถูกตัดแบ่งในท่ออย่างไร
02:36 เมสกิน: ทำไมฝั่งไคลเอนต์ต้องใส่
03:28 การเดินทางอันครบถ้วนของข้อความ
04:20 ฮาร์ทบีทและการเชื่อมต่อใหม่: การเชื่อมต่อจะตายอย่างเงียบๆ
05:12 วิธีเลือกใช้ระหว่าง Long Polling และ SSE
06:04 เมื่อขึ้นคลัสเตอร์ ปัญหาก็เริ่มต้นขึ้นจริงๆ
06:56 การยืนยันตัวตน พร็อกซี และประเด็นสำคัญในการผลิต
07:48 เมื่อไหร่ที่ไม่ควรใช้ WebSocket
08:40 สรุปแก่นสำคัญ + จบท้าย
> ไทม์ไลน์เป็นค่าประมาณ หลังจากเรนเดอร์เสร็จแล้ว ให้ใช้ `ffprobe` ดึงความยาวจริงทีละช่วงเพื่อทำการเทียบมาตรฐานอีกครั้ง
เหมาะสำหรับ: นักพัฒนาหน้าบ้าน (Frontend), หลังบ้าน (Backend), ผู้ที่ต้องการเติมเต็มเรื่องการสื่อสารแบบเรียลไทม์, ผู้ที่ต้องใช้ WebSocket ในการสัมภาษณ์
เข้าใจพื้นฐาน HTTP เพียงเล็กน้อยก็เริ่มต้นได้ แม้ไม่มีพื้นฐานก็เรียนตามได้
สรุปในประโยคเดียว: WebSocket = การจับมือหนึ่งครั้ง + การเชื่อมต่อระยะยาว + สองทางเท่าเทียมกัน มันคือช่องทาง ไม่ใช่คิวข้อความ (Message Queue)
หากรู้สึกว่ามีประโยชน์ ฝากกดซิงเหลียน (กดไลค์ กดติดตาม แชร์) สนับสนุนด้วยนะ～ หากมีข้อสงสัยยินดีแลกเปลี่ยนกันในคอมเมนต์
ติดตาม "Duoke Web" duoke360.com เพื่อเรียนรู้การพัฒนาแบบ Full-stack
## 3. แท็ก (Tag)
#WebSocket #การสื่อสารเรียลไทม์ #พัฒนาเว็บไซต์หน้าบ้าน #พัฒนาเว็บไซต์หลังบ้าน #เครือข่ายคอมพิวเตอร์ #HTTP #SSE #บทช่วยสอนเขียนโปรแกรม #การเชื่อมต่อระยะยาว #การส่งข้อความด่วน #โปรแกรมเมอร์ #Nginx #Redis #สัมภาษณ์งาน #JavaScript #แบบกระจาย (Distributed)
---
## 4. คำสำคัญ (Keywords)
WebSocket, บทช่วยสอน WebSocket, เริ่มต้นใช้งาน WebSocket, หลักการ WebSocket, การสื่อสารเรียลไทม์, การเชื่อมต่อระยะยาว, ฟูลดูเพล็กซ์ (Full-duplex)
WebSocket คืออะไร, กระบวนการจับมือของ WebSocket, 101 Switching Protocols, เฮดเดอร์ Upgrade,
Sec-WebSocket-Key, โครงสร้างเฟรม WebSocket, opcode คืออะไร, บิตสถานะ FIN,
WebSocket Mask, ทำไมไคลเอนต์ต้องทำ Mask, การวางยาแคช, การแบ่งส่วน WebSocket,
ฮาร์ทบีท WebSocket, เฟรมควบคุม Ping Pong, การเชื่อมต่อใหม่เมื่อหลุด, การถอยหลังแบบเอ็กซ์โปเนนเชียล (Exponential Backoff),
WebSocket vs SSE, WebSocket vs Long Polling, SSE Server-Sent Events,
WebSocket Cluster, การคงเซสชัน (Session Persistence), Redis Pub/Sub, การกำหนดเส้นทางเชื่อมต่อ,
การยืนยันตัวตน WebSocket, จะวาง Token ไว้ที่ไหน, Nginx Reverse Proxy WebSocket, proxy_set_header Upgrade,
wss คืออะไร, ข้อความ WebSocket สูญหาย, การส่งมอบ WebSocket ที่เชื่อถือได้
