AngularJS + WebSockets

时间:2015-02-17 07:03:27

标签: javascript angularjs websocket

我有几个控制器。 在其中一个中,我需要打开Web套接字连接。 在另一个我需要监听消息,如果需要更新$ scope。 请帮我做下面的例子:

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.testProp = {};
    $scope.testProp2 = '';
    // listen messages here
    // and update $scope.testProp && $scope.testProp2
}]);

app.controller('SearchCtrl', ['$scope', function($scope) {
    // open connection here
}]);

P.S。我明白这个问题很简单,但我是AngularJS和WebSockets的新手,我需要帮助,现在我没有时间学习文档(我将来会做什么)

2 个答案:

答案 0 :(得分:9)

我找到了一个简单的工厂解决方案:

app.factory('socket', [function() {
    var stack = [];
    var onmessageDefer;
    var socket = {
        ws: new WebSocket(websocket_url),
        send: function(data) {
            data = JSON.stringify(data);
            if (socket.ws.readyState == 1) {
                socket.ws.send(data);
            } else {
                stack.push(data);
            }
        },
        onmessage: function(callback) {
            if (socket.ws.readyState == 1) {
                socket.ws.onmessage = callback;
            } else {
                onmessageDefer = callback;
            }
        }
    };
    socket.ws.onopen = function(event) {
        for (i in stack) {
            socket.ws.send(stack[i]);
        }
        stack = [];
        if (onmessageDefer) {
            socket.ws.onmessage = onmessageDefer;
            onmessageDefer = null;
        }
    };
    return socket;
}]);

app.controller('MainCtrl', ['$scope', 'socket', function($scope, socket) {
    socket.onmessage(function(event) {
        //var data = JSON.parse(event.data);
        //$scope.testVar = 
    });
}]);

app.controller('SearchCtrl', ['$scope', 'socket', function($scope, socket) {
    socket.send({
        //somedata
    });
}]);

答案 1 :(得分:0)

请看一下这个答案:AngularJS and WebSockets beyond

基本上它是一个关于在AngularJS中创建可用于请求/响应和发布/订阅的WebSocket服务的示例。