AngularJS does not refresh view with socket.io

Question

I have a node.js server application with the following setup :

    var express = require('express');
    var io = require('socket.io');
    var http = require('http');
    var app = express();

    app.use(express.static('public'));

    var server = http.createServer(app);
    io = io.listen(server); 

    io.on('connection', function(socket){
        console.log('a user is connected');
    });

    device.on('disconnect', function() {
        console.log('we got disconnected! :( '); 
        io.emit('deviceDisconnection');    
    });

Device here is a Bluetooth connected device. And, client side, I have a AngularJS application with the following event subscription declared in the controller of the application:

var appFront = angular.module(appFront , [])
.controller('mainController', ['$scope', '$http', function($scope,$http) {    
var socket = io();  
    socket.on('deviceDisconnection', function(){
      $scope.connected = 'TRUE';
    });
}]);

And sure in the view, I have the following binding:

<div class="row">
  <p>{{connected}}</p>
</div>

The issue is that the change is not really "real time". I mean, the connected value is probably changed in the scope but there is a need to do an action on the page (button clic) to make the view update with the right value. If I'm not doing anything on the page the value is not refreshed.

I probably forgot something.. But I have no clue about what..

Community · Accepted Answer · 2017-05-23 12:08:52Z

3

Socket.io events are external to AngularJS so you need to warn AngularJS that a change has just happened:

var appFront = angular.module(appFront , [])
.controller('mainController', ['$scope', '$http', function($scope,$http) {    
var socket = io();  
    socket.on('deviceDisconnection', function(){
      $scope.$applyAsync(function () {
         $scope.connected = 'TRUE';
      });
    });
}]);

Now this could be quite cumbersome, so you could create a factory to handle that for you

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

You can check more info about that code snippet in here, credits go to the author Brian Ford.

EDIT

As maurycy said it, since Angular 1.3 is better to use $applyAsync, and since the snippet above was written in 2012 it's a bit outdated, so a better version would be something like that

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

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Mar 18, 2016 at 15:43

Fabio Antunes

22.9k17 gold badges83 silver badges96 bronze badges

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

2 Comments

maurycy Over a year ago

My bad, missed it. Good stuff :) It's the best solution frankly speaking, wrapping socket.io as angular service makes it waaaaay easier

Fabio Antunes Over a year ago

@maurycy added even more visible credits to the author and a version with your advice of using $applyAsync

PrimosK · Accepted Answer · 2016-03-18 15:40:21Z

3

Angular isn't aware of changes outside of it's context. To fix that, you should use $apply like this:

    var appFront = angular.module(appFront , []).controller('mainController', ['$scope', '$http', function($scope,$http) {    
        var socket = io();  

        socket.on('deviceDisconnection', function(){
            $scope.$apply(function () {
                $scope.connected = 'TRUE';
            });

        });

    }]);

$scope.$apply() will execute a function passed as a parameter and then call $scope.$digest() to update any bindings or watchers.

answered Mar 18, 2016 at 15:40

PrimosK

13.9k10 gold badges62 silver badges81 bronze badges

1 Comment

maurycy Over a year ago

from angular 1.3 use $scope.$applyAsync which is better for this purpose

Varkal · Accepted Answer · 2016-03-18 15:40:04Z

-1

Because the socket event is outside AngularJS, you need to digest the scope :

socket.on('deviceDisconnection', function(){
      $scope.connected = 'TRUE';
      $scope.$digest();
});

You can read this interesting article to really understand why this is needed

answered Mar 18, 2016 at 15:40

Varkal

1,4082 gold badges17 silver badges33 bronze badges

3 Comments

maurycy Over a year ago

Don't put $scope.$digest() in your code, if application grows and the $digest will be fired more often it will throw JS error $digest in progres use either $scope.$apply or in newer version of angularjs $scope.$applyAsync

maurycy Over a year ago

That's why before angular 1.3 people tricket it with $timeout without specifying the time, from angular 1.3 there is the applyAsync designed for that

Varkal Over a year ago

OK. I didn't know applyAsync.

Collectives™ on Stack Overflow

AngularJS does not refresh view with socket.io

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related