PHP WebSocket: วิธีทำให้เว็บพูดคุยกับเซิร์ฟเวอร์แบบเรียลไทม์!

ถ้าคุณเคยสร้างเว็บด้วย 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! 🚀

PHP ทำ Realtime ได้ไหม? มาดูวิธีทำให้เว็บของคุณสดใหม่ตลอดเวลา!

ถ้าคุณเคยสงสัยว่า PHP สามารถทำเว็บไซต์แบบ Realtime ได้ไหม? คำตอบคือ ได้! แต่ไม่ง่ายเท่าไหร่ 😂 เพราะ PHP เป็นภาษาที่ออกแบบมาให้ทำงานแบบ Request-Response ซึ่งหมายความว่ามันจะรอรับคำขอจากไคลเอนต์ (เช่น เบราว์เซอร์) แล้วส่งผลลัพธ์กลับไป จากนั้นจบการทำงานไปเลย

แต่ไม่ต้องกังวล! ถึงแม้ว่า PHP จะไม่ได้เกิดมาเพื่อ Realtime โดยตรง แต่ก็มีหลายวิธีที่ช่วยให้มันทำงานแบบ Realtime ได้ 💡 วันนี้เราจะมาดู 3 วิธีหลัก ที่ช่วยให้ PHP ทำงานแบบ Realtime ได้แบบลื่น ๆ

🚀 1. ใช้ WebSockets กับ PHP – สื่อสารสองทางแบบ Real-Time

WebSockets เป็นเทคโนโลยีที่ช่วยให้ เซิร์ฟเวอร์กับไคลเอนต์สามารถพูดคุยกันได้แบบสองทาง (bi-directional communication) โดยไม่ต้องให้ไคลเอนต์รีเฟรชหน้าเว็บตลอดเวลา

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

• ไม่ต้องรีเฟรชหน้าเว็บหรือรอ request-response
• เหมาะกับแอปที่ต้องการอัปเดตข้อมูลแบบสด ๆ เช่น ระบบแชท, แจ้งเตือน, เกมออนไลน์
• ลดโหลดเซิร์ฟเวอร์ เพราะไม่ต้องยิง request บ่อย ๆ

วิธีใช้ WebSockets กับ PHP

PHP มีไลบรารีที่ช่วยให้ใช้ WebSockets ได้ง่าย เช่น Ratchet และ Swoole

ตัวอย่างการใช้ Ratchet 👇

ติดตั้ง Ratchet ก่อน

composer require cboden/ratchet

สร้างไฟล์ server.php สำหรับ WebSocket Server

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);
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            $client->send($msg);
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        $conn->close();
    }
}

จากนั้น รันเซิร์ฟเวอร์ WebSocket

php server.php

ฝั่งไคลเอนต์สามารถเชื่อมต่อ WebSocket ได้ง่าย ๆ ด้วย JavaScript

const ws = new WebSocket("ws://yourdomain.com:8080");

ws.onmessage = function(event) {
    console.log("Message from server:", event.data);
};

🔥 แค่นี้ก็ได้ระบบ WebSocket บน PHP แล้ว!

🔄 2. ใช้ Server-Sent Events (SSE) – อัปเดตจากเซิร์ฟเวอร์โดยไม่ต้องรีเฟรช

ถ้าคุณต้องการให้ เซิร์ฟเวอร์ส่งข้อมูลไปยังไคลเอนต์แบบอัตโนมัติ แต่ไม่ต้องการใช้ WebSockets Server-Sent Events (SSE) ก็เป็นอีกทางเลือกที่ดี

✅ ข้อดีของ SSE

• ง่ายกว่า WebSockets
• ใช้ทรัพยากรเซิร์ฟเวอร์น้อยกว่า
• เหมาะกับการแจ้งเตือนหรืออัปเดตข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์

ตัวอย่างการใช้ SSE 👇

สร้างไฟล์ sse.php

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

while (true) {
    echo "data: " . json_encode(['time' => date('H:i:s')]) . "\n\n";
    ob_flush();
    flush();
    sleep(1);
}

ฝั่งไคลเอนต์เชื่อมต่อ SSE ด้วย JavaScript

const eventSource = new EventSource("sse.php");
eventSource.onmessage = function(event) {
    console.log("New data:", event.data);
};

ข้อเสียของ SSE 👉 รองรับเฉพาะการสื่อสาร ทางเดียว (Server → Client เท่านั้น)

🏗 3. ใช้ PHP + Node.js – ผสมพลังให้รองรับ Realtime ได้ง่ายขึ้น

ถ้าคุณอยากให้ PHP เป็น Backend หลัก แต่ยังต้องการใช้ WebSockets Node.js เป็นตัวช่วยที่ดี!

✅ ทำไมต้องใช้ PHP + Node.js?

• PHP ทำหน้าที่เป็น API จัดการข้อมูล
• Node.js ทำหน้าที่เป็น WebSocket Server ที่รองรับการเชื่อมต่อ Realtime

ตัวอย่างการใช้ Node.js กับ PHP

1. PHP API (api.php)

<?php
$data = ['message' => 'Hello from PHP!'];
echo json_encode($data);
?>

2. Node.js WebSocket Server (server.js)

const io = require("socket.io")(3000);
const axios = require("axios");

io.on("connection", (socket) => {
    console.log("User connected");

    socket.on("requestData", async () => {
        const response = await axios.get("http://yourdomain.com/api.php");
        socket.emit("updateData", response.data);
    });
});

3. JavaScript ฝั่งไคลเอนต์

const socket = io("http://localhost:3000");

socket.emit("requestData");

socket.on("updateData", (data) => {
    console.log("Realtime update:", data);
});

🔥 แค่นี้ก็ได้ระบบ Realtime ที่ใช้ PHP + Node.js แล้ว!

🏆 สรุป: PHP ทำ Realtime ได้ไหม?

✅ PHP ทำ Realtime ได้ แต่ต้องใช้เทคนิคเสริม
✅ WebSockets เหมาะกับ แชท, เกม, การแจ้งเตือน
✅ SSE เหมาะกับ การแจ้งเตือนแบบทางเดียว
✅ PHP + Node.js เป็นวิธีที่ดีที่สุดสำหรับระบบขนาดใหญ่

ถ้าคุณต้องการทำ แอปที่ Realtime จริง ๆ และรองรับผู้ใช้จำนวนมาก 👉 PHP + Node.js อาจเป็นตัวเลือกที่ดีที่สุด! 🚀