Signatur
Beschreibung
Die schreibgeschützte Eigenschaft lastEventId des MessageEvent-Interfaces enthält die ID des Ereignisses als String. Praktisch relevant ist sie fast nur bei Server-Sent Events: Setzt der Server im Stream eine Zeile id: 42, steht dieser Wert bei allen folgenden message-Ereignissen der EventSource in event.lastEventId.
Die Eigenschaft wird vor allem für Wiederaufnahme nach Verbindungsabbrüchen genutzt. Verbindet sich eine EventSource automatisch neu, schickt der Browser die zuletzt bekannte ID im HTTP-Header Last-Event-ID mit. Der Server kann dann genau ab diesem Punkt weitersenden, sodass keine Nachrichten verloren gehen. Den Wert selbst auszulesen hilft beim Protokollieren, beim Aussortieren doppelter Nachrichten oder wenn man nach einem kompletten Neuladen der Seite manuell dort weitermachen will, wo man aufgehört hat.
Bei anderen Quellen von MessageEvent, also WebSocket, postMessage(), MessageChannel, BroadcastChannel oder Workern, ist lastEventId normalerweise ein leerer String. Nur wenn man ein MessageEvent selbst mit dem Konstruktor erzeugt, kann man den Wert dort über die Option lastEventId setzen.
Rückgabewert
"".Beispiele
ID bei Server-Sent Events auslesen
// Server sendet z. B.:
// id: 17
// data: {"text":"Hallo"}
//
const source = new EventSource('/api/stream');
source.addEventListener('message', (event) => {
const payload = JSON.parse(event.data);
console.log(`Ereignis #${event.lastEventId}:`, payload.text);
});Doppelte Nachrichten nach Neuverbindung aussortieren
const source = new EventSource('/api/notifications');
const seen = new Set();
source.onmessage = (event) => {
const id = event.lastEventId;
if (id && seen.has(id)) {
console.log('Doppelt, übersprungen:', id);
return;
}
if (id) seen.add(id);
console.log('Neue Benachrichtigung:', event.data);
};Nach einem Neuladen der Seite dort weitermachen, wo man aufgehört hat
// Letzte ID dauerhaft speichern und beim nächsten Seitenaufruf mitsenden
const lastId = localStorage.getItem('feedLastId') ?? '';
const url = new URL('/api/feed', location.origin);
if (lastId) url.searchParams.set('lastEventId', lastId);
const source = new EventSource(url);
source.onmessage = (event) => {
if (event.lastEventId) {
localStorage.setItem('feedLastId', event.lastEventId);
}
console.log(event.lastEventId, event.data);
};MessageEvent selbst erzeugen
const evt = new MessageEvent('message', {
data: 'Test',
lastEventId: 'abc-123'
});
console.log(evt.lastEventId);
// Bei postMessage & Co. ist der Wert normalerweise leer
const { port1, port2 } = new MessageChannel();
port2.onmessage = (e) => console.log(JSON.stringify(e.lastEventId));
port1.postMessage('hi');// Wichtig · Fallstricke
- Schreibgeschützt: Wenn man
event.lastEventId = '…'zuweist, wird das stillschweigend ignoriert bzw. wirft im Strict Mode einenTypeError. - Die ID bleibt bestehen: Laut SSE-Spezifikation gilt eine gesetzte ID für alle folgenden Ereignisse, bis der Server eine neue sendet. Eine leere Zeile
id:setzt sie auf den leeren String zurück. Mehrere Nachrichten können deshalb dieselbelastEventIdhaben, wenn der Server nicht bei jeder Nachricht eine ID mitschickt. - Enthält die
id:-Zeile das Nullzeichen U+0000, wird sie ignoriert. - Der Header
Last-Event-IDwird nur beim automatischen Neuverbinden gesendet, nicht beim ersten Verbindungsaufbau mit einer neuennew EventSource(). Wer über ein Neuladen der Seite hinweg weitermachen will, muss die ID selbst speichern und z. B. als Query-Parameter mitschicken. - Bei WebSocket,
postMessage(), Workern undBroadcastChannelist der Wert immer"". - Die ID kommt vom Server. Sie ist also keine vertrauenswürdige Eingabe und sollte vor der Nutzung (z. B. im DOM) geprüft werden.
- Die Eigenschaft wird von allen modernen Browsern unterstützt, ebenso in Web Workern.