web-dev-qa-db-ja.com

サーバー送信イベントを使用したAngularJS

次のコントローラーを備えたAngularJSアプリがあります。通常のJSONリソースと手動の更新リクエストでGETを使用すると正常に機能しましたが、サーバー送信イベントでは機能しません。私が直面している問題は、SSEイベントを受け取り、openListingsReport変数を設定/更新した後、ビューが更新されないことです。明らかに非常に基本的な概念が欠落しています。これを修正するのを手伝ってください。

var rpCtrl = angular.module('rpCtrl', ['rpSvc']);

rpCtrl.controller('rpOpenListingsCtrl', ['$scope', 'rpOpenListingsSvc',
    function ($scope, rpOpenListingsSvc) {
        $scope.updating = false;

        if (typeof(EventSource) !== "undefined") {
            // Yes! Server-sent events support!
            var source = new EventSource('/listings/events');

            source.onmessage = function (event) {
                $scope.openListingsReport = event.data;
                $scope.$apply();
                console.log($scope.openListingsReport);
            };
        }
    } else {
        // Sorry! No server-sent events support..
        alert('SSE not supported by browser.');
    }

    $scope.update = function () {
        $scope.updateTime = Date.now();
        $scope.updating = true;
        rpOpenListingsSvc.update();
    }

    $scope.reset = function () {
        $scope.updating = false;
    }
}]);
javascriptangularjsserver-sent-events
14
krl

問題は次の行にありました：

$scope.openListingsReport = event.data;

これは次のようになります。

$scope.openListingsReport = JSON.parse(event.data);
7
krl

誰かがAngularJsでSSEを使用している場合の単なる提案。

サーバー側のイベントを使用する場合は、SSEの代わりにAngularJSに組み込まれている$ intervalサービスを使用することをお勧めします。

以下は基本的な例です。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <p>Randome no:</p>

    <h1>{{myWelcome}}</h1>

</div>

<p>The $interval service runs a function every specified millisecond.</p>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $interval, $http) {
        $scope.myWelcome = new Date().toLocaleTimeString();
        $interval(function () {
            $scope.myWelcome = $http.get("test1.php").then(function (response) {
                $scope.myWelcome = response.data;
            });
        }, 3000);
    });
</script>

</body>
</html>

test1.php

<?php

echo Rand(0,100000);
0
Vaibs