[解決済み] AngularJSは、永続化モデル(サーバーデータベース)が外部アプリによって変更された場合、ビューを自動更新することができますか?
質問
AngularJSに慣れ始めたところですが、サーバー側のデータベースで何かが変更されたときに、ユーザーに対してリアルタイムで自動更新されるビューを持つWebアプリを作りたいと思っています(リフレッシュなし)。
AngularJSは私のためにこれを(ほとんど)自動的に処理することができますか? そして、もしそうなら、動作中の基本的なメカニズムは何ですか?
例えば、"model"の変更について定期的にDBをポーリングするようにAngularJSを何らかの方法で設定するのですか? あるいは、モデルが変更されたことをAngularJSクライアント側コードに通知するために、ある種のCometのようなメカニズムを使用するのですか?
私のアプリケーションにおいて、課題は、他の(ウェブではない)サーバーサイドのソフトウェアが時々データベースを更新することです。 しかし、この質問は、AngularJSのWebクライアントを通してデータベースを変更する複数のクライアントがあり、それらのうちの1つがDB(モデル)に変更を加えたときにそれぞれが更新される必要があるような純粋なWebアプリケーションにも同様に当てはまります。
どのように解決するのか?
いくつかの選択肢があります...
-
を使って、X ミリ秒ごとにポーリングすることができます。
$timeout
と$http
あるいは、使用しているデータが REST サービスに接続されている場合は$resource
の代わりに$http
. -
何らかのWebsocketの実装を使用するサービスを作成し
scope.$apply
を使用して、ソケットからプッシュされた変更を処理することができます。 ここでは、node.jsのWebSocketライブラリであるsocket.ioを使用した例を紹介します。myApp.factory('Socket', function($rootScope) { var socket = io.connect('http://localhost:3000'); //Override socket.on to $apply the changes to angular return { on: function(eventName, fn) { socket.on(eventName, function(data) { $rootScope.$apply(function() { fn(data); }); }); }, emit: socket.emit }; }) function MyCtrl($scope, Socket) { Socket.on('content:changed', function(data) { $scope.data = data; }); $scope.submitContent = function() { socket.emit('content:changed', $scope.data); }; }
-
本当にハイテクになり、Angularモデルをサーバーと同期させるウェブソケット実装を作ることもできます。 クライアントが何かを変更すると、その変更は自動的にサーバーに送信されます。または、サーバーが変更すると、それがクライアントに送信されます。
これは古いバージョンのAngularでの例で、やはりsocket.ioを使用しています。 https://github.com/mhevery/angular-node-socketio
EDIT : 3について、私は Firebase を使って行います。
関連
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JSONウェブトークンの無効化
-
[解決済み] MVWとは何の略ですか?
-
[解決済み] 認証とセッション管理に関するSPAのベストプラクティス
-
[解決済み】どのような状況で、AJAXのロング/ショートポーリングがHTML5 WebSocketよりも好ましいですか?
-
[解決済み】典型的なAngularJSのワークフローとプロジェクト構成(Python Flaskを使用した場合)
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] 変異を伴わないオブジェクトからの値の削除