HTML5-EventSource-listener für alle Ereignisse?

Ich herausfinden, eine Lösung mir, dass verbessert auch ungemein die EventSource-interface.

Server-Seite: senden Sie den event-Typ, fügen Sie einfach ein zusätzliches Datenfeld (die, die ich immer benutze json). Also anstatt

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

Schicke ich diese vom server statt:

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

Client-Seite: Jetzt kann ich mit EventSource onmessage callback, der ausgelöst wird, auf jede Nachricht, die nicht über ein Ereignis geben.

Und zum binden von event-Listenern, ich erstelle eine wrapper-Klasse mit Rückgrat.Event-Funktionalität. Das Ergebnis:

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

Nun mit dieser wrapper-Klasse, kann ich problemlos erweitern die Funktionalität, alle server gesendeten Ereignisse können leicht überwacht werden und Dank der Verlängerung von Rückgrat.Events das event-handling in dieser Klasse ist viel leistungsfähiger.

Beispiel:

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

Nun habe ich eine Komponente, die einfach zu handhaben, zu verlängern, zu Debuggen und zu testen.

InformationsquelleAutor tothemario

Ich weiß, das ist nicht eine EventSource, aber ich war auf der Suche für die gleiche Sache (ein Weg, um zu fangen alle eingehenden Ereignisse, ohne zu wissen, Ihre Art). Ohne Kontrolle über den server, das senden dieser events, ich landete nur zu schreiben, es mit einem XHR, falls jemand anderes auf diesen:

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

InformationsquelleAutor Trey