ライブオークション、スコア、大人数の視聴者

現在の入札額やスコアを何千人もの視聴者に一斉に届け、新しく来た人にもすぐ最新の状態を見せ、本物の「視聴中」人数を表示します。

ライブオークション、スポーツのスコア、クイズ番組、タイムセール、ライブ配信のコメントには共通点があります。何千人もが同じ瞬間に同じものを見ていて、1 秒の遅れが結果を変えることです。遅れて届く入札や中継より遅いスコアは、人を他のサービスへ向かわせます。

ユーザーにとっての価値

現在の入札額、スコア、在庫が変わった瞬間にわかります。
「12,408 人が視聴中」という、本物で、動く数字。
イベントの途中でも、ページを開いた瞬間に最新の状態。

使う機能

キャッシュチャンネル（cache-）。新しく来た人全員に、データベースに触れずに現在の価格やスコアをすぐ渡します。
ラージプレゼンスチャンネル（presence-large-）。最大 100,000 人、ライブの人数と参加者のサンプルつき。
購読者数（pusher:subscription_count）。パブリックチャンネルでシンプルな視聴者数を表示します。
無料のファンアウト：20,000 人の視聴者への 1 件の入札は、20,000 ではなく 1 メッセージです。

ステップ 1：変化ごとに 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);
});

差分ではなく、常に状態全体（現在の金額と終了時刻）を送りましょう。イベントを 1 つ見逃した視聴者も、次のイベントで正しい状態に戻ります。

ステップ 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));

コードを書かなくても、1 行の埋め込みスクリプトで同じことができます：<span data-hibira-online="cache-auction-42">0</span> watching。

誰がいるかも表示するには、ラージプレゼンスチャンネルと @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));

人数は常に正確なまま、メンバーの参加と退出は 1 人ごとのイベントではなく、1 秒に 1 回の小さな更新にまとめて届きます。

ヒント

入札、回答、購入はすべてサーバーで検証しましょう。イベントの状態をクライアント自身に配信させてはいけません。
計画すべきはメッセージではなく接続数です。20,000 人の視聴者は同時接続 20,000 で、料金はピークで決まります。料金を参照してください。
チケットの発売開始のような瞬間は、1 件売れるごとではなく、1〜2 秒ごとに在庫数を配信しましょう。
本番の前に実際の視聴者数で試しましょう。負荷テストツールで大量の接続を開き、ポータルのアプリページで様子を見ます。