javascript - EventSource 在添加事件监听时未触发

Question

我不知道如何使用 JavaScript 从 EventSource 捕获事件。我正在这样做，但是“正在运行”永远不会出现在控制台中。

        var es = new EventSource(myUrl);

        es.addEventListener("time", function(e){
         console.log("running")
        }, false);

        es.onopen = function(){
          console.log('open')
        },
        es.onerror = function(e){
          console.log('error')
        },

它登录“打开”，我在浏览器控制台的网络部分看到它已连接并每 5 秒更新一次，当我 curl 到服务器时，我每 5 秒收到响应:

:ok

event: time
data: {"data":"tick","ttl":"60","published_at":"2014-08-22T08:26:17.624Z","id":"53ff6e065067544829091287"}

event: time
data: {"data":"tick","ttl":"60","published_at":"2014-08-22T08:26:22.630Z","id":"53ff6e065067544829091287"}

如何在 JS 中捕获此事件？

Answer 1

首先是坏消息:它看起来是正确的。

标准允许冒号后面有空格。但从来没有充分的理由使用它，而且它只是浪费了一个字节的带宽，所以我首先要尝试的是删除空间。如果这确实解决了问题，您可能正在处理浏览器错误(请告诉我们)。

我尝试的第二件事是使用默认事件。所以:

• 服务器端:停止发送 event:time 行。
• 客户端:更改为使用“消息”事件处理程序。

像这样:

es.addEventListener("message", function(e){
  console.log("running");
  }, false);

如果这不能解决问题，请开始查看您正在发送的空白。如果它确实解决了这个问题，则事件 header 会发生一些奇怪的事情。

但是，您也可以回避这个问题。我个人从不使用 event: 行，而是始终将事件类型放入 JSON 数据中。您的 "data":"tick" 可能已经这样做了，但如果没有，它也可以像发送这样的数据一样简单:

data:{"event":"time","data":"tick","ttl":"60","published_at":"2014-08-22T08:26:17.624Z","id":"53ff6e065067544829091287"}

data:{"event":"time","data":"tick","ttl":"60","published_at":"2014-08-22T08:26:22.630Z","id":"53ff6e065067544829091287"}

data:{"event":"somethingElse","this":"and","that":[9,8,7]}