javascript-tutorial / javascript-tutorial/en.javascript.info

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

未关闭
#3,600 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
HTML
星标
25.5k
派生
4k
PR 合并指标
30 天内没有已合并 PR

描述

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

> server.js

```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

```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 ❌`);
}
});
```

![image](https://github.com/javascript-tutorial/en.javascript.info/assets/7291672/bc431936-a2a3-4e0e-9ee2-d65a440f416b)

## 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

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

Start with 5-network/12-server-sent-events/article.md, especially the server response format section, and compare its EventSource event properties with the linked MDN guidance. Check whether the example or wording needs correction around retry, then update the article so the documented behavior and example agree.

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript
领域
documentation
Issue 类型
文档
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。