11 ม.ค. เวลา 10:23 • การศึกษา
Protocol By Shoper Gamer

WebSocket คืออะไร

โดย
ในยุคดิจิทัลที่ผู้ใช้คาดหวังประสบการณ์ที่รวดเร็ว และ ตอบสนองทันที แอปพลิเคชันเว็บแบบเดิมที่ต้องรอให้ผู้ใช้รีเฟรชหน้าจอ หรือ ส่งคำขอใหม่ในทุกๆ ครั้งเริ่มแสดงข้อจำกัดที่ชัดเจน เทคโนโลยีอย่าง WebSocket จึงก้าวเข้ามาเป็นหัวใจสำคัญของการพัฒนาเว็บแอปพลิเคชันที่ต้องการความไดนามิก และ โต้ตอบได้ทันที (Real-time) อย่างสมบูรณ์แบบ
  • ​WebSocket คืออะไร
WebSocket คือโปรโตคอลการสื่อสารแบบฟูลดูเพล็กซ์ (Full-Duplex) ผ่านการเชื่อมต่อ TCP เพียงหนึ่งเดียว ซึ่งอนุญาตให้ไคลเอนต์ (เช่น เว็บเบราว์เซอร์) และ เซิร์ฟเวอร์สามารถส่งข้อมูลหากันได้แบบสองทาง (Two-way communication) อย่างอิสระ และ ต่อเนื่อง โดยหลังจากสร้างการเชื่อมต่อสำเร็จแล้ว ค่าใช้จ่ายในการรับส่งข้อมูล (Overhead) จะต่ำมากเมื่อเทียบกับ HTTP แบบเดิม ทำให้เหมาะอย่างยิ่งสำหรับการส่งข้อมูลที่มีขนาดเล็กแต่ต้องส่งบ่อยๆ
  • ​WebSocket ทำงานอย่างไร?
1) Handshake (การจับมือ)
ไคลเอนต์จะเริ่มต้นด้วยการส่งคำขอ HTTP พิเศษที่มีหัวข้อ Upgrade: websocket ไปยังเซิร์ฟเวอร์เพื่อขอเปลี่ยนโปรโตคอล หากเซิร์ฟเวอร์รองรับก็จะตอบกลับด้วยรหัสสถานะ 101 Switching Protocols จากนั้นการเชื่อมต่อจะถูกอัปเกรดจาก HTTP เป็น WebSocket ทันที
2
2) การสื่อสารแบบสองทาง (Data Transfer)
เมื่อการจับมือสำเร็จ การเชื่อมต่อ TCP นั้นจะยังคง "เปิด" อยู่ตลอดเวลา ทั้งไคลเอนต์ และ เซิร์ฟเวอร์สามารถส่งข้อมูลไปหากันได้โดยตรงโดยไม่จำเป็นต้องสร้างคำขอใหม่ซ้ำๆ การเชื่อมต่อนี้จะสิ้นสุดลงก็ต่อเมื่อฝ่ายใดฝ่ายหนึ่งทำการปิดการเชื่อมต่อลงเท่านั้น
  • ​ประเภทของ WebSocket
แม้โปรโตคอล WebSocket จะมีมาตรฐานเดียวคือ RFC 6455 แต่เราสามารถจำแนกตามรูปแบบการรักษาความปลอดภัย และ เครื่องมือที่ใช้ได้ดังนี้
⚪ Plain WebSocket (WS)
เป็นการเชื่อมต่อมาตรฐานแบบไม่เข้ารหัสผ่านพอร์ต 80
⚪ Secure WebSocket (WSS)
การเชื่อมต่อที่ปลอดภัยผ่านการเข้ารหัส TLS/SSL (เช่นเดียวกับ HTTPS) โดยใช้พอร์ต 443 ซึ่งเป็นมาตรฐานที่แนะนำสำหรับการใช้งานจริงในปัจจุบัน
⚪ การใช้งานผ่าน Library
นักพัฒนามักใช้เครื่องมืออย่าง Socket.IO (สำหรับ JavaScript) หรือ SignalR (สำหรับ .NET) เพื่อเพิ่มฟีเจอร์เสริม เช่น การส่งข้อมูลแบบกลุ่ม (Broadcasting) หรือ ระบบสำรองในกรณีที่เครือข่ายไม่รองรับ WebSocket
2
  • ​ประโยชน์ของ WebSocket
