服务器发送的事件在简单快速 SSE 的 chrome devtools 中显示为空白

Question

这是使用 Express 程序发送 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!'))

Answer 1

您必须像这样格式化事件：

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>