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

การประมูลสด สกอร์ และผู้ชมจำนวนมาก

ส่งราคาประมูลหรือสกอร์ล่าสุดถึงผู้ชมหลายพันคนพร้อมกัน ให้ผู้มาใหม่เห็นสถานะล่าสุดทันที และแสดงจำนวน “กำลังดูอยู่” ที่เป็นจริง

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

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

• ราคาประมูล สกอร์ หรือสต็อกปัจจุบันทันทีที่เปลี่ยน
• “12,408 คนกำลังดูอยู่” ตัวเลขที่เป็นจริงและขยับได้
• สถานะล่าสุดทันทีที่เปิดหน้า แม้จะเข้ามากลางอีเวนต์

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

• ช่องแคช (cache-) ผู้มาใหม่ทุกคนได้ราคาหรือสกอร์ปัจจุบันทันที โดยไม่ต้องแตะฐานข้อมูลของคุณ
• ช่อง presence ขนาดใหญ่ (presence-large-) สูงสุด 100,000 คน พร้อมจำนวนคนแบบสดและตัวอย่างรายชื่อผู้ที่อยู่
• จำนวนผู้สมัครรับข้อมูล (pusher:subscription_count) สำหรับตัวนับผู้ชมแบบง่ายบนช่องสาธารณะ
• การกระจายฟรี: ราคาประมูลหนึ่งครั้งที่ส่งถึงผู้ชม 20,000 คน นับเป็นหนึ่งข้อความ ไม่ใช่ 20,000

ขั้นที่ 1: เผยแพร่แต่ละการเปลี่ยนแปลงครั้งเดียว

เซิร์ฟเวอร์ของคุณตรวจสอบราคาประมูลหรือบันทึกสกอร์ แล้วเผยแพร่สถานะใหม่ให้ทุกคน:

app.post('/auctions/:id/bids', requireLogin, async (req, res) => {
  const bid = await db.auctions.placeBid(req.params.id, req.user.id, req.body.amount); // rejects lower bids
  await pusher.trigger(`cache-auction-${req.params.id}`, 'bid', {
    amount: bid.amount,
    bidder: bid.displayName,
    endsAt: bid.endsAt,
  });
  res.json(bid);
});

ส่งสถานะทั้งหมด (จำนวนเงินปัจจุบันและเวลาสิ้นสุด) เสมอ ไม่ใช่เฉพาะส่วนที่ต่าง ผู้ชมที่พลาดไปหนึ่งอีเวนต์จะกลับมาถูกต้องเมื่อได้อีเวนต์ถัดไป

ขั้นที่ 2: แสดงให้ผู้ชม

const auction = pusher.subscribe(`cache-auction-${id}`);
auction.bind('bid', ({ amount, bidder, endsAt }) => {
  price.set(amount);
  feed.prepend(`${bidder} bid ${amount}`);
  countdown.until(endsAt);
});

ราคาประมูลล่าสุดในแคชมาถึงทันทีหลังสมัครรับ ราคาจึงไม่เคยว่าง

ขั้นที่ 3: ตัวนับผู้ชม

ถ้าต้องการแค่จำนวน ให้เปิด ส่งจำนวนผู้สมัครรับข้อมูล ในการตั้งค่าแอป แล้วรับอีเวนต์จำนวนบนช่องสาธารณะเดียวกัน:

auction.bind('pusher:subscription_count', ({ subscription_count }) => watching.set(subscription_count));

ไม่ต้องเขียนโค้ดก็ได้ สคริปต์ฝังบรรทัดเดียวทำแบบเดียวกัน: <span data-hibira-online="cache-auction-42">0</span> watching

หากต้องการแสดงด้วยว่าใครอยู่บ้าง ให้ใช้ช่อง presence ขนาดใหญ่กับ @hibira-io/large-presence:

import { LargePresence } from '@hibira-io/large-presence';

const room = LargePresence.subscribe(pusher, `presence-large-auction-${id}`, { maxMembers: 50 });
room.on('ready', ({ count }) => audience.render(count, room.members));
room.on('change', ({ count }) => audience.render(count, room.members));

จำนวนคนยังแม่นยำเสมอ ส่วนการเข้าและออกของสมาชิกจะรวมมาเป็นอัปเดตเล็กๆ วินาทีละครั้ง แทนที่จะเป็นหนึ่งอีเวนต์ต่อคน

เคล็ดลับ

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