HTML5 Rocks Node.js 服务器发送事件（SSE）示例无法工作

Question

HTML5 Rocks Node.js 服务器发送事件（SSE）示例无法工作

javascripthtmlnode.jsserver-sent-events

7

文章链接：http://www.html5rocks.com/en/tutorials/eventsource/basics/

在该示例中，node.js SSE服务器无法正常工作，连接到/events后，浏览器没有收到任何响应。

Chrome开发者工具截图

sse-server.js

var http = require('http');
var sys = require('sys');
var fs = require('fs');

http.createServer(function(req, res) {
  //debugHeaders(req);

  if (req.headers.accept && req.headers.accept == 'text/event-stream') {
    if (req.url == '/events') {
      sendSSE(req, res);
    } else {
      res.writeHead(404);
      res.end();
    }
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(fs.readFileSync(__dirname + '/sse-node.html'));
    res.end();
  }
}).listen(8000);

function sendSSE(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  var id = (new Date()).toLocaleTimeString();

  // Sends a SSE every 5 seconds on a single connection.
  setInterval(function() {
    constructSSE(res, id, (new Date()).toLocaleTimeString());
  }, 5000);

  constructSSE(res, id, (new Date()).toLocaleTimeString());
}

function constructSSE(res, id, data) {
  res.write('id: ' + id + '\n');
  res.write("data: " + data + '\n\n');
}

function debugHeaders(req) {
  sys.puts('URL: ' + req.url);
  for (var key in req.headers) {
    sys.puts(key + ': ' + req.headers[key]);
  }
  sys.puts('\n\n');
}

sse-node.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <script>
    var source = new EventSource('/events');
    source.onmessage = function(e) {
      document.body.innerHTML += e.data + '<br>';
    };
  </script>
</body>
</html>

- alnafie

请注意，这篇文章是2010年的，所以我猜测自那时起，Node.js发生了一些变化，导致它无法运行。我正在使用Node.js v.10.18。 - alnafie

我刚刚测试了v0.10.28，它可以正常工作。 - rahpuser

5个回答

1

我已经尝试了那段代码，并且它对我来说有效，由于您没有使用nginx或任何其他服务器作为节点实例的代理，我认为问题出在您的计算机上，如果您有防火墙或反病毒软件正在运行，请停止它，然后重试或检查是否有其他拦截您的请求和响应的软件。

- rahpuser

@MatthewJamesDavis 对不起，您是什么意思？我看到了你的回答，它是关于服务器配置的。 - rahpuser

由于问题是服务器配置，特别是IIS。 - Matthew James Davis

2

@MatthewJamesDavis 对不起，马修，我有点混淆了，alnafie并没有谈论任何服务器..他只是使用>node server.js在命令行中，而没有像nginx或iis这样的强大服务器。因此，它不是一个真正的服务器，更像是一台机器配置（防火墙、反病毒软件、可能安装的游戏等），所以不用担心，我既没有抄袭你的答案，也不是我的意图。 :) - rahpuser

1

你为什么在sendSSE函数末尾注释掉了res.end()？那是实际将响应发送到浏览器的方法。

- anyaelise

抱歉，那是我调试尝试留下的。现在已经发布了示例中的原始代码。 - alnafie

1

我已经下载并且它对我有效。也许问题出在你的节点配置上？ - anyaelise

1

我也注意到示例在插入res.end()后可以正常工作，但这样做似乎会破坏服务器发送事件的目的。所以我不确定出了什么问题。 - Trott

这与手头的问题无关。 - Matthew James Davis

0

请确保您已将HTML文件保存为与描述的sse-node.html相同的名称，并保存在同一目录中。另外，请确保您的本地机器上开放了8000端口，没有其他人在使用它。或者更改端口并重新运行sse-server.js。对我而言，它是正常工作的。

- user3893574

0

我遇到了同样的问题。你的代码没有问题，只需要在HTML文件中提供完整的资源地址。

var source = new EventSource('http://localhost:8000/events'); //true way

而不是

var source = new EventSource('/events'); //improper way

- Dev Matee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew James Davis · Accepted Answer

问题出在服务器上。我的情况是使用iisnode节点包将Node与IIS一起使用。为了解决这个问题，我需要在web.config中配置iisnode，如下所示：

<iisnode flushResponse="true" />

之后，一切都正常了。有类似问题的其他人可能会从这里开始，但是apache和nginx可能具有相似的配置要求。