所有事件的HTML5 EventSource侦听器？ [英] HTML5 EventSource listener for all events?

问题描述

我使用EventSource在我的JavaScript客户端应用中推送通知。
我可以附加这样的事件监听器：

I have push notifications in my JavaScript client app using EventSource. I can attach event listeners like this:

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

但我想监控从服务器推送的所有事件（主要用于调试），所以如果发送了一些事件但它没有事件监听器，我可以很容易地找到它。我的意思是，我不想只是忽略所有没有eventListeners绑定的事件。

But I want to monitor all events that are being pushed from the server (basically for debugging), so if some event is sent but it has no event listener I can easily find it. I mean, I don't want to just "ignore" all events that have no eventListeners binded.

我希望做到这样的事情：

I would expect to do something like this:

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

但规格和教程如 html5rocks 不指定是否可行。

But the specification and tutorials like the one at html5rocks don't specify if this is possible or not.

In另一方面，它可能是一些Firefox / Chrome扩展，允许监视所有服务器事件或其他事情。这些事情对于开发推送通知确实有帮助。

In the other hand, it may be some firefox/chrome extension that allows to monitor all server events or something. Those things would really help on developing push notifications.

谢谢！

推荐答案

<我自己找出了一个解决方案，它也大大改善了EventSource界面。

I figure out a solution myself, that also improves tremendously the EventSource interface.

服务器端：不要发送事件类型，只是包括一个额外的数据字段（我总是使用json）。因此，而不是

Server side: Do not send the event type, just include an additional data field (having that I always use json). So instead of

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

我从服务器发送此信息：

I send this from the server instead:

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

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

Client side: Now I can use EventSource onmessage callback, that is fired on every message that does not have an event type.

对于绑定事件监听器，我使用Backbone.Event功能创建一个包装类。结果：

And for bind event listeners, I create a wrapper class with Backbone.Event functionality. The result:

// 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，这个类中的事件处理功能更强大。

Now with this wrapper class, I can easily extend the functionality, all server sent events can be easily monitored and thanks to extending Backbone.Events the event handling in this class is much more powerful.

用法示例：

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');

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

Now I have a component that is easy to handle, extend, debug and test.

这篇关于所有事件的HTML5 EventSource侦听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！