15

で実装された Web アプリを更新する方法を見つける必要がありますbackbone。

ユースケースは次のとおりです。
いくつかのビューがあり、各ビュー、またはこのビューに関連するモデル/コレクションは、変更を検出するために、サーバーに対して異なる時間に異なるポーリング要求を行う必要があります。

最も一般的な方法は次のとおりです。

1) 実施するTraditional Polling Request
2) 実施するLong Polling Request
3) 実施するHTML5 web socket

PS:
1) サーバーは PHP で書かれています。
2) 今のところ、HTML5 WebSockets を使用しないソリューションを探しています。おそらく PHP ではそれほど単純ではないからです。

を使用した簡単なコード (1) を次に示しTraditional Polling Requestます。

(1)

// MyModel
var MyModel = Backbone.View.extend({
    urlRoot: 'backendUrl'
});

// MyView
var MyView = Backbone.View.extend({

    initialize: function () {
        this.model = new MyModel();
        this.model.fetch();
        this.model.on('change', this.render);
        setTimeout(function () {
            this.model.fetch();
        }, 1000 * 60 * 2); // in order to update the view each two minutes
    }
});
4

3 に答える 3

18

モデルにポーリング ハンドラを実装します。次の例を確認してください。

// MyModel
var MyModel = Backbone.Model.extend({
  urlRoot: 'backendUrl',

  //Add this to your model:
  longPolling : false,
  intervalMinutes : 2,
  initialize : function(){
    _.bindAll(this);
  },
  startLongPolling : function(intervalMinutes){
    this.longPolling = true;
    if( intervalMinutes ){
      this.intervalMinutes = intervalMinutes;
    }
    this.executeLongPolling();
  },
  stopLongPolling : function(){
    this.longPolling = false;
  },
  executeLongPolling : function(){
    this.fetch({success : this.onFetch});
  },
  onFetch : function () {
    if( this.longPolling ){
      setTimeout(this.executeLongPolling, 1000 * 60 * this.intervalMinutes); // in order to update the view each N minutes
    }
  }
});

// MyView
var MyView = Backbone.View.extend({

    initialize: function () {
        this.model = new MyModel();
        this.model.startLongPolling();
        this.model.on('change', this.render);
    }
});
于 2012-07-16T15:24:17.410 に答える
11

ここであなたが何を求めているのかわかりませんが、ここにいくつかの考えがあります：

1)あなたのコードは、タイトルに書いたことと矛盾しているようです。setTimeout継続的なポーリングに(または) を使用setIntervalすることは、長いポーリングとは異なります。実際には（通常の）ポーリングです。違いは、長いポーリングでクライアントが AJAX 要求を開始し、クライアントが待機することです。サーバーはいつ応答するかを決定します。また、新しいデータが利用可能になった場合にのみ応答する必要があります。そして、応答クライアントが新しいポーリング要求を開始した直後。

補足: (比較的) 効率的なロング ポーリング サーバーを作成するのは簡単なことではありません。

2)クライアント側の処理方法 (つまり、長いポーリング ロジックを配置する場所) は、コード内で何が起こっているかを知っている限り、実際には問題ではありません。もちろん、将来的にコードに変更を加える可能性があることを念頭に置いておいてください。私が選択するアーキテクチャは次のとおりです。

  • EventManagerグローバルオブジェクトを作成する独立したスクリプト(このスクリプトは最初のスクリプトとしてロードする必要があります)。このようなオブジェクトには次のメソッドがあります:.bindそして.trigger、ええと... イベントを管理します。:) たとえば、実装は次のようになります。

自分のオブジェクトにイベントを実装する

  • 長いポーリングを処理する独立したスクリプト。サーバーからデータを受信するたびに (つまり、AJAX ロング ポーリング リクエストが最終的に終了すると)、 を呼び出しますEventManager.trigger('long_polling_data', res);。次に、バックボーン ビュー内または好きな場所でこのイベントにバインドする必要があります。

補足: このアーキテクチャの追加のボーナスは、WebSockets またはその他の手法 (JSONP ポーリングなど) に切り替えることにした場合、他の手法のロジックを実装するだけでよいことです。メイン コードはイベントのみを使用するlong_polling_dataため、追加の変更は必要ありません (イベントの名前を変更したい場合があります :] )。

3)あなたは WebSocket を使いたくないと言っていますが、私はこれについてコメントしなければなりません。:) あなたは、世界が常に進化していることを知っています。ロングポーリングテクニックは忘れてください。フォールバックとして WebSocket と XMLSocket (別名 FlashSocket) を使用すると、はるかに効率的で、サーバー側の実装がはるかに簡単になります。

少しでも役に立てば幸いです。言葉の間違いは申し訳ありませんが、プロジェクトの成功を祈っています。

于 2012-07-12T14:11:17.303 に答える
2

質問の中で、php で websockets を使用するつもりはない (それほど単純ではないため) と述べていることは知っていますが、比較的簡単であることがわかりました。

  1. 私は、フォールバックを備えた Web ソケット アプリであるhttp://pusher.com/を使用しました。（ちなみに私はその会社とは関係ありません）。
  2. server/apiにhttps://github.com/squeeks/Pusher-PHPを含めます
  3. <script src="http://js.pusherapp.com/1.12/pusher.min.js"></script>クライアント側に含めます。

クライアントとサーバーのチャネルは、Web ソケットを使用して相互に通信するように設定できます。

于 2012-07-17T09:23:03.633 に答える