ถ้าคุณเคยสร้างเว็บด้วย PHP แล้วรู้สึกว่า "ทำไมต้องรีเฟรชหน้าเว็บเพื่ออัปเดตข้อมูล?" หรือ "ทำไมต้องใช้ AJAX โพลลิ่งให้เว็บโหลดช้า?" 🤔
WebSocket คือคำตอบ! 🎉
WebSocket ทำให้ เซิร์ฟเวอร์กับเว็บคุยกันแบบเรียลไทม์ได้เลย ไม่ต้องโหลดหน้าใหม่ ไม่ต้องส่งรีเควสต์ซ้ำ ๆ เหมือน AJAX แถมเร็วกว่า HTTP ธรรมดาหลายเท่า
บทความนี้จะพาคุณไปรู้จัก PHP WebSocket ตั้งแต่พื้นฐานจนถึงขั้นเทพ พร้อมตัวอย่างโค้ดให้ลองใช้จริง!
1. WebSocket คืออะไร และทำไมต้องใช้มัน? 🤷♂️
✅ WebSocket คืออะไร?
WebSocket คือ โปรโตคอลที่ทำให้การสื่อสารระหว่างเซิร์ฟเวอร์กับไคลเอนต์เป็นแบบสองทาง (bidirectional) และเกิดขึ้นได้แบบเรียลไทม์
พูดง่าย ๆ คือ
- HTTP ธรรมดา: ไคลเอนต์ต้องเป็นฝ่ายส่งรีเควสต์ก่อน แล้วเซิร์ฟเวอร์ตอบกลับ
- AJAX Polling: ต้องส่งรีเควสต์ซ้ำ ๆ เพื่อตรวจสอบข้อมูลใหม่ (เสียทรัพยากรเยอะ)
- WebSocket: ไคลเอนต์และเซิร์ฟเวอร์สามารถส่งข้อมูลถึงกันได้ทันที ไม่ต้องรีเฟรช
✅ ใช้ WebSocket ทำอะไรได้บ้าง?
🔹 Chat Application (แชทแบบเรียลไทม์)
🔹 Notification System (แจ้งเตือนอัปเดตทันที)
🔹 Live Dashboard (ดึงข้อมูลจากเซิร์ฟเวอร์สด ๆ)
🔹 Online Gaming (เกมออนไลน์ที่ต้องการความไว)
🔹 Stock Market Updates (ราคาหุ้นแบบเรียลไทม์)
2. วิธีใช้ WebSocket กับ PHP (ตัวอย่างใช้งานจริง!) 🔥
2.1 ติดตั้ง WebSocket Server ใน PHP
PHP ไม่ได้รองรับ WebSocket โดยตรง ต้องใช้ Ratchet (ไลบรารี WebSocket สำหรับ PHP)
📌 วิธีติดตั้ง Ratchet ด้วย Composer:
composer require cboden/ratchet
2.2 สร้าง WebSocket Server ด้วย PHP
<?php
require 'vendor/autoload.php';
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
class ChatServer implements MessageComponentInterface {
protected $clients;
public function __construct() {
$this->clients = new \SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn) {
$this->clients->attach($conn);
echo "New connection! ({$conn->resourceId})\n";
}
public function onMessage(ConnectionInterface $from, $msg) {
foreach ($this->clients as $client) {
if ($client !== $from) {
$client->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn) {
$this->clients->detach($conn);
echo "Connection {$conn->resourceId} has disconnected\n";
}
public function onError(ConnectionInterface $conn, \Exception $e) {
echo "Error: {$e->getMessage()}\n";
$conn->close();
}
}
use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
$server = IoServer::factory(
new WsServer(new ChatServer()),
8080
);
echo "WebSocket Server is running on port 8080...\n";
$server->run();
?>
🔥 โค้ดนี้ทำอะไร?
✔ เปิด WebSocket Server ที่รันบนพอร์ต 8080
✔ เมื่อมีคนเชื่อมต่อ จะบันทึกการเชื่อมต่อไว้
✔ เมื่อได้รับข้อความจากไคลเอนต์ จะแชร์ให้คนอื่น ๆ ในระบบ
✔ ถ้าการเชื่อมต่อขาด จะลบออกจากระบบ
2.3 สร้าง WebSocket Client (ฝั่งเว็บ)
📌 โค้ด JavaScript ฝั่งไคลเอนต์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP WebSocket Chat</title>
</head>
<body>
<h2>PHP WebSocket Chat</h2>
<input type="text" id="message" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
let ws = new WebSocket("ws://localhost:8080");
ws.onopen = () => {
console.log("Connected to WebSocket server");
};
ws.onmessage = (event) => {
let chatBox = document.getElementById("chat");
chatBox.innerHTML += "<p>" + event.data + "</p>";
};
function sendMessage() {
let message = document.getElementById("message").value;
ws.send(message);
}
</script>
</body>
</html>
🔥 โค้ดนี้ทำอะไร?
✔ สร้าง WebSocket connection ไปที่ ws://localhost:8080
✔ เมื่อเซิร์ฟเวอร์ส่งข้อความมา จะแสดงในแชท
✔ เมื่อพิมพ์ข้อความแล้วกดส่ง จะส่งข้อความไปที่ WebSocket Server
3. ทดสอบ WebSocket Server และ Client
1️⃣ รัน WebSocket Server
php websocket_server.php
📌 จะเห็นข้อความบอกว่า WebSocket Server ทำงานอยู่ที่พอร์ต 8080
2️⃣ เปิด Client ผ่านเว็บเบราว์เซอร์
📌 เปิด index.html แล้วลองส่งข้อความดู ข้อความจะแสดงผลแบบเรียลไทม์
4. เปรียบเทียบ WebSocket กับ AJAX Polling
| Feature | WebSocket | AJAX Polling |
|---|---|---|
| การทำงาน | การเชื่อมต่อสองทาง (bidirectional) | ไคลเอนต์ต้องส่งรีเควสต์ตลอด |
| ความเร็ว | เร็วมาก (ส่งข้อมูลทันที) | ช้า (ต้องรอรีเควสต์) |
| ใช้ทรัพยากร | ใช้แบนด์วิดท์น้อย | ใช้ทรัพยากรมาก |
| กรณีใช้งาน | แชท, แจ้งเตือน, เกมออนไลน์ | โหลดข้อมูลจาก API |
| รองรับแบบเรียลไทม์ | ✅ ใช่ | ❌ ไม่ใช่ |
5. ข้อดี-ข้อเสียของ PHP WebSocket
✅ ข้อดี
✔ เร็วกว่า AJAX polling เพราะไม่ต้องส่งรีเควสต์ซ้ำ ๆ
✔ ลดโหลดของเซิร์ฟเวอร์ เพราะการเชื่อมต่อคงอยู่ตลอด
✔ ใช้งานง่าย มีไลบรารีช่วย เช่น Ratchet
❌ ข้อเสีย
❌ ต้องมี WebSocket Server ไม่สามารถใช้กับ Apache/PHP ปกติได้
❌ บางโฮสต์ไม่รองรับ ต้องใช้ VPS หรือเซิร์ฟเวอร์ที่เปิด WebSocket ได้
6. สรุป: PHP WebSocket คืออนาคตของเว็บแอปแบบเรียลไทม์
🔥 PHP + WebSocket ทำให้เว็บของคุณทันสมัยขึ้นแบบสุด ๆ
- ใช้ทำ Chat Application, Live Dashboard, Notification System
- ติดตั้งง่าย แค่ใช้ Ratchet
- เร็วกว่าการใช้ AJAX Polling
- เหมาะกับเว็บที่ต้องการ อัปเดตข้อมูลทันทีแบบเรียลไทม์
💡 ถ้าอยากให้เว็บโต้ตอบได้เร็วขึ้น อย่าลืมลองใช้ WebSocket! 🚀
ไม่มีความคิดเห็น:
แสดงความคิดเห็น