Historie + live

Für Widgets wie „Bits seit Stream-Start“ brauchst du zwei Dinge: alles, was bisher passiert ist, und alles, was ab jetzt passiert. pixl.feed() liefert beides an einen einzigen Handler, ohne dass ein Event fehlt oder doppelt ankommt.

let bits = 0;

pixl.feed({ since: 'stream', types: ['twitch.cheer'] }, (data) => {
  bits += data.bits;
  document.querySelector('#bits').textContent = bits;
});

Das SDK rechnet dabei selbst nichts aus. Es liefert nur die Events, was du daraus machst (zählen, auflisten, Alerts zeigen), entscheidest du im Handler.

OptionenLink zur Überschrift kopieren

Der HandlerLink zur Überschrift kopieren

Derselbe wie bei pixl.on(): (data, event). Zusätzlich ist event.history true, wenn das Event aus der Historie nachgeladen wurde. Damit spielst du z.B. Alerts nur für neue Events ab:

pixl.feed({ since: 'stream', types: ['twitch.raid'] }, (data, event) => {
  addToList(data);
  if (!event.history) playAlert(data);
});

Die Historie kommt zuerst und in zeitlicher Reihenfolge, älteste zuerst. Danach kommen die neuen Events live.

Darauf solltest du achtenLink zur Überschrift kopieren

• Replays: Wird ein Event im Dashboard erneut abgespielt, kommt es mit event.replay === true an, auch in der Historie. Willst du nur echte Events zählen, überspring diese. In der Historie gilt das auch für simulierte Events. Events, die im Dashboard ausgeblendet wurden (z.B. erstattete Subs), kommen gar nicht mehr an. Ein laufender Feed bekommt davon nichts mit: was er schon live erhalten hat, bleibt bis zum Neuladen des Widgets drin.
• Neuer Stream: Bei since: 'stream' wird die Historie nur beim Verbinden geladen. Willst du bei einem neuen Stream wieder bei 0 anfangen, nimm stream.online in types auf und setz dort deine Werte zurück.
• Verbindungsabbrüche: Nach jedem Neuverbinden gleicht das SDK die Historie erneut ab. Events aus der Lücke kommen also nach, schon bekannte nicht noch einmal. Klappt das Laden nicht sofort, versucht das SDK es weiter, solange die Verbindung steht.
• Große Zeiträume: Die Historie wird seitenweise geladen (200 Events pro Anfrage). Für einen Stream ist das nichts, für ein ganzes Jahr ohne types-Filter schon einiges.
• Nur Eventlog-Events haben Historie: Reine Live-Events wie Chat-Nachrichten kommen nur live an.

FunktionenLink zur Überschrift kopieren

pixl.feed() gibt ein Objekt zurück:

Beispiel: Subs und Bits seit Stream-StartLink zur Überschrift kopieren

const pixl = new Pixl({ key: 'pixl_DEIN_SCHLÜSSEL' });

let subs = 0;
let bits = 0;

function render() {
  document.querySelector('#subs').textContent = subs;
  document.querySelector('#bits').textContent = bits;
}

pixl.feed(
  { since: 'stream', types: ['stream.online', 'twitch.sub', 'twitch.sub_gift', 'twitch.cheer', 'twitch.power_up'] },
  (data, event) => {
    if (event.replay) return;

    switch (event.event) {
      case 'stream.online':
        if (!event.history) { subs = 0; bits = 0; } // neuer Stream, neu anfangen
        break;
      case 'twitch.sub':
        subs += 1;
        break;
      case 'twitch.sub_gift':
        subs += data.amount ?? 0;
        break;
      case 'twitch.cheer':
      case 'twitch.power_up':
        bits += data.bits ?? 0;
        break;
    }
    render();
  },
);

Welche Felder die Events haben, steht in der Event-Referenz.