javascript-tutorial / javascript-tutorial/en.javascript.info
The EventSource's message object not have a retry property bug
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- HTML
- Estrellas
- 25.5k
- Forks
- 4k
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
## 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 ❌`);
}
});
```

## 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
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
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.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100