Open xgqfrms opened 12 months ago
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 ❌`); } });
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
The EventSource's message object not have a retry property bug
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