AngularJS mit Server-Sent Events

Ich habe eine AngularJS app mit der Steuerung. Es funktionierte mit BEKOMMEN auf regelmäßige JSON-Ressource und manuelle updates anfordern, aber ich kann nicht damit es funktioniert mit Server-Sent Events. Das problem, das ich konfrontiert ist, dass, nachdem ich eine SSE-Ereignis und setzen/aktualisieren openListingsReport variable meiner Sicht nicht immer aktualisiert. Ich bin natürlich fehlt auch ein sehr einfaches Konzept. Bitte helfen Sie mir dieses Problem zu beheben.

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;
    }
}]);
Ist EventSource gebunden an irgendeine Art von web socket (signalr, etc)? Sie können nicht nur setzen scope-Funktionen auf einer eckigen controller und erwarten, dass die server Anfragen zu senden es automatisch.
Die Ereignisquelle ist Teil des HTML-SSE-spec: developer.mozilla.org/en-US/docs/Web/API/EventSource der Server ist nicht das problem. Ich habe aktualisierte Wert von openListingsReport in der client JS. Ich kann einfach nicht machen AngularJS zu zeigen, der aktualisierte Wert von openListingsReport in HTML.
Ist die Ausgabe von console.log($scope.openListingsReport) undefined oder null oder einfach nur leer? Versuchen Sie, die Befestigung der message-Ereignis wie diesem: source.addEventListener('message', function(e) { console.log(e.data); }, false); ich fand diesen Artikel hilfreich: html5rocks.com/en/tutorials/eventsource/basics
Ich sehe, sorry. Versuchen Sie, Ihre $scope Deklaration innerhalb der $apply(): $scope.$apply(function(){ $scope.openListingsReport = event.data;}); Check this out: smartjava.org/content/...
Beachten Sie, dass Sie nur selten machen zu müssen $scope.$apply(); Dirty Kontrolle sollte behandeln die überwiegende Mehrheit von Fällen, einschließlich dieser

InformationsquelleAutor krl | 2014-08-06

  1. 7

    War das problem in der folgenden Zeile:

    $scope.openListingsReport = event.data;

    werden sollten:

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

    InformationsquelleAutor krl

  2. 0

    Nur ein Vorschlag für den Fall dass jemand mit SSE mit AngularJs.

    Wenn Sie möchten, verwenden Sie die server-side-events ,werde ich vorschlagen, zu verwenden, $Intervall-service, builtin ist innerhalb von AngularJS, anstatt SSE.

    Unten ist das grundlegende Beispiel.

    <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);
    Was Sie vorschlagen, ist polling, das ist bei vielen Anwendungen erheblich schlechter als eine server-basierte push-Architektur.
    sogar jeder weiß bereits, dass seine nur eine alternative, wenn es helfen kann.

    InformationsquelleAutor Vaibs

Schreibe einen Kommentar