所有活动的HTML5 EventSource监听器？

Question

我使用EventSource在我的JavaScript客户端应用程序中推送通知.我可以像这样附加事件监听器:

source.addEventListener('my_custom_event_type', function(e) {
  console.log(e.data);
}, false);

但我希望监视从服务器推送的所有事件(主要用于调试),因此如果发送某个事件但没有事件监听器,我可以轻松找到它.我的意思是,我不想只是"忽略"没有eventListeners绑定的所有事件.

我希望做这样的事情:

source.addEventListener('*', function(e) {
  console.debug('Event with no listener attached: ', e);
}, false);

但是像html5rocks那样的规范和教程没有指定这是否可行.

另一方面,它可能是一些firefox/chrome扩展,允许监视所有服务器事件或其他东西.这些东西真的有助于开发推送通知.

谢谢!

Answer 1

我自己找出了一个解决方案,它也极大地改进了EventSource接口.

服务器端:不发送事件类型,只包括一个额外的数据字段(我总是使用json).而不是

event: eventName
data: {mykey: 'myvalue'}

我从服务器发送此信息:

data: {mykey: 'myvalue', eventName: 'eventName'}

客户端:现在我可以使用EventSource onmessage回调,它会在没有事件类型的每条消息上触发.

对于绑定事件侦听器,我使用Backbone.Event功能创建了一个包装器类.结果:

// Server Sent Events (Event Source wrapper class)
var MyEventSource = (function() {

  function MyEventSource(url) {
    var self = this;
    _.extend(this, Backbone.Events);

    this.source = new EventSource(url);
    this.source.onmessage = function(event) {
      var data, eventName;
      var data = JSON.parse(event.data);
      var eventName = data.eventName; delete data.eventName;

      // Now we can monitor all server sent events
      console.log('app.server.on ', eventName, '. Data: ', data);

      self.trigger(eventName, data);
    };
  }

  return MyEventSource;
})();

现在使用这个包装器类,我可以轻松扩展功能,可以轻松监视所有服务器发送的事件,并且由于扩展了Backbone.Events,此类中的事件处理功能更强大.

用法示例:

var source = new MyEventSource('url/of/source');

// Add event listener
source.on('eventName', function(data) {
  console.log(data);
});

// Fire a event (also very useful for testing and debugging!!)
source.trigger('eventName', { mykey: 'myvalue' });

// Unbind event listener (very important for complex applications)
source.off('eventName');

现在我有一个易于处理,扩展,调试和测试的组件.