Question

我的AngularJS CRUD应用程序通过WebSocket服务器处理它的信息。（这主要是为了让一个用户的更新自动推送给所有用户，而无需进行大规模的HTTP轮询）

我很早就意识到，我必须以不同于HTTP服务的方式设置我的服务。通常，对于我正在使用的每个模型，我给他们自己的服务来填充该特定模型。但是，对于Websocket连接，这是不可行的，因为我不希望每个服务都有单独的连接。因此，有几种解决方案。

1）设置一个建立连接的服务，然后与将使用该服务进行特定查询的其他服务共享该连接

2）制作一个与类型无关的单一服务，供所有需要访问连接和数据的控制器使用。

选项2似乎更容易管理，并且可以跨应用程序重用，所以我开始这样做。那时我意识到这实际上是一个机会。我可以创建一个主data对象，并在数据从请求流入时根据需要动态创建myService.data子对象，而不是为客户端可以接收的每种类型的数据显式创建模型。因此，如果我需要更新我的模型，我只需在服务器级更新模型，并且客户端已经知道如何接收它;它只需要一个知道如何使用它的控制器。

然而，这个机会带来了一个缺点。显然，因为myService.Data在创建时是一个空的无子对象，所以任何想要引用其未来子元素的Scope都必须简单地引用该对象本身。

例如，$scope.user = myService.data.user会抛出错误，因为声明时该对象不存在。似乎我唯一的选择是每个控制器只有$scope.data = myservice.data，每个控制器的视图只需要使用 < ng-model='data'>，声明类似{{data.user.username}}。我测试了它，这确实有效。

我的问题是这个;有什么办法可以让两全其美吗？我可以让我的服务动态更新它的数据模型，但仍然让我的控制器只访问他们需要的部分吗？一世？在我意识到我的所有控制器都可以访问整个数据模型之前，我感觉非常聪明......但老实说，我无法确定这是否是一个巨大的问题。

这是我的服务：

app.factory('WebSocketService', ['$rootScope', function ($rootScope) {
    var factory = {
        socket: null,
        data: {},
        startConnection: function () {
            //initialize Websocket
            socket = new WebSocket('ws://localhost:2012/')
            socket.onopen = function () {
              //todo: Does anything need to happen OnOpen?
            }
            socket.onclose = function () {
              //todo: Does anything need to happen OnClose?
            }
            socket.onmessage = function (event) {
                var packet = JSON.parse(event.data);
                ////Model of Packet:
                ////packet.Data: A serialised Object that contains the needed data
                ////packet.Operation: What to do with the Data
                ////packet.Model: which child object of Factory.data to use
                ////packet.Property: used by Update and Delete to find a specific object with a property who's name matches this string, and who's value matches Packet.data
                //Deserialize Data
                packet.Data = JSON.parse(packet.Data);
                //"Refresh" is used to completely reload the array 
                // of objects being stored in factory.data[packet.Model]
                // Used for GetAll commands and manual user refreshes
                if (packet.Operation == "Refresh") {
                    factory.data[packet.Model] = packet.Data
                }
                //Push is used to Add an object to an existing array of objects.  
                //The server will send this after somebody sends a successful POST command to the WebSocket Server
                if (packet.Operation == "Push") {
                    factory.data[packet.Model].push(packet.Data)
                }
                if (packet.Operation == "Splice") {
                    for (var i = 0; i < factory.data[packet.Model].length; i++) {
                        for (var j = 0; j < packet.Data.length; j++){
                            if (factory.data[packet.Model][i][packet.Property] == packet.Data[j][packet.Property]) {
                                factory.data[packet.Model].splice(i, 1);
                                i--;
                            }
                        }
                    }          
                }
                // Used to update existing objects within the Array.  Packet.Data will be an array, although in most cases it will usually only have one value.  
                if (packet.Operation == "Update") {
                    for (var i = 0; i < factory.data[packet.Model].length; i++) {
                        for (var j = 0; j < packet.Data.length; j++) {
                            if (factory.data[packet.Model][i][packet.Property] == packet.Data[j][packet.Property]) {
                                factory.data[packet.Model][i] = packet.Data[j]
                                i--;
                            }
                        }
                    }
                }
                //Sent by WebSocket Server after it has properly authenticated the user, sending the user information that it has found.  
                if (packet.Operation == "Authentication") {
                    if (packet.Data == null) {
                        //todo: Authentication Failed.  Alert User Somehow
                    }
                    else {
                        factory.data.user = packet.Data;
                        factory.data.isAuthenticated = true;
                    }

                }
                $rootScope.$digest();
            }  
        },
        stopConnection: function () {
            if (socket) {
                socket.close();
            }
        },
        //sends a serialised command to the Websocket Server according to it's API.
        //The DataObject must be serialised as a string before it can be placed into Packet object,which will also be serialised.  
        //This is because the Backend Framework is C#, which must see what Controller and Operation to use before it knows how to properly Deserialise the DataObject.
        sendPacket: function (Controller, Operation, DataObject) {
            if (typeof Controller == "string" && typeof Operation == "string") {
                var Data = JSON.stringify(DataObject);
                var Packet = { Controller: Controller, Operation: Operation, Data: Data };
                var PacketString = JSON.stringify(Packet);
                socket.send(PacketString);
            }
        }
    }
    return factory
}]);

这是一个访问用户信息的简单控制器。它实际上在动态<div>之外的Index.html中的永久标头<ng-view>中使用。它负责启动Websocket连接。

App.controller("AuthenticationController", function ($scope, WebSocketService) {
    init();

    function init() {
        WebSocketService.startConnection();
    }
    //this is the ONLY way that I have found to access the Service Data.
    //$scope.user = WebSocketService.data.user doesn't work
    //$scope.user = $scope.data.user doesn't even work
    $scope.data = WebSocketService.data
});

这是使用该控制器的HTML

    <div data-ng-controller="AuthenticationController">
        <span data-ng-model="data">{{data.user.userName}}</span>
    </div>

Answer 1

您可以做的一件事是将data对象存储在根作用域上，并在各种控制器上设置监视以查看所需的控制器特定键：

// The modules `run` function is called once the 
// injector is finished loading all its modules.
App.run(function($rootScope, WebSocketService) {
  WebSocketService.startConnection();
  $rootScope.socketData = WebSocketService.data;
});

// Set up a $watch in your controller
App.controller("AuthenticationController", function($scope) {
  $scope.$watch('socketData.user', function(newUser, oldUser) {
    // Assign the user when it becomes available.
    $scope.user = newUser;
  });
});

如果我将所有数据提供给所有控制器，我会遇到什么问题？

1 个答案: