Web

Websocket Realtime Application Guide

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

Websocket Realtime Application Guide คืออะไร / ทำไมถึงสำคัญ

น้องๆ เคยเล่นเกมออนไลน์ไหม? หรือเห็นพวกแชทสดๆ ที่ข้อความเด้งขึ้นมาทันทีไหม? นั่นแหละคือพลังของ Realtime Application ซึ่ง Websocket เป็นเทคโนโลยีที่ทำให้มันเป็นไปได้ไง

สมัยผมทำร้านเน็ต SiamCafe.net เมื่อ 20 กว่าปีก่อน พวกนี้ยังเป็นเรื่องใหม่มาก แต่ตอนนี้มันกลายเป็นพื้นฐานของเว็บยุคใหม่ไปแล้วนะ เพราะมันทำให้การสื่อสารระหว่าง Server กับ Client เร็ว แรง และ Realtime จริงๆ ไม่ต้อง Refresh หน้าเว็บให้เสียเวลา

ทำไมถึงสำคัญ? ลองนึกภาพตามนะ ถ้าเราจะทำเว็บเทรดหุ้น แล้วข้อมูลราคาหุ้นมันไม่อัพเดทแบบ Realtime จะมีใครกล้าใช้ไหม? หรือถ้าแชทสดๆ มันดีเลย์เป็นนาที จะมีใครอยากคุยด้วยไหมล่ะ?

Websocket เลยเข้ามาแก้ปัญหาพวกนี้แหละ ทำให้ข้อมูลมันไหลลื่น Realtime เหมาะกับ Application ที่ต้องการความรวดเร็วในการตอบสนอง เช่น เกมออนไลน์, แชท, Dashboard แสดงผลข้อมูลสดๆ, หรือแม้แต่ IoT ที่ต้องควบคุมอุปกรณ์ต่างๆ แบบทันทีทันใด

พื้นฐานที่ต้องรู้

Protocol HTTP vs Websocket

HTTP (Hypertext Transfer Protocol) คือ Protocol พื้นฐานของการสื่อสารบนเว็บ ที่เราใช้กันทุกวันเวลาเปิด Browser แต่ HTTP มันเป็นแบบ Request-Response คือ Client ต้องส่ง Request ไปก่อน Server ถึงจะตอบกลับมาได้

แต่ Websocket มันต่างออกไป เพราะมันสร้าง Connection แบบ Persistent คือ Client กับ Server จะเปิดช่องทางสื่อสารค้างไว้เลย ทำให้สามารถส่งข้อมูลไปมาได้ตลอดเวลา โดยไม่ต้องรอ Request-Response นั่นเอง เหมือนเปิดสายโทรศัพท์คุยกันตลอดเวลา ไม่ต้องวางหูแล้วโทรใหม่ทุกครั้ง

Websocket Handshake

ก่อนที่จะสื่อสารกันด้วย Websocket จริงๆ จะต้องมีการ "Handshake" กันก่อน เป็นขั้นตอนการตกลงปลงใจกันระหว่าง Client กับ Server ว่าจะใช้ Protocol Websocket นะ โดย Client จะส่ง HTTP Request พิเศษไปที่ Server และ Server จะตอบกลับมาด้วย HTTP Response ที่บอกว่า "OK ใช้ Websocket ได้เลย"

สมัยผมเริ่มทำ Server Side Javascript ใหม่ๆ เรื่องพวกนี้ยากมาก ต้องมานั่งแกะ Header เองเลย เดี๋ยวนี้มี Library ช่วยทำให้ง่ายขึ้นเยอะ

ข้อดีข้อเสีย

ข้อดี:

• Realtime สื่อสารได้ทันที
• Full-duplex ส่งข้อมูลได้ทั้งสองทางพร้อมกัน
• ลด Overhead ไม่ต้องส่ง HTTP Header ซ้ำๆ
• เหมาะกับ Application ที่ต้องการความรวดเร็ว

ข้อเสีย:

• ซับซ้อนกว่า HTTP ต้องจัดการ Connection เอง
• Scalability อาจเป็นปัญหาถ้ามี Client จำนวนมาก
• Firewall บางตัวอาจ Block Websocket

วิธีใช้งาน / เริ่มต้นยังไง

การใช้งาน Websocket ไม่ได้ยากอย่างที่คิดนะ สมัยนี้มี Library ดีๆ ให้ใช้เยอะแยะ ทำให้เราไม่ต้องเขียน Code เองทั้งหมด

หลักๆ เราต้องมีทั้งฝั่ง Client และฝั่ง Server

ขั้นตอนปฏิบัติจริง

ฝั่ง Server (Node.js + ws)

