将 WebSockets 与 AngularJS 和 $broadcast 一起使用答案

【问题标题】：Using WebSockets with AngularJS and $broadcast将 WebSockets 与 AngularJS 和 $broadcast 一起使用
【发布时间】：2014-07-14 14:11:38
【问题描述】：

我已经使用 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 功能的正确用法。

【问题讨论】：

标签： angularjs websocket broadcast

【解决方案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 */ });

【讨论】：