AngularJS + WebSockets

Question

I have several controllers. In one of them, i need to open web socket connection. In another i need to listen messages and if needed update $scope. Please help me do that on example below:

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. i understand that the problem is trivial, but i am new in AngularJS and WebSockets, i need help, and now i don't have time for learn docs (what will i do later)

Anton Vahmin · Accepted Answer · 2015-02-17 10:24:36Z

I found a simple solution with factories:

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;
}]);

when

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
    });
}]);

Community · Accepted Answer · 2017-05-23 11:52:59Z

0

Please take a look at this answer : AngularJS and WebSockets beyond

Basically it is an example about creating a WebSocket service in AngularJS that can be used to request/response and publish/subscribe.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Feb 17, 2015 at 9:55

vtortola

36.1k33 gold badges169 silver badges270 bronze badges

Collectives™ on Stack Overflow

AngularJS + WebSockets

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related