Angularjs + socket + unable to pass the data into controller

Question

I am new in this socket. I using backend node js and frontend angularjs.

My data printing in service but unable to get that data into controller.

server.js:

var server = app.listen(port);
var io = require('socket.io').listen(server);
io.on('connection', function(socket) {
    setInterval(function() {
        socket.emit('addCustomer', {
            time : new Date() + "8989"
        });
    }, 1000);
});

service.js:

var app = angular.module('myApp');

app.factory('socket', ['$rootScope',
function($rootScope) {
    var socket = io.connect('http://localhost:9090');

    return {
        // replace with the code below
        on : function() {//on: function(addCustomer){
            socket.on("addCustomer", function(customer) {
                console.log("Socket Factory - customer added", customer);
                return customer;
            });
        },
        emit : function(addCustomer, data) {
            console.log("rk");
            console.log(data);
            socket.emit(addCustomer, data);
        }
    };
}]);

controller.js:

var app = angular.module('myApp');

app.controller('CustomerCtrl', function($scope, socket) {

    socket.on('addCustomer', function(data) {
        console.log(data);
        console.log("--")
        $scope.time = data.time;
    });

})

Output printing in console in factory file. but I unable to pass that data into controller. pls anyone help to resolve this.

output in console:

Socket Factory - customer added Object {time: "Thu Sep 29 2016 16:52:44 GMT+0530 (IST)8989"}
socketService.js:11 Socket Factory - customer added Object {time: "Thu Sep 29 2016 16:52:45 GMT+0530 (IST)8989"}
socketService.js:11 Socket Factory - customer added Object {time: "Thu Sep 29 2016 16:52:46 GMT+0530 (IST)8989"}

Valery Kozlov · Answer 1 · 2016-09-29T13:05:01.177

you should run angular digest, when you change data outside angular lifectycle (in non-angular async functions)

socket.on('addCustomer', function(data) {
        console.log(data);
        console.log("--")
        $scope.time = data.time;
        $scope.$apply(); //this call actiually should be placed in your service
});

edited:

ahh, sry, you just do not provide params to your service. change service method with corresponding:

function($rootScope) { var socket = io.connect('http://localhost:9090');

return {
    // replace with the code below
    on : function(type, cb) {//on: function(addCustomer){
        socket.on(type, cb);
    }
};

The console log printing only from factory only. The console log not printing in controller. — RSKMR, Sep 29 '16 at 12:59

score 0 · Answer 2 · edited May 23 '17 at 11:48

Are you invoking your controller from your view properly. You can take a look at here for more info AngularJS. How to call controller function from outside of controller component

Could you copy your view file so that we can take a look.

Also, if nothing works out I would try to explicitly load the listener , something like this.

var app = angular.module('myApp');

app.controller('CustomerCtrl', function($scope, socket) {

    $scope.loadListener = function() {
        Console.log("Loading listener for event addCustomer")    
        socket.on('addCustomer', function(data) {
            console.log(data);
            console.log("--")
            $scope.time = data.time;
        });
    }

   $scope.testAlert = function() { alert("Method bound to controller") }
})

And explicitly bind the loadListener method to a button via ng-click just to check if your controller is actually bound properly.

There is also another approach via ng-init. You could take a look at this thread. How to execute angular controller function on page load?

With ng-init you could probably do

<div data-ng-controller="CustomerCtrl" data-ng-init="loadListener()"></div>

just to be sure if your controller is bound properly

Angularjs + socket + unable to pass the data into controller

2 Answers2