The view/controller does not refresh with push() function using socket.io in angularjs

Question

I'm trying to refresh the controller of my angular app to receiving objects from socket.io. Everything works fine except that the view don't show when I add a new object to the variable with the push function. Here's my code.

Controller.js

app.controller('controller', function(){
var vm = this;
var socket = io.connect('http://localhost:3000');
//The variable that bends
vm.messages = [];

socket.on("addMsg", function(obj){
    vm.messages.push({user: obj.user, content: obj.content, color:obj.col});
});


});

view.jade

    ...
 body(ng-controller = "controller as con")
.messages
    p Messages:
    p(ng-repeat="array in con.messages") content: {{array.content}} , color: {{array.color}}

Whats wrong with my code?, the purpose is to show all content in p tag using ng-repeat.

it's likely you need an $apply around vm.messages.push as it's within the socket callback — aw04
– aw04, Commented Jan 15, 2016 at 19:55

Henry Zou · Accepted Answer · 2016-01-20 20:41:12Z

2

This tiny angular factory socket service from html5rocks article angular-websocket wraps socket.io in angular scope. It does the auto $rootScope.$apply()

app.factory('socket', function ($rootScope) {
  var socket = io.connect();
  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {  
        var args = arguments;
        $rootScope.$apply(function () {
          callback.apply(socket, args);
        });
      });
    },
    emit: function (eventName, data, callback) {
      socket.emit(eventName, data, function () {
        var args = arguments;
        $rootScope.$apply(function () {
          if (callback) {
            callback.apply(socket, args);
          }
        });
      })
    }
  };
});

answered Jan 20, 2016 at 20:41

Henry Zou

1,9271 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BoJoe22 · Accepted Answer · 2016-01-20 20:32:30Z

0

I had the exact same problem when I was trying to update an angular scope variable inside of the socket.on callback. Just as @aw04 mentioned in his comment, the fix was to make a simple call to $scope.$apply()

answered Jan 20, 2016 at 20:32

BoJoe22

953 silver badges10 bronze badges

Collectives™ on Stack Overflow

The view/controller does not refresh with push() function using socket.io in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related