✅ิ เรียลไทม์อย่างแท้จริง
ลดความหน่วง (Latency) ข้อมูลจากเซิร์ฟเวอร์ส่งถึงผู้ใช้ได้ในเสี้ยววินาทีโดยไม่ต้องรอคำขอ
✅ประหยัดทรัพยากร
ลดภาระของระบบด้วยการตัด Header ของ HTTP ที่ซ้ำซ้อนออกไปในการสื่อสารแต่ละครั้ง ทำให้ประหยัดแบนด์วิดท์ได้มหาศาล
✅ การเชื่อมต่อที่มั่นคง
ลดภาระการสร้าง และ ตัดการเชื่อมต่อใหม่ซ้ำๆ บนเซิร์ฟเวอร์
✅ เซิร์ฟเวอร์เป็นผู้นำ
อนุญาตให้เซิร์ฟเวอร์ "ดัน" (Push) ข้อมูลหาผู้ใช้ได้ทันทีเมื่อมีเหตุการณ์ใหม่เกิดขึ้น
  • ​ความแตกต่างระหว่าง WebSocket และ REST API
หากเปรียบเทียบในแง่การใช้งานจะเห็นความแตกต่างที่ชัดเจน ดังนี้
ในขณะที่ REST API ทำงานในรูปแบบ "คำขอ-คำตอบ" (Request-Response) ที่ไคลเอนต์ต้องเป็นฝ่ายเริ่มถามก่อนเสมอ และ การเชื่อมต่อจะปิดตัวลงทันทีหลังจากตอบเสร็จ (Stateless) ทำให้มีค่า Overhead สูงเพราะต้องส่ง Header ครบถ้วนทุกครั้ง เหมาะสำหรับงานประเภทการเรียกดูข้อมูลทั่วไป หรือ การส่งแบบฟอร์ม (CRUD operations)
แต่สำหรับ WebSocket จะเป็นการสื่อสารแบบ "สองทางเต็มรูปแบบ" ที่การเชื่อมต่อจะเปิดค้างไว้ถาวร (Persistent) ทำให้เซิร์ฟเวอร์สามารถส่งข้อมูลหาไคลเอนต์ได้เองโดยไม่ต้องรอให้ถามก่อน และ มีค่า Overhead ที่ต่ำมากหลังการเชื่อมต่อสำเร็จ จึงเป็นตัวเลือกที่ยอดเยี่ยมสำหรับแอปพลิเคชันอย่าง ห้องแชท, เกมออนไลน์, กระดานเทรดหุ้น หรือ แดชบอร์ดที่ต้องอัปเดตข้อมูลสดตลอดเวลา
  • ​ตัวอย่างการใช้งาน
1) แอปพลิเคชันสนทนา
เช่น Line หรือ Slack ที่ข้อความ และ สถานะ "กำลังพิมพ์" ปรากฏแก่ผู้ใช้อื่นทันที
2) การแจ้งเตือนแบบพุช
แดชบอร์ดวิเคราะห์ผลฟุตบอล หรือ ราคาบิตคอยน์ที่ตัวเลขเปลี่ยนไปมาโดยไม่ต้องรีเฟรชหน้าจอ
3) เกมออนไลน์
การเคลื่อนที่ของผู้เล่นคนอื่นที่แสดงผลบนหน้าจอเราแบบวินาทีต่อวินาที
4) อุปกรณ์ IoT
การส่งคำสั่งเปิด-ปิดไฟ หรือ การรับค่าอุณหภูมิจากเซนเซอร์แบบเรียลไทม์
✏️ Shoper Gamer
  • ​TCP คืออะไร 👇
  • ​Data Flow คืออะไร
  • ​API คืออะไร 👇
Credit :
👇
  • ​https://ably.com/topic/websockets
  • ​https://www.wallarm.com/what/a-simple-explanation-of-what-a-websocket-is
  • ​https://www.borntodev.com/2024/03/23/websocket-คืออิหยัง/
  • ​https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

ดูเพิ่มเติมในซีรีส์

โฆษณา