在AngularJS和$broadcast中使用WebSockets

Question

我已经使用websockets设置了一个AngularJS应用程序，它似乎正在工作。

var app = angular.module('websocketApp',[]);
app.factory('WebSocket',function($rootScope) {
    var websocket = new WebSocket(websocket_url);
    var items = [];
    websocket.onmessage = function(msg) {
        items.push(JSON.parse(msg.data));
        $rootScope.$broadcast('new_message');    
    }
    return {
        fetchItems: function() {
            return items;
        }
    }
});
app.controller('ItemsCtrl',function($scope,WebSocket) {
    $scope.$on('new_message',function() {
        $scope.$apply(function() {
            $scope.items = WebSocket.fetchItems();
        });
    });
});

我的问题是，如果有人使用websockets设置了一个Angular应用程序，如果这种实现是正确的方法，或者是否有更好的解决方案。我读过很多关于使用$broadcast的缺点，但这似乎是$broadcast功能的正确用法。

Answer 1

你做的方法似乎很好。我这样做的另一种方法是存储一个事件/回调数组，并在其中注册我想要接收的事件。

例如:

angular.module('myapp.services.socket', [])
    .factory('io', ['$rootScope', 'globals', function ($rootScope, globals) {
        var socket;
        var curChannel;
        var eventCache = [];
        function isConnected() {
            return socket && socket.socket.connected;
        }
        function on(eventName, callback) {
            socket.on(eventName, function () {  
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        }
        function emit(eventName, data, callback) {
            socket.emit(eventName, data, function () {                      
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
        return {
            registerEvent: function(eventName, callback) {
                eventCache.push({ name: eventName, cb: callback });
                if(isConnected()){
                    on(eventName, callback);
                }
            },  
            emit: function (eventName, data, callback) {                
                // firstly check that the socket is connected
                if(isConnected()){
                    emit(eventName, data, callback);
                }else{                  
                    // connect to the server and subscribe upon connection
                    socket = io.connect(globals.api + ':80');
                    socket.on('connect', function(){
                        emit(eventName, data, callback);
                        // add the events from the cache
                        for(var i in eventCache){
                            on(eventCache[i].name, eventCache[i].cb);
                        }
                    });
                }               
            }
        };
    }]);

这样，只要你想，只要注入这个服务，你就可以注册事件回调，然后运行:

io.registerEvent('some_event', function(){ /* some logic */ });