สร้างระบบแจ้งเตือน (Notification System)

หากตัวอย่างก่อนหน้านี้เป็นเรื่องของการส่ง Event หากันตรงๆ ระหว่างผู้ใช้ (Client-to-Client) ... สำหรับคู่มือ "Notification" บทบาทนี้จะกลับกัน มันคือการที่ Backend ของคุณเป็นผู้คุมความถูกต้องทั้งหมด แล้วกดยิง Event แจ้งเตือนเพื่อให้หน้าจอฝั่ง Client อัปเดต (Server-to-Client)

🎯 เป้าหมาย: ทุกครั้งที่มีคนกด "สั่งออร์เดอร์" ในแอป Backend จะยิงแจ้งเตือนเด้งไปที่หน้าจอพนักงานแอดมิน (Admin Dashboard) แบบสดๆ

---

🛠️ โครงสร้างที่ต้องเตรียม

1. Frontend พนักงาน (Admin Web): รอดักจับแจ้งเตือน orders:dashboard
2. Backend (API): เวลามีคนกดซื้อของ API วิ่งทะลุมาบอก RawPush ผ่าน REST API

💻 1. ระบบยืนดักฟังหน้าบ้าน (Frontend)

พนักงานแอดมินเปิดคอมพิวเตอร์หน้าจอทิ้งไว้ ก็ให้รันโค้ด WebSocket ชุดนี้:

let ws = new WebSocket(`wss://api.rawpush.com/ws?app_key=pk_your_app_key`);

ws.onopen = () => {
   // สมมติรับ Token ผ่านการ Login ปกติมาแล้ว (authData = { token: {...}, signature: "..." })
   ws.send(JSON.stringify({
     cmd: "auth",
     token: authData.token,
     signature: authData.signature
   }));
};

ws.onmessage = (e) => {
   const msg = JSON.parse(e.data);
   
   if (msg.type === 'reply' && msg.status === 'ok' && msg.data?.session_id) {
       // 1. subscribe channel "orders:dashboard"
      ws.send(JSON.stringify({
         cmd: "subscribe",
         channel: "orders:dashboard" 
      }));
   }
   
   // 2. เมื่อได้รับ event... แสดง notification popup (Toast) มุมขวาล่างจอ!
   if (msg.event === "notification.alert") {
       showToastAlert(
           `🔔 มีออร์เดอร์ใหม่! ลูกค้า: ${msg.data.customerName}`, 
           `ยอดเงิน: ฿${msg.data.totalPrice}`
       );
       
       // (พ่นเสียงแจ้งเตือน ตือติ๊ง!)
       new Audio('/bell.mp3').play();
   }
};

(โค้ดนี้พนักงานรันทิ้งไว้ทั้งวัน เครื่องไม่หน่วง ค้างรอจนกว่าเซิร์ฟเวอร์จะเรียก)

---

⚙️ 2. เวลาหน้าสิ่วหน้าขวาน (Backend)

วันดีคืนดี มีนาย ก. กดปุ่ม POST /checkout สั่งซื้อตะกร้าสินค้าผ่านหน้าเว็บหลักของคุณเข้า Backend ... สิ่งที่คุณต้องทำคือ publish event ผ่าน RawPush REST API

ตัวอย่างใน Backend PHP:

<?php
// ...
// 1. หักเงินใน Database สำเร็จ
$orderId = processCheckout($customerCart);

// 2. publish event ไปหาหน้าแอดมินผ่าน RawPush
$curl = curl_init();

$payload = json_encode([
    "channel" => "orders:dashboard", // ยิงหาห้องพนักงาน
    "event" => "notification.alert",
    "data" => [
        "orderId" => $orderId,
        "customerName" => "คุณ ก.",
        "totalPrice" => 1500
    ]
]);

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.rawpush.com/api/v1/publish",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $payload,
  CURLOPT_HTTPHEADER => [
     "X-Api-Key: sk_your_secret_key_from_dashboard", // ใช้ Secret Key สำหรับ authenticate
    "Content-Type: application/json"
  ],
]);

// 3. ส่ง!
$response = curl_exec($curl);
// ...
?>

🎉 ผลลัพธ์!

ทันทีที่บรรทัด $response = curl_exec($curl); ทำงานสำเร็จ... ในเสี้ยววินาทีต่อมา หน้าจอพนักงานแอดมินทั้งหมด 20 กว่าคนที่เปิดหน้าต่างทิ้งไว้ จะได้ยินเสียงกระดิ่ง "ตือติ๊ง!" ดังพร้อมกัน และมีป๊อบอัปชื่อนาย ก. โผล่เด้งขึ้นมา

ไม่ต้องให้พนักงานนั่งกด F5 รีเฟรชหน้าบ่อยครั้งอีกต่อไป!