Auditeur HTML5 EventSource pour tous les événements?

J'ai les notifications push dans mon JavaScript application client à l'aide EventSource.
Je peux joindre des écouteurs d'événement comme ceci:

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

Mais je veux surveiller tous les événements qui sont en train d'être poussé à partir du serveur (en gros pour le débogage), donc si un événement est envoyé, mais il n'a pas d'écouteur d'événement, je peux facilement le trouver. Je veux dire, je ne tiens pas à "ignorer" tous les événements qui n'ont pas de eventListeners liées.

Je m'attends à faire quelque chose comme ceci:

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

Mais la spécification et des tutoriels comme celui de html5rocks ne précisez pas si c'est possible ou pas.

Dans l'autre main, il peut y avoir un firefox/chrome extension qui permet de surveiller tous les événements de serveur ou quelque chose. Ces choses serait vraiment de l'aide sur le développement de notifications push.

Merci!

source d'informationauteur tothemario

  1. 25

    J'ai trouver une solution moi-même, cela permet d'améliorer énormément la EventSource interface.

    Côté serveur: Ne pas envoyer le type d'événement, il suffit d'inclure un supplément de champ de données (compte que j'ai toujours utiliser json). Ainsi, au lieu de

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

    J'envoie ce à partir du serveur à la place:

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

    Côté Client: je peux Maintenant utiliser EventSource onmessage de rappel, qui est déclenché à chaque message, qui ne dispose pas d'un type d'événement.

    Et pour lier les écouteurs d'événement, j'ai créer une classe wrapper avec la colonne vertébrale.L'événement de la fonctionnalité. Le résultat:

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

    Maintenant, avec cette classe wrapper, je peux facilement étendre les fonctionnalités, tous les serveur a envoyé des événements peuvent être facilement surveillés et grâce à l'extension de la colonne vertébrale.Les événements de la gestion des événements de cette classe est beaucoup plus puissant.

    Exemple d'utilisation:

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

    Maintenant, j'ai un composant qui est facile à manipuler, de proroger, de débogage et de test.

  2. 0
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>  
  <script>
    var content = '';
    if(typeof(EventSource)!=="undefined")
    {
      var source = new EventSource("demo_sse.php");
      source.onmessage = function(event)
      {
        content+=event.data + "<br>";
        $("#result").html(content);
      };
    }
    else
    {
      $("#result").html("Sorry, your browser does not support server-sent events...");
    }
  </script>
  3. 0

    Je sais que ce n'est pas un EventSource, mais je cherchais la même chose (un moyen de rattraper tous les événements entrants sans connaître leur type). Sans aucun contrôle sur le serveur de l'envoi de ces événements, j'ai fini par l'écrire avec un XHR, au cas où quelqu'un d'autre tombe sur ceci:

    function eventStream(path, callback){
//Create XHR object
var xhr = new XMLHttpRequest();
//initialize storage for previously fetched information
var fetched='';
//Set readystatechange handler
xhr.onreadystatechange=function(){
//If the connection has been made and we have 200, process the data
if(xhr.readyState>2 && xhr.status==200){
//save the current response text
var newFetched=xhr.responseText;
//this is a stream, so responseText always contains everything
//from the start of the stream, we only want the latest
var lastFetch=xhr.responseText.replace(fetched, '');
//Set the complete response text to be removed next time 
var fetched=newFetched;
//callback to allow parsing of the fetched data
callback(lastFetch);
}
};
//open and send to begin the stream;
xhr.open('GET', path, true);
xhr.send();
}
parseEvents=function(response){
var events=[];
//split out by line break
var lines=response.split("\n");
//loop through the lines
for(var i=0;i<lines.length;i++){
//each event consists of 2 lines, one begins with
//"name:", the other with "data"
//if we hit data, process it and the previous line
if(lines[i].substr(0, lines[i].indexOf(':'))=='data'){
//add this event to our list for return
events.push({
//get the event name
name: lines[i-1].split(':')[1].trim(),
//parse the event data
data: $.parseJSON(lines[i].substr(lines[i].indexOf(':')+1).trim())
});
}
}
//return the parsed events
return events;
};
evenStream('http://example.com/myEventPath', function(response){
var events=parseEvents(response);
});