Angular + Websockets +数据渲染[重复]答案

【问题标题】：Angular + Websockets + data rendering [duplicate]Angular + Websockets +数据渲染[重复]
【发布时间】：2014-06-06 19:31:38
【问题描述】：

我有使用 Websockets 的应用程序。在服务器更改一些数据后，在我从 websocket 收到一些消息后，更改了什么并需要更新表中的数据。我从 websocket 获取数据，发送 GET 请求以获取数据，并用数据更新我的范围，但我没有看到表中的更改。在 $scope.ordersList 我保存从服务器获取的日期。

我的 websockets 服务：

var services = angular.module('services', []);
services.factory('EventService', ['$cookies',
    function($cookies) {
        var service = {};
        service.connect = function() {
            if (service.ws) {
                return;
            }
            var ws = new WebSocket("ws://" + window.location.host + "/events/");

            ws.onopen = function() {
                ws.send(JSON.stringify({
                    type: "auth",
                    token: $cookies.token
                }));
                console.log("Succeeded to open a conection");
            };
            ws.onerror = function() {
                console.log("Failed to open a connection");
            };
            ws.onmessage = function(message) {
                var obj = JSON.parse(message.data);
                if (obj.result) return;

                if (obj.id) {
                    setTimeout(function() {
                        service.callback(obj);
                    }, 1000)
                }
            };
            service.ws = ws;
        };
        service.subscribe = function(callback) {
            service.callback = callback;
        };
        return service;
    }
]);

我如何在我的控制器中使用它：

EventService.subscribe(function(msg) {

            console.log('msg', msg);
            var item = $.grep($scope.ordersList, function(item) {
                return item.id == msg.id
            })
            if (item.length > 0) {
                item[0].status = msg.status
            } else {
                $scope.ordersList.push(msg);
            }

            $scope.$apply();

        });
        $scope.getOrders();
        EventService.connect();

还有我的模板：

<tr item="parameter" ng-repeat="item in ordersList">
<td>{{item.id}}</td>
<td>{{item.symbol}}</td>
</tr>

【问题讨论】：

标签： javascript angularjs websocket

【解决方案1】：

您需要将 service.callback 包装在 $rootScope.apply 中以使其进入 angulars 摘要循环。检查这个以获得概念：http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

【讨论】：