실시간 경매, 스코어, 대규모 시청자

현재 입찰가나 스코어를 수천 명의 시청자에게 한 번에 보내고, 새로 들어온 사람에게도 바로 최신 상태를 보여 주며, 실제 “지금 시청 중” 인원을 표시합니다.

실시간 경매, 스포츠 스코어, 퀴즈 쇼, 타임 세일, 라이브 방송 댓글에는 공통점이 있습니다. 수천 명이 같은 순간에 같은 것을 보고 있고, 1초의 지연이 결과를 바꾼다는 점입니다. 늦게 도착한 입찰이나 중계보다 늦은 스코어는 사람들을 다른 곳으로 보냅니다.

사용자가 얻는 것

현재 입찰가, 스코어, 재고가 바뀌는 순간 바로 보입니다.
“12,408명 시청 중”, 진짜이고 움직이는 숫자.
이벤트 도중이라도 페이지를 여는 순간 최신 상태.

사용하는 기능

캐시 채널(cache-): 새로 들어온 모든 사람이 데이터베이스를 거치지 않고 현재 가격이나 스코어를 바로 받습니다.
대형 프레즌스 채널(presence-large-): 최대 100,000명, 실시간 인원수와 참가자 샘플.
구독자 수(pusher:subscription_count): 퍼블릭 채널에서 간단한 시청자 수를 보여 줍니다.
무료 팬아웃: 시청자 20,000명에게 보낸 입찰 하나는 20,000건이 아니라 메시지 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);
});

차이가 아니라 항상 전체 상태(현재 금액과 종료 시각)를 보내세요. 이벤트 하나를 놓친 시청자도 다음 이벤트에서 다시 정확해집니다.

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.

누가 있는지도 보여 주려면 대형 프레즌스 채널과 @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초에 한 번의 작은 업데이트로 묶여 도착합니다.

팁

입찰, 답변, 구매는 모두 서버에서 검증하세요. 이벤트의 상태를 클라이언트가 직접 발행하게 해서는 안 됩니다.
계획할 것은 메시지가 아니라 연결 수입니다. 시청자 20,000명은 동시 연결 20,000개이고, 요금은 최고치로 정해집니다. 요금을 참고하세요.
티켓 오픈 같은 순간에는 한 장 팔릴 때마다가 아니라 1~2초마다 재고를 발행하세요.
본 행사 전에 실제 시청자 규모로 테스트하세요. 부하 테스트 도구로 많은 연결을 열고 포털의 앱 페이지를 지켜보면 됩니다.