The EventSource's message object not have a retry property bug

Beginne mit 5-network/12-server-sent-events/article.md, insbesondere mit dem Abschnitt zum Format der Serverantwort, und vergleiche die EventSource-Ereigniseigenschaften mit der verlinkten MDN-Anleitung. Prüfe, ob das Beispiel oder die Formulierung rund um retry korrigiert werden muss, und aktualisiere anschließend den Artikel, sodass das dokumentierte Verhalten und das Beispiel übereinstimmen.

The EventSource's message object not have a retry property bug

server.js

import fs from 'node:fs';
import express from 'express';

const app = express();
app.use(express.static('public'));

const convertImageToBase64URL = (filename, imageType = 'png') => {
  try {
    const buffer = fs.readFileSync(filename);
    // const base64String = Buffer.from(buffer, 'base64');
    const base64String = Buffer.from(buffer).toString('base64');
    // console.log(`base64String`, base64String.slice(0, 100));
    return `data:image/${imageType};base64,${base64String}`;
  } catch (error) {
    throw new Error(`file ${filename} no exist ❌`)
  }
}

app.get('/sse', (req, res) => {
  res.writeHead(200, {
    // 'Content-Type': 'text/event-stream',
    'Content-Type': 'text/event-stream; charset=utf-8',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'Access-Control-Allow-Origin': "*",
  });
  let i = 0;
  let uid = setInterval(() => {
    console.log(`i`, i);
    if(i < 10) {
      i++;
      const data = convertImageToBase64URL("./public/test.png");
      console.log(`SSE ${i}`, data.slice(0, 100));
      // event id `lastEventId` ✅
      const id = 2023;
      // ms
      const retryTimes = 1000 * 60;
      res.write(`id: ${id}\n`);
      res.write(`retry: ${retryTimes}\n`);
      // custom event type `custom_message`\n ✅
      res.write(`event: custom_event_message\n`);
      res.write(`data: ${data}\n\n`);
    } else {
      clearInterval(uid);
    }
  }, 3000);
});
// http://localhost:3000/sse


const port = 3000;
app.listen(port, () => {
  console.log(`SSE server is running on: http://localhost:${port}/`);
});

client.js

window.addEventListener(`load`, (e) => {
  console.log(`page loaded ✅`);
  if (!!window.EventSource) {
    const img = document.querySelector(`#sse`);
    const source = new EventSource('http://localhost:3000/sse');
    source.onopen = (event) => {
      console.log(`✅ Connection to server opened.`, event);
    };
    source.addEventListener(`custom_event_message`, (event) => {
      console.log(`\nevent`, event);
      const timestamp = event.timeStamp;
      console.log(`event.timeStamp`, timestamp);
      const retry = event.retry;
      console.log(`event.retry`, retry);
      // undefined ❌
      const id = event.lastEventId;
      console.log(`event.lastEventId`, id);
      const type = event.type;
      console.log(`event.type`, type);
      const data = event.data;
      // console.log(`🚀 event.data =`, data);
      img.src = `${data}`;
    });
    source.onerror = (err) => {
      console.log(`❌ EventSource failed.`, err);
      // setTimeout(() => {
      //   console.log(`⚠️ After 3 seconds, auto close connection!`);
      //   source.close();
      // }, 3000);
    };
  } else {
    console.log(`Your browser doesn't support SSE ❌`);
  }
});

refs

https://javascript.info/server-sent-events#server-response-format

https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#retry