ผมจะยกตัวอย่างการใช้ Node.js กับ Library ws นะ เพราะมันง่ายและเป็นที่นิยม

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  ws.on('message', message => {
    console.log(`Received: ${message}`);
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('Websocket server started on port 8080');

Code นี้จะสร้าง Websocket Server ที่ Port 8080 เมื่อมี Client Connect เข้ามา Server จะ Log ข้อความ และเมื่อ Client ส่ง Message มา Server ก็จะ Log ข้อความนั้น และส่ง Message กลับไปหา Client

ฝั่ง Client (HTML + Javascript)

ฝั่ง Client เราจะใช้ Javascript ใน Browser ในการ Connect ไปยัง Websocket Server

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Connected to Websocket server');
  ws.send('Hello from Client!');
};

ws.onmessage = event => {
  console.log(`Received: ${event.data}`);
};

ws.onclose = () => {
  console.log('Disconnected from Websocket server');
};

ws.onerror = error => {
  console.error('Websocket error:', error);
};

Code นี้จะ Connect ไปยัง Websocket Server ที่ ws://localhost:8080 เมื่อ Connect สำเร็จ จะ Log ข้อความ และส่ง Message Hello from Client! ไปยัง Server เมื่อได้รับ Message จาก Server ก็จะ Log ข้อความนั้นออกมา

การจัดการ Error และ Reconnection

สิ่งที่สำคัญอีกอย่างคือการจัดการ Error และ Reconnection เพราะ Connection อาจจะหลุดได้ตลอดเวลา เราควรเขียน Code เพื่อ Handle Error และพยายาม Reconnect โดยอัตโนมัติ

สมัยผมทำ SiamCafe.net เคยเจอเคสที่ Network มีปัญหาบ่อยมาก ทำให้ต้องเขียน Code ดัก Error พวกนี้เยอะมาก ไม่งั้น Client จะใช้งานไม่ได้

ลองดูตัวอย่าง Code Javascript เพิ่มเติม:

ws.onerror = error => {
  console.error('Websocket error:', error);
  // พยายาม reconnect หลังจาก 5 วินาที
  setTimeout(() => {
    console.log('Reconnecting...');
    ws = new WebSocket('ws://localhost:8080'); // สร้าง websocket object ใหม่
    // กำหนด event handlers ใหม่อีกครั้ง
  }, 5000);
};

เปรียบเทียบกับทางเลือกอื่น

Websocket ไม่ใช่ทางเลือกเดียวในการสร้าง Realtime Application ยังมีทางเลือกอื่นๆ อีก เช่น Server-Sent Events (SSE) และ Long Polling แต่ละทางเลือกก็มีข้อดีข้อเสียต่างกัน

Server-Sent Events (SSE): เป็น Protocol ที่ Server สามารถ Push ข้อมูลไปยัง Client ได้ แต่ Client ไม่สามารถส่งข้อมูลกลับไปยัง Server ได้ เหมาะกับ Application ที่ต้องการให้ Server ส่งข้อมูลไปยัง Client อย่างเดียว เช่น ข่าวสาร, Stock Ticker

Long Polling: เป็นเทคนิคที่ Client จะส่ง HTTP Request ไปยัง Server และ Server จะยังไม่ตอบกลับมาจนกว่าจะมีข้อมูลใหม่ ถ้าไม่มีข้อมูลใหม่ Server ก็จะรอไปเรื่อยๆ จนกว่าจะมีข้อมูล หรือ Timeout แล้ว Client ก็จะส่ง Request ใหม่ไปอีก

ลองดูตารางเปรียบเทียบ:

Feature	Websocket	Server-Sent Events (SSE)	Long Polling
Realtime	True	True (Server to Client)	Simulated
Full-duplex	True	False	False
Overhead	Low	Low	High
Complexity	High	Medium	Low
Browser Support	Good	Good	Excellent

ถ้าให้ผมแนะนำ ถ้าต้องการ Realtime แบบ Full-duplex และ Performance ดี Websocket คือคำตอบ แต่ถ้าต้องการแค่ Server Push ข้อมูลไป Client อย่างเดียว SSE ก็เป็นทางเลือกที่ดี และถ้าต้องการ Compatibility สูงสุด Long Polling ก็ยังเป็นตัวเลือกที่ใช้ได้

หวังว่าบทความนี้จะเป็นประโยชน์กับน้องๆ นะครับ ลองเอาไปปรับใช้กันดู SiamCafe Blog ยังมีบทความอื่นๆ อีกเยอะแยะที่น่าสนใจ ลองเข้าไปอ่านดูได้

อย่าลืมว่าเทคโนโลยีมันเปลี่ยนไปเรื่อยๆ สิ่งสำคัญคือเราต้องเรียนรู้และปรับตัวอยู่เสมอ SiamCafe Blog เป็นแหล่งข้อมูลที่ดีที่จะช่วยให้น้องๆ ตามทันเทคโนโลยีใหม่ๆ

Best Practices / เคล็ดลับจากประสบการณ์

เอาล่ะน้อง! มาถึงหัวใจของเรื่อง WebSocket แล้ว สมัยผมทำร้านเน็ต SiamCafe เนี่ย เรื่องความเร็วและความเสถียรนี่สำคัญสุดๆ ใคร ping ไม่ดี หลุดบ่อย ลูกค้าหายหมด! WebSocket ก็เหมือนกัน ถ้าเขียนไม่ดี มีหวัง server ร้องแน่ๆ

จำไว้เลยว่า WebSocket มันเป็น connection ที่เปิดค้างไว้ตลอด (persistent connection) ดังนั้นการจัดการ resource ต้องดีมากๆ เดี๋ยว Memory Leak ถามหา

3-4 เทคนิคที่ใช้ได้จริง

1. Heartbeat Mechanism (การเต้นของหัวใจ)

วิธีเช็คว่า connection ยัง alive อยู่ไหม คือการส่ง "heartbeat" เป็นระยะๆ สมัยก่อนผมใช้ ping/pong ในเกมออนไลน์ พอมา WebSocket ก็คล้ายๆ กัน

// Server-side (Node.js)
setInterval(() => {
  ws.send(JSON.stringify({ type: 'ping' }));
}, 30000); // Send ping every 30 seconds

ws.on('message', message => {
  const data = JSON.parse(message);
  if (data.type === 'pong') {
    // Connection is still alive!
  }
});

Client ก็ต้องตอบกลับมาด้วย "pong" ถ้า server ไม่ได้รับ pong ในเวลาที่กำหนด ก็ disconnect ไปเลย

2. Connection Pooling

อย่าสร้าง connection ใหม่ทุกครั้งที่ต้องการส่งข้อมูล! ให้ใช้ Connection Pooling แทน (คล้ายๆ Database Connection Pool) จะช่วยลด overhead ได้เยอะ

3. Message Buffering

ถ้า client ส่ง message มาถี่ๆ อย่าประมวลผลทันที! ให้เก็บไว้ใน buffer ก่อน แล้วค่อยประมวลผลเป็น batch จะช่วยลด load บน server ได้

4. Error Handling ที่ดี

WebSocket เนี่ย error เกิดขึ้นได้ตลอดเวลา! connection อาจจะหลุด network อาจจะไม่เสถียร ต้องมี error handling ที่ครอบคลุมทุกกรณี

ws.on('error', error => {
  console.error('WebSocket error:', error);
  // Log the error, retry connection, etc.
});

อย่าลืม log error ด้วยนะ! จะได้รู้ว่าเกิดอะไรขึ้น

FAQ คำถามที่พบบ่อย

WebSocket กับ HTTP ต่างกันยังไง?

HTTP เป็น request/response คือ client request ไป server respond กลับมา จบ! แต่ WebSocket เป็น connection ที่เปิดค้างไว้ตลอด คุยกันได้สองทาง (bidirectional) real-time กว่าเยอะ!

WebSocket ปลอดภัยไหม?

WebSocket เองไม่ได้ปลอดภัย 100% ต้องใช้ WSS (WebSocket Secure) ที่ encrypt ข้อมูลเหมือน HTTPS ถึงจะปลอดภัย

Browser ไหน support WebSocket บ้าง?

Browser สมัยใหม่ support หมดแล้วน้อง! แต่ถ้าต้อง support browser เก่าๆ อาจจะต้องใช้ polyfill หรือ library ช่วย

มี library WebSocket อะไรแนะนำบ้าง?

ถ้าใช้ Node.js ก็ ws หรือ socket.io นี่แหละ ง่ายดี หรือจะลองดู iCafeForex ก็ได้นะ (อันนี้ผมแซวเล่น)

สรุป

WebSocket เนี่ยมันเจ๋งจริง! เหมาะกับ application ที่ต้องการ real-time communication แต่ต้องเข้าใจหลักการทำงานและ best practices ด้วย ไม่งั้น server ร้องแน่นอน

อย่าลืมไปลองทำดูนะน้อง! แล้วเจอปัญหาอะไร ก็มาถามได้เลย พี่บอม SiamCafe ยินดีช่วยเหลือเสมอ! แล้วแวะไปอ่าน SiamCafe Blog ด้วยนะ มีอะไรดีๆ อีกเยอะเลย!