服务器发送的事件在 chrome devtools 中显示为空白,用于简单的快速 SSE
Server sent events showing blank in chrome devtools for simple express SSE
这是使用快递程序发送 SSE 的简单代码示例(工作正常)。
唯一的麻烦是 devtools eventStream 部分是空白的。
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/countdown', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
"Access-Control-Allow-Origin": "*"
})
countdown(res, 10)
})
function countdown(res, count) {
res.write(JSON.stringify({ count: count}))
if (count)
setTimeout(() => countdown(res, count-1), 1000)
else
res.end()
}
app.listen(3000, () => console.log('SSE app listening on port 3000!'))
您必须像这样格式化事件:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/countdown', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
'Access-Control-Allow-Origin': '*'
});
countdown(res, 1, 10);
});
function countdown(res, id, count) {
res.write(`id: ${id}\n`);
res.write('event: count\n');
res.write(`data: ${JSON.stringify({ count: count })}\n\n`);
if (count) setTimeout(() => countdown(res, id + 1, count - 1), 1000);
else res.end();
}
app.listen(3000, () => console.log('SSE app listening on port 3000!'));
并在首页使用 EventSource
:
<script>
var source = new EventSource('http://localhost:3000/countdown');
source.onmessage = function(event) {
console.log(event);
};
</script>
这是使用快递程序发送 SSE 的简单代码示例(工作正常)。
唯一的麻烦是 devtools eventStream 部分是空白的。
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/countdown', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
"Access-Control-Allow-Origin": "*"
})
countdown(res, 10)
})
function countdown(res, count) {
res.write(JSON.stringify({ count: count}))
if (count)
setTimeout(() => countdown(res, count-1), 1000)
else
res.end()
}
app.listen(3000, () => console.log('SSE app listening on port 3000!'))
您必须像这样格式化事件:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/countdown', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
'Access-Control-Allow-Origin': '*'
});
countdown(res, 1, 10);
});
function countdown(res, id, count) {
res.write(`id: ${id}\n`);
res.write('event: count\n');
res.write(`data: ${JSON.stringify({ count: count })}\n\n`);
if (count) setTimeout(() => countdown(res, id + 1, count - 1), 1000);
else res.end();
}
app.listen(3000, () => console.log('SSE app listening on port 3000!'));
并在首页使用 EventSource
:
<script>
var source = new EventSource('http://localhost:3000/countdown');
source.onmessage = function(event) {
console.log(event);
};
</script>