การสร้างแอปพลิเคชันแบบ Real-Time ด้วย WebSockets

การทำ Polling นั้นไม่ดีต่อแอปของคุณ

ครั้งหนึ่งผมเคยสร้าง chat widget โดยใช้ AJAX polling ผมตั้งค่าให้แอปส่งคำขอไปยังเซิร์ฟเวอร์เพื่อเช็กข้อความใหม่ทุกๆ วินาที มันใช้งานได้ แต่มันช้า UI รู้สึกหน่วง เซิร์ฟเวอร์ต้องทำงานหนักเกินไป และคำขอส่วนใหญ่ก็ส่งข้อมูลว่างเปล่ากลับมา มันให้ความรู้สึกเหมือนพยายามจะเติมน้ำให้เต็มอ่างอาบน้ำด้วยช้อนชา

WebSockets เปลี่ยนสิ่งนี้

แทนที่จะต้องส่งคำขออยู่ตลอดเวลา คุณเพียงแค่เปิดการเชื่อมต่อแบบค้างไว้ (persistent connection) เพียงครั้งเดียว ซึ่งช่วยให้ข้อมูลสามารถไหลเวียนได้แบบสองทาง (two-way flow) เซิร์ฟเวอร์สามารถส่งข้อมูล (push) ไปยัง client ได้ทันที และ client ก็สามารถส่งข้อมูลไปยังเซิร์ฟเวอร์ได้ทันทีเช่นกัน

ทำไมต้องใช้ WebSockets?

• Latency ลดลงจากระดับหลายร้อยมิลลิวินาทีเหลือเพียงไม่กี่สิบมิลลิวินาที • ภาระของเซิร์ฟเวอร์ (Server load) สามารถคาดการณ์ได้ • ประหยัดแบนด์วิดท์เนื่องจากไม่ต้องส่ง HTTP headers ซ้ำๆ • เหมาะสำหรับระบบแชท, การแจ้งเตือนแบบสด (live notifications) และเกมมัลติเพลเยอร์

หลักการทำงาน:

การเชื่อมต่อเริ่มต้นด้วย HTTP upgrade request หากเซิร์ฟเวอร์ตอบตกลง จะมีการส่ง status code 101 กลับมา หลังจากนั้นคุณจะใช้โปรโตคอลแบบ binary หรือ text ดิบๆ โดยจะไม่มี cookies หรือ headers มาทำให้คุณช้าลงอีกต่อไป

กับดักที่พบบ่อยซึ่งควรหลีกเลี่ยง:

  • การเชื่อมต่อหลุด: เครือข่ายอาจขัดข้อง คุณต้องวางกลยุทธ์การลองใหม่ (retry strategy) เช่น exponential backoff
  • Memory leaks: ควรปิด socket เสมอเมื่อผู้ใช้งานออกจากระบบ การเชื่อมต่อที่ค้างอยู่ (Zombie connections) จะกัดกินหน่วยความจำของเซิร์ฟเวอร์
  • Message loops: เมื่อทำการ broadcast ให้ข้ามผู้ส่งต้นทางไป มิฉะนั้น ผู้ใช้จะเห็นข้อความของตัวเองซ้ำสองครั้ง
  • Idle connections: Proxy บางตัวอาจปิดการเชื่อมต่อที่ไม่มีการเคลื่อนไหว ควรใช้ ping/pong heartbeat เพื่อรักษาการเชื่อมต่อ socket ให้ยังคงอยู่

เลิกถามเซิร์ฟเวอร์ว่ามีอะไรเปลี่ยนแปลงไหม แต่ให้เริ่มจากการเปิดช่องทางการสื่อสารค้างไว้ เพื่อที่คุณจะได้คุยกันได้ทุกเมื่อที่ต้องการ

ความท้าทายของคุณ:

ลองนำตัวอย่างแชทพื้นฐานมาใช้ แล้วเพิ่มตัวบ่งชี้ "typing..." เข้าไป จากนั้นลอง Deploy ไปยังโฮสต์อย่าง Render หรือ Fly.io เมื่อคุณเห็นตัวบ่งชี้นั้นเคลื่อนไหวแบบ real time โดยไม่ต้องใช้ polling แสดงว่าคุณได้ยกระดับฝีมือขึ้นแล้ว

ที่มา: https://dev.to/timevolt/the-matrix-of-real-time-building-websocket-apps-for-chat-notifications-and-live-updates-3ja1