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

Bắt đầu với 5-network/12-server-sent-events/article.md, đặc biệt là phần về định dạng phản hồi của máy chủ, và đối chiếu các thuộc tính sự kiện của EventSource với hướng dẫn MDN được liên kết. Kiểm tra xem ví dụ hoặc cách diễn đạt liên quan đến retry có cần được sửa lại hay không, sau đó cập nhật bài viết để hành vi được mô tả và ví dụ thống nhất với nhau.