HTML5すべてのイベントのイベントソースリスナー？

Question

JavaScriptクライアントアプリケーションでEventSourceを使用してプッシュ通知があります。

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

しかし、私は、サーバー（基本的には、デバッグ用）からプッシュされているすべてのイベントを監視したいので、いくつかのイベントが送信された場合、それは私ができる何のイベントリスナーを持っていない： 私はこのようなイベントリスナーを添付することができます簡単に見つけることができます。つまり、eventListenersがバインドされていないすべてのイベントを「無視」したくないということです。

私はこのような何かを期待する：これが可能であるかどうhtml5rocks 1つのような

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

しかし、仕様とチュートリアルは指定しないでください。

一方、すべてのサーバーイベントや何かを監視できる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'); 

今は取り扱いが容易であるコンポーネント、拡張、デバッグおよびテストを持っています。

Answer 2

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

Answer 3

私はこれがEventSourceではないことを知っていますが、私は同じ事柄（タイプを知らずにすべての着信イベントをキャッチする方法）を探していました。これらのイベントを送信するサーバの上に任意のコントロールがなければ、私はちょうどXHRでそれを書くことになった、場合には他の誰がこの出くわす：

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