我在服务器端有一个 png 文件，它由 python 脚本每秒更新一次。我想使用 SSE 将其流式传输到客户端，以便它随着文件更新而更新。
服务器.js：
const express = require('express')
const fs = require('fs')
const app = express()
app.use(express.static('public'))
app.get('/countdown', function(req, res) {
res.writeHead(200, {
'Content-Type': 'iimage/png;base64',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
})
update(res);
})
function update(res) {
const file = base64_encode("./public/pics/out.png");
res.write(file);
while (true) {
wait(200);
update(res);
}
}
app.listen(3000, () => console.log('SSE app listening on port 3000!'))
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
function base64_encode(file) {
// read binary data
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return new Buffer(bitmap).toString('base64');
}
index.html：
<html>
<head>
<script>
if (!!window.EventSource) {
var source = new EventSource('/countdown')
source.addEventListener('message', function(e) {
var image = document.getElementsByClassName("img");
image.src = "data:image/png;base64," + image;
}, false)
} else {
console.log("Your browser doesn't support SSE")
}
</script>
<img id="img" src=""/>
</html>
我研究了如何做到这一点并尝试了这个，但它没有任何错误地工作。我可以修改什么才能使其正常工作？
Document 接口的
document.getElementsByClassNamearray-like您应该使用
event.dataif (!!window.EventSource) {
// change to `document.getElementById` ✅
const image = document.getElementById("img");
const source = new EventSource('/countdown');
source.addEventListener('message', (event) => {
// get the event's data ✅
const data = event.data;
image.src = `data:image/png;base64,${data}`;
}, false)
} else {
console.log("Your browser doesn't support SSE")
}
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/EventSource