การทำงานของ WebSocket

WebSocket คือโปรโตคอลการสื่อสารที่ให้ความสามารถในการสร้างการเชื่อมต่อสองทางระหว่างไคลเอนต์ (เช่น เว็บเบราว์เซอร์) และเซิร์ฟเวอร์ ซึ่งช่วยให้สามารถส่งข้อมูลระหว่างกันได้ในแบบเรียลไทม์ โดยไม่ต้องทำการร้องขอใหม่ทุกครั้ง

การทำงานของ WebSocket

1. การเริ่มต้นการเชื่อมต่อ (Handshake):
   • ไคลเอนต์จะส่ง HTTP Request ไปยังเซิร์ฟเวอร์เพื่อขอสร้างการเชื่อมต่อ WebSocket โดยมีส่วนหัวพิเศษ (Upgrade และ Connection) เพื่อบอกว่าเป็นการเชื่อมต่อ WebSocket
   • เซิร์ฟเวอร์ตอบกลับด้วย HTTP Response ที่ระบุว่าได้ยอมรับการเชื่อมต่อ WebSocket แล้ว
2. การเชื่อมต่อแบบ Full-Duplex:
   • เมื่อการเชื่อมต่อถูกสร้างขึ้นสำเร็จ การสื่อสารระหว่างไคลเอนต์และเซิร์ฟเวอร์จะเกิดขึ้นในลักษณะ full-duplex หมายความว่าทั้งสองฝั่งสามารถส่งและรับข้อมูลได้ในเวลาเดียวกัน
3. การส่งข้อมูล (Data Frames):
   • ข้อมูลจะถูกแบ่งเป็น frames และส่งไปยังอีกฝั่งหนึ่ง ไม่ว่าจะเป็นข้อความ (text frames) หรือข้อมูลไบนารี (binary frames)
   • ไคลเอนต์และเซิร์ฟเวอร์สามารถส่งข้อมูลได้ตลอดเวลาโดยไม่ต้องรอการตอบกลับจากอีกฝั่ง
4. การปิดการเชื่อมต่อ:
   • ไคลเอนต์หรือเซิร์ฟเวอร์สามารถขอปิดการเชื่อมต่อได้ตลอดเวลา โดยส่งข้อความปิดการเชื่อมต่อ (close frame)
   • ฝั่งที่ได้รับ close frame จะต้องตอบกลับด้วย close frame ของตัวเองเพื่อยืนยันการปิดการเชื่อมต่อ

ข้อดีของ WebSocket

• ประสิทธิภาพสูง: ไม่ต้องสร้าง HTTP Request ใหม่ทุกครั้ง ลด overhead ของการสร้างการเชื่อมต่อ
• การสื่อสารแบบเรียลไทม์: เหมาะสำหรับแอปพลิเคชันที่ต้องการการอัพเดทข้อมูลแบบเรียลไทม์ เช่น แชทออนไลน์ เกมออนไลน์ และการอัพเดทข้อมูลสด
• ความยืดหยุ่น: สามารถส่งข้อมูลประเภทต่างๆ ได้ เช่น ข้อความและข้อมูลไบนารี

ตัวอย่างการใช้งาน WebSocket

// ไคลเอนต์
const socket = new WebSocket('ws://example.com/socket');

// เมื่อการเชื่อมต่อสำเร็จ
socket.onopen = function(event) {
    console.log('Connected to the server');
    socket.send('Hello Server!');
};

// เมื่อได้รับข้อความจากเซิร์ฟเวอร์
socket.onmessage = function(event) {
    console.log('Message from server:', event.data);
};

// เมื่อการเชื่อมต่อถูกปิด
socket.onclose = function(event) {
    console.log('Disconnected from the server');
};

// เมื่อเกิดข้อผิดพลาด
socket.onerror = function(error) {
    console.error('WebSocket error:', error);
};

WebSocket เป็นเครื่องมือที่มีประสิทธิภาพและยืดหยุ่นมากในการสร้างการสื่อสารแบบเรียลไทม์ระหว่างไคลเอนต์และเซิร์ฟเวอร์ และมีการใช้งานอย่างแพร่หลายในแอปพลิเคชันที่ต้องการการอัพเดทข้อมูลอย่างต่อเนื่อง