13

EventSource を使用して JavaScript クライアント アプリにプッシュ通知があります。次のようにイベント リスナーをアタッチできます。

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

しかし、サーバーからプッシュされているすべてのイベントを監視したい (基本的にはデバッグ用) ため、イベントが送信されても​​イベント リスナーがない場合は、簡単に見つけることができます。つまり、eventListeners がバインドされていないすべてのイベントを「無視」したくありません。

私はこのようなことを期待しています:

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

しかし、html5rocksにあるような仕様とチュートリアルでは、これが可能かどうかは指定されていません。

一方、すべてのサーバーイベントなどを監視できるのは、firefox/chrome 拡張機能である可能性があります。これらのことは、プッシュ通知の開発に本当に役立ちます。

ありがとう！

4

5 に答える 5

29

私は自分で解決策を見つけました。それはまた、EventSourceインターフェースを大幅に改善します。

サーバー側：イベントタイプを送信せず、追加のデータフィールドを含めるだけです（私は常にjsonを使用しています）。だから代わりに

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

代わりにサーバーからこれを送信します。

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

クライアント側：イベントタイプを持たないすべてのメッセージで発生するEventSourceonmessageコールバックを使用できるようになりました。

また、バインドイベントリスナーの場合は、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');

これで、処理、拡張、デバッグ、およびテストが簡単なコンポーネントができました。

于 2012-03-30T03:50:49.880 に答える