1. ホーム
  2. javascript

[解決済み] AngularJSは、永続化モデル(サーバーデータベース)が外部アプリによって変更された場合、ビューを自動更新することができますか?

2023-07-02 20:31:42

質問

AngularJSに慣れ始めたところですが、サーバー側のデータベースで何かが変更されたときに、ユーザーに対してリアルタイムで自動更新されるビューを持つWebアプリを作りたいと思っています(リフレッシュなし)。

AngularJSは私のためにこれを(ほとんど)自動的に処理することができますか? そして、もしそうなら、動作中の基本的なメカニズムは何ですか?

例えば、"model"の変更について定期的にDBをポーリングするようにAngularJSを何らかの方法で設定するのですか? あるいは、モデルが変更されたことをAngularJSクライアント側コードに通知するために、ある種のCometのようなメカニズムを使用するのですか?

私のアプリケーションにおいて、課題は、他の(ウェブではない)サーバーサイドのソフトウェアが時々データベースを更新することです。 しかし、この質問は、AngularJSのWebクライアントを通してデータベースを変更する複数のクライアントがあり、それらのうちの1つがDB(モデル)に変更を加えたときにそれぞれが更新される必要があるような純粋なWebアプリケーションにも同様に当てはまります。

どのように解決するのか?

いくつかの選択肢があります...

  1. を使って、X ミリ秒ごとにポーリングすることができます。 $timeout$http あるいは、使用しているデータが REST サービスに接続されている場合は $resource の代わりに $http .

  2. 何らかの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);
        };
    }
    
    
  3. 本当にハイテクになり、Angularモデルをサーバーと同期させるウェブソケット実装を作ることもできます。 クライアントが何かを変更すると、その変更は自動的にサーバーに送信されます。または、サーバーが変更すると、それがクライアントに送信されます。

    これは古いバージョンのAngularでの例で、やはりsocket.ioを使用しています。 https://github.com/mhevery/angular-node-socketio

EDIT : 3について、私は Firebase を使って行います。