← กรณีการใช้งาน

แดชบอร์ดและตัวชี้วัดแบบเรียลไทม์

กราฟและตัวนับที่อัปเดตเอง แสดงค่าล่าสุดทันทีที่เปิดหน้า โดยไม่ต้องให้ทุกแดชบอร์ดที่เปิดอยู่คอยโพลล์

หน้าผู้ดูแลระบบ แดชบอร์ดยอดขาย หน้าจอมอนิเตอร์ และป้ายราคาหุ้นหรือคริปโต มีประโยชน์ก็ต่อเมื่อตัวเลขเป็นปัจจุบัน การรีเฟรชทุกนาทีหมายความว่าคนตัดสินใจจากข้อมูลเก่า และการให้ทุกแดชบอร์ดที่เปิดอยู่โพลล์ API มีต้นทุนสูงกว่าการพุชอัปเดตครั้งเดียวไปถึงทุกคนมาก

สิ่งที่ผู้ใช้ได้รับ

• กราฟและตัวนับที่ขยับเองเมื่อมีคำสั่งซื้อ การสมัคร หรือค่าที่วัดได้เข้ามา
• เห็นค่าล่าสุดทันทีที่เปิดหน้า ไม่ใช่ช่องว่างจนกว่าจะมีอัปเดตถัดไป
• จอที่แขวนผนังยังเป็นเรียลไทม์ได้ทั้งวันโดยไม่ต้องรีโหลด

ฟีเจอร์ที่ใช้

• ช่องแคช (cache-, private-cache-) เก็บอีเวนต์ล่าสุดไว้ 30 นาที และส่งให้ผู้สมัครรับรายใหม่ทุกคนทันที
• Batch API (triggerBatch) ส่งหลายตัวชี้วัดในคำขอเดียว
• การกระจายฟรี: อัปเดตที่เผยแพร่หนึ่งครั้งนับเป็นหนึ่งข้อความ ไม่ว่าจะมีคนดูสิบคนหรือหนึ่งหมื่นคน
• Webhook cache_miss แจ้งเซิร์ฟเวอร์เมื่อผู้ชมใหม่ไม่พบข้อมูลในแคช

ขั้นที่ 1: เผยแพร่ตัวชี้วัดจากแบ็กเอนด์

ส่งอัปเดตเมื่อมีการเปลี่ยนแปลง หรือตั้งเวลาเป็นช่วงสั้นๆ สำหรับตัวเลขที่เปลี่ยนเร็ว การรวมหลายช่องไว้ใน batch เดียวทำให้เหลือการเรียก HTTP แค่ครั้งเดียว:

setInterval(async () => {
  const stats = await metrics.snapshot();
  await pusher.triggerBatch([
    { channel: 'private-cache-dash-sales', name: 'update', data: { revenue: stats.revenue, orders: stats.orders } },
    { channel: 'private-cache-dash-signups', name: 'update', data: { today: stats.signups } },
  ]);
}, 5000);

แต่ละช่องใน batch นับเป็นหนึ่งข้อความ การอัปเดตสองช่องทุก 5 วินาทีจึงเท่ากับประมาณ 35,000 ข้อความต่อวัน ส่งเฉพาะเมื่อตัวเลขเปลี่ยนจะใช้น้อยลง

ขั้นที่ 2: สมัครรับในแดชบอร์ด

const sales = pusher.subscribe('private-cache-dash-sales');
sales.bind('update', ({ revenue, orders }) => {
  revenueTile.set(revenue);
  ordersChart.push(orders);
});

// Nothing published in the last 30 minutes: load the value from your API once
sales.bind('pusher:cache_miss', async () => {
  revenueTile.set(await fetch('/api/stats/revenue').then((r) => r.json()));
});

คำนำหน้า private- หมายความว่าเส้นทางยืนยันสิทธิ์ของคุณเป็นผู้ตัดสินว่าใครดูแดชบอร์ดไหนได้ เช่น เฉพาะพนักงาน หรือเฉพาะลูกค้าเจ้าของบัญชีนั้น

ขั้นที่ 3: เติมแคชเมื่อมีคนเข้ามา

ให้ endpoint ของ webhook รับ cache_miss และเผยแพร่ค่าปัจจุบันเมื่อมีผู้ชมเปิดแดชบอร์ดที่ยังไม่มีแคช ผู้ชมทุกคนหลังจากนั้นจะได้รับจากแคช:

for (const e of webhook.getEvents()) {
  if (e.name === 'cache_miss' && e.channel === 'private-cache-dash-sales') {
    const s = await metrics.snapshot();
    await pusher.trigger(e.channel, 'update', { revenue: s.revenue, orders: s.orders });
  }
}

เคล็ดลับ

• ใช้หนึ่งช่องต่อหนึ่งการ์ดหรือต่อหนึ่งลูกค้า ไม่ใช่ช่องเดียวสำหรับทุกอย่าง ผู้ชมจะได้รับเฉพาะสิ่งที่กำลังดู
• ส่งตัวเลข ไม่ใช่ HTML ที่เรนเดอร์แล้ว และให้แต่ละอัปเดตไม่เกิน 10 KB (แผน Free 4 KB)
• แดชบอร์ดสำหรับลูกค้า (เช่น หน้าวิเคราะห์ใน SaaS ของคุณ) ทำแบบเดียวกันได้ด้วยหนึ่งช่องต่อบัญชี: private-cache-account-123-usage
• ระหว่างปรับช่วงเวลา ดูจำนวนข้อความและการเชื่อมต่อของคุณแบบสดได้ที่หน้าแอปในพอร์ทัล