Programming

WebSocket Real-time สร้างยังไง

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

WebSocket Real-time: โลกมันเปลี่ยนไปแล้ว!

น้องๆ เคยไหม สมัยก่อนอยากคุยกับเพื่อนใน MSN ต้องกด Refresh รัวๆ กว่าจะรู้ว่าเพื่อนตอบมาแล้ว เดี๋ยวนี้มันยุค Real-time แล้วโว้ย! WebSocket นี่แหละพระเอกของเรา ที่ทำให้ข้อมูลมันวิ่งปรู๊ดปร๊าด อัพเดทกันแบบวินาทีต่อวินาที ไม่ต้องรอรีเฟรชให้เสียเวลา

WebSocket มันไม่ใช่แค่เทคโนโลยี แต่มันคือประสบการณ์ใช้งานที่ดีขึ้นของ User คิดดูดิ เกมออนไลน์ที่เล่นกันมันส์ๆ หรือ Chat application ที่คุยกันแบบ Live สดๆ นั่นแหละพลังของ Real-time ที่ WebSocket มอบให้

ทำไม WebSocket ถึงสำคัญ?

สมัยก่อนเราใช้ HTTP request/response ธรรมดา ซึ่งมันเป็นแบบ "ฉันถาม เธอตอบ" แต่ WebSocket มันเป็นแบบ "ฉันคุยกับเธอ เธอคุยกับฉัน" คือมันเปิดช่องทางสื่อสารแบบสองทางตลอดเวลา (Full-duplex communication) ทำให้ Server กับ Client คุยกันได้ตลอดเวลา โดยไม่ต้องรอให้ใครถามใครตอบ

ลองนึกภาพตามนะ: HTTP เหมือนโทรศัพท์บ้านที่ต้องยกหูโทรออกทุกครั้งที่จะคุย แต่ WebSocket เหมือน Walkie-Talkie ที่เปิดรอรับฟังตลอดเวลา ใครพูดอะไรก็ได้ยินทันที

WebSocket ทำงานยังไง?

ง่ายๆ เลยนะ WebSocket เริ่มต้นจากการ "Handshake" ผ่าน HTTP ธรรมดาก่อน พอ Handshake สำเร็จ Server กับ Client ก็จะสลับไปใช้ Protocol WebSocket แทน ซึ่งมันจะคง Connection เอาไว้ตลอดเวลา ไม่ต้องสร้าง Connection ใหม่ทุกครั้ง

ลองดู Code ตัวอย่างง่ายๆ (JavaScript) ฝั่ง Client:

const socket = new WebSocket('ws://example.com/socketserver');

socket.onopen = () => {
  console.log('Connected to WebSocket server');
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('Message from server: ', event.data);
};

socket.onclose = () => {
  console.log('Disconnected from WebSocket server');
};

socket.onerror = (error) => {
  console.log('WebSocket error: ', error);
};

Code นี้คือเราสร้าง WebSocket object ขึ้นมา แล้วกำหนด Listener สำหรับ Event ต่างๆ เช่น `onopen` (เมื่อ Connection สร้างสำเร็จ), `onmessage` (เมื่อมี Message ส่งมา), `onclose` (เมื่อ Connection ถูกปิด) และ `onerror` (เมื่อเกิด Error)

สร้าง WebSocket Server อย่างง่ายด้วย Node.js

เอาล่ะ มาลองสร้าง Server ง่ายๆ ด้วย Node.js กันบ้าง สมัยผมทำร้านเน็ต SiamCafe นี่ต้องเขียน Server เองหมดนะ เดี๋ยวนี้มี Library ให้ใช้เยอะแยะ สบายเลย

ก่อนอื่นต้อง Install `ws` Library ก่อน:

npm install ws

แล้วก็ Code Server ของเรา:

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: ${message}`);
    ws.send(`Server received: ${message}`);
  });

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

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

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

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

Step-by-step สร้าง WebSocket Application

1. วางแผน: คิดก่อนว่าจะทำอะไร Real-time บ้าง Chat? Game? Dashboard?
2. เลือก Technology: Node.js, Python, Go... เลือกที่ถนัด
3. ออกแบบ Protocol: กำหนด Message Format ที่ Server กับ Client จะคุยกัน
4. Implement Server: เขียน Logic ของ Application บน Server
5. Implement Client: เขียน Logic ของ Application บน Client
6. Testing: ทดสอบให้ละเอียดว่าทุกอย่างทำงานถูกต้อง
7. Deploy: เอาขึ้น Production ให้ User ได้ใช้จริง

สมัยผมทำร้านเน็ต SiamCafe นี่ต้อง Test กันแบบโหดๆ เพราะ User ใช้งานจริงตลอดเวลา ถ้ามี Bug นี่โดนด่าเละ!

WebSocket vs. HTTP: อะไรดีกว่ากัน?

หลายคนอาจจะสงสัยว่า HTTP ก็ใช้ได้ ทำไมต้อง WebSocket ด้วย ลองมาดูตารางเปรียบเทียบกัน:

Feature	HTTP	WebSocket
Communication Model	Request/Response	Full-Duplex
Connection	Stateless (Connection is closed after each request)	Stateful (Connection is kept open)
Real-time	Not suitable (requires polling or long polling)	Suitable
Overhead	Higher (due to HTTP headers)	Lower
Use Cases	General web browsing, fetching resources	Real-time applications, chat, online games

จากตารางจะเห็นว่า WebSocket เหมาะกับ Application ที่ต้องการ Real-time และ Overhead ต่ำกว่า ในขณะที่ HTTP เหมาะกับ Application ทั่วไปที่ไม่ต้องการ Real-time

ข้อควรระวังในการใช้ WebSocket

WebSocket มันก็มีข้อเสียนะน้องๆ อย่างเช่น:

• Complexity: การ Implement WebSocket ค่อนข้างซับซ้อนกว่า HTTP
• Scalability: การ Scale WebSocket Server ให้รองรับ User จำนวนมากๆ เป็นเรื่องท้าทาย
• Security: ต้องระวังเรื่อง Security ให้ดี เพราะ WebSocket เป็น Connection ที่เปิดอยู่ตลอดเวลา

สมัยผมทำร้านเน็ต SiamCafe เคยโดนโจมตี DDoS ผ่าน WebSocket มาแล้ว ต้องแก้ปัญหากันหัวหมุนเลย

🎬 วิดีโอแนะนำ

ดูวิดีโอเพิ่มเติมเกี่ยวกับWebSocket Real-time สร้างยังไง:

FAQ เกี่ยวกับ WebSocket

1. WebSocket ใช้ Port อะไร?

   WebSocket ใช้ Port 80 สำหรับ Unencrypted Connection (ws://) และ Port 443 สำหรับ Encrypted Connection (wss://) แต่จริงๆ แล้วเราสามารถใช้ Port อื่นๆ ได้ตามต้องการ

2. WebSocket กับ Socket.IO ต่างกันยังไง?

   Socket.IO เป็น Library ที่สร้างอยู่บน WebSocket อีกที มันช่วยให้การ Implement WebSocket ง่ายขึ้น และมี Feature เพิ่มเติม เช่น Fallback ไปใช้ Polling ในกรณีที่ WebSocket ไม่ Support

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

   WebSocket สามารถปลอดภัยได้ ถ้าใช้ Encrypted Connection (wss://) และ Implement Security measures ที่เหมาะสม เช่น Authentication และ Authorization

4. WebSocket เหมาะกับ Application แบบไหน?

   WebSocket เหมาะกับ Application ที่ต้องการ Real-time เช่น Chat application, Online games, Stock market tickers, และ Real-time dashboards

หวังว่าน้องๆ จะเข้าใจ WebSocket มากขึ้นนะ ถ้าอยากรู้เรื่อง IT สนุกๆ อีก ตามไปอ่านได้ที่ SiamCafe Blog นะครับ

จำไว้ว่าเทคโนโลยีมันเปลี่ยนไปเรื่อยๆ เราต้องเรียนรู้ตลอดเวลา สมัยผมทำร้านเน็ต SiamCafe นี่ต้องตามข่าว IT ทุกวัน ไม่งั้นตกยุค!

ถ้าอยากอ่านเรื่องสนุกๆ เกี่ยวกับ IT และ Programming อีก ตามไปอ่านได้ที่ SiamCafe Blog นะครับ

Best Practices

จัดการ Connection ให้ดี

สมัยผมทำร้านเน็ต Connection สำคัญสุดๆ WebSocket ก็เหมือนกัน อย่าเปิดทิ้งเปิดขว้าง Client หลุด Server ต้องรู้ Server พัง Client ต้อง Reconnect เองอัตโนมัติ

// Javascript (Client-side)
let ws = new WebSocket("ws://example.com/socket");

ws.onclose = () => {
  console.log("Connection closed, reconnecting...");
  setTimeout(() => {
    ws = new WebSocket("ws://example.com/socket"); // Reconnect
  }, 3000); // Try reconnecting after 3 seconds
};

Code นี้ Client จะพยายาม Reconnect เองทุก 3 วินาทีถ้า Connection หลุด แต่ต้องมี Logic ฝั่ง Server ด้วยนะ

Security มาก่อนเสมอ

WebSocket ไม่ได้ปลอดภัยเอง Security ต้อง Build-in เอง ตั้งแต่ Authentication, Authorization, Encryption สำคัญหมด ไม่งั้นโดน Hack ง่ายๆ

ใช้ WSS (WebSocket Secure) แทน WS เสมอ เหมือน HTTPS เลย

Message Format สำคัญ

เลือก Format ที่ Parse ง่ายๆ อย่าง JSON หรือ Protocol Buffers อย่าส่ง Text ธรรมดา เพราะต้องมานั่ง Split String เอง ปวดหัวตาย

// JSON Example
{
  "type": "chat_message",
  "user": "bomb",
  "message": "สวัสดีชาว SiamCafe!"
}

Parse JSON ง่ายกว่าเยอะ เชื่อผม

อย่าส่ง Data เยอะเกินไป

WebSocket มัน Real-time ก็จริง แต่ Bandwidth ก็มีจำกัด ส่ง Data ที่จำเป็นจริงๆ เท่านั้น อย่าส่ง History Chat 1000 ข้อความทุกครั้งที่ User Connect

Pagination ช่วยได้เยอะ หรือใช้ Diff Algorithm ส่งเฉพาะส่วนที่เปลี่ยนแปลง

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

WebSocket ต่างจาก HTTP ยังไง?

HTTP เป็น Request-Response Client ถาม Server ตอบ จบ WebSocket เป็น Connection ถาวร Server Push ข้อมูลให้ Client ได้ตลอดเวลา

เหมือนโทรศัพท์ กับ ส่งจดหมาย

ใช้ WebSocket กับ Framework อะไรดี?

Node.js กับ Socket.IO นี่ของมันต้องมี หรือจะใช้ Laravel Echo ก็ได้ ถ้าถนัด PHP

แต่ถ้าอยาก Hardcore หน่อย ก็เขียน Raw WebSocket เลย

WebSocket Scalable ไหม?

Scalable แต่ต้อง Design ดีๆ ใช้ Load Balancer, Message Queue ช่วยได้เยอะ เคยเจอเคสร้านเกมส์ Scale ไม่ดี Client 100 คน Server ก็อืดแล้ว

iCafeForex ก็ใช้ WebSocket นะ Scale ยากเหมือนกัน

Browser ไหน Support WebSocket บ้าง?

สมัยนี้ Browser Support หมดแล้ว Chrome, Firefox, Safari, Edge ใช้ได้หมด แต่ IE นี่ไม่แน่ใจ (ฮา)

แต่ต้อง Check Version ด้วยนะ WebSocket Protocol มัน Upgrade เรื่อยๆ

สรุป

WebSocket เป็น Technology ที่ Powerful มาก สร้าง Real-time Application ได้สารพัดประโยชน์ ตั้งแต่ Chat, Game, Dashboard, Monitoring

แต่ต้องเข้าใจ Concept, Best Practices, Security ถึงจะใช้ได้จริง ไม่งั้นเจอปัญหาจุกจิกเยอะแยะ SiamCafe Blog มีบทความ IT อีกเพียบ ลองไปอ่านดู

หวังว่าบทความนี้จะมีประโยชน์นะครับ ถ้ามีคำถามเพิ่มเติม Comment มาได้เลย