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

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

Commencez par 5-network/12-server-sent-events/article.md, en particulier la section sur le format de la réponse du serveur, et comparez ses propriétés d’événement EventSource avec les indications MDN liées. Vérifiez si l’exemple ou la formulation autour de retry doit être corrigé, puis mettez à jour l’article afin que le comportement documenté et l’exemple correspondent.