WebSocket คืออะไร? ทำ Real-Time Chat ง่าย ๆ

Sharing is caring!

บทนำ

หากคุณเคยใช้งานระบบที่ต้องการอัปเดตข้อมูลแบบทันที เช่น ระบบแชท เกมออนไลน์ การแจ้งเตือนแบบ real-time คุณอาจสงสัยว่าทำอย่างไรให้เว็บสามารถสื่อสารสองทางแบบรวดเร็วได้ นี่คือสิ่งที่ WebSocket เข้ามาช่วยแก้ปัญหาให้ได้อย่างมีประสิทธิภาพ

WebSocket คืออะไร?

WebSocket เป็น protocol พิเศษที่ช่วยให้ client (เช่น browser) และ server สามารถเปิดการเชื่อมต่อแบบสองทาง (bi-directional) ได้อย่างต่อเนื่องโดยไม่ต้องร้องขอข้อมูลใหม่ซ้ำ ๆ เหมือน HTTP

เมื่อเชื่อมต่อแล้ว ทั้งสองฝ่ายสามารถส่งข้อมูลถึงกันได้ทันทีแบบ real-time โดยไม่ต้อง “request – response” ซ้ำ ๆ

เปรียบเทียบ: WebSocket vs HTTP

คุณสมบัติ	HTTP	WebSocket
รูปแบบ	Request → Response	Connection ต่อเนื่อง
ความเร็ว	ช้า (รอ polling)	เร็ว (push ได้ทันที)
การใช้งาน	เว็บทั่วไป, API	Chat, Gaming, Stock Ticker

การสร้าง Real-Time Chat ด้วย WebSocket

1. Backend (Node.js + ws)

npm install ws

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', msg => {
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(msg);
      }
    });
  });
});

2. Frontend (HTML + JavaScript)

<script>
  const socket = new WebSocket('ws://localhost:8080');

  socket.onmessage = event => {
    const message = document.createElement('div');
    message.innerText = event.data;
    document.body.appendChild(message);
  };

  function sendMessage(msg) {
    socket.send(msg);
  }
</script>

ข้อดีของ WebSocket

• ส่งข้อมูลได้เร็วมากแบบ real-time
• ลดการใช้ bandwidth เพราะไม่ต้อง request ซ้ำ
• เหมาะกับแอปพลิเคชันแบบ interactive เช่น multiplayer game
• เชื่อมต่อครั้งเดียว ส่งข้อมูลได้หลายรอบ

ข้อจำกัดของ WebSocket

• ต้องดูแลเรื่อง connection timeout
• ไม่เหมาะกับ API ที่ไม่มีความถี่ในการอัปเดต
• บาง firewall หรือ proxy อาจบล็อก WebSocket

เมื่อไหร่ควรใช้ WebSocket?

• ระบบแชท
• การแจ้งเตือนแบบทันที (real-time notification)
• เกมออนไลน์
• Live update เช่น dashboard หรือราคาหุ้น

สรุป

WebSocket เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างแอปพลิเคชันแบบ real-time โดยเฉพาะการแชท และการสื่อสารสองทางระหว่าง client-server ในรูปแบบที่รวดเร็วและประหยัดทรัพยากร

บทความนี้ใช้เวลาอ่าน 10 – 15 นาที เขียนโดยทีมงาน poolsawat.com