HTML5 EventSource listener for all events?

Question

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

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

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

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.

Thanks!

Answer 1

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

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'}

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

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;
})();

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.

Usage example:

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.