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 */ });

使用带有AngularJS和$ broadcast的WebSockets

1 个答案: