Why do my socket.on calls multiply when I return my controller

Question

I used the factory socket described here brian ford here http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

here is the factory myApp.factory ('socket', function ($ rootScope) {

var socket = io.connect('url'); 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); } }); }) } }; }); 

I have a socket.emit function in my controller initialization function, and whenever I enter this controller again from another page, the socket.on receive function performs +1 times. This happens until I manually refresh the page and then reset to 1. I cannot explicitly store my socket in the session. So that can cause socket.on socket calls several times.

Here is my socket.emt in my controller, this is always done once.

 $scope.init = funciton (){ ... socket.emit('getSignedSlidesFromUrl', $scope.slideLocation); } 

Here is my socket.on that will get 'getSignedSlidesFromUrl'

 socket.on('signedUrls', function (signedSlides){ console.log('signedUrls socket hit'); $scope.slides = signedSlides; console.log($scope.slides[0]); console.log($scope.display); }); 

Here is an example of my console log after re-entering the controller

going to release getSignedSlidesFromUrl from init controllers.js: 71

 display after called $scope.first slide is0 controllers.js:574 flash object is controllers.js:537 signedUrls socket hit controllers.js:816 0 controllers.js:823 signedUrls socket hit controllers.js:816 0 controllers.js:823 

If I log into the controller again, my log will change to

 signedUrls socket hit controllers.js:816 0 controllers.js:823 signedUrls socket hit controllers.js:816 0 controllers.js:823 signedUrls socket hit controllers.js:816 0 controllers.js:823 

Answer 1

You must add removeAllListeners to your factory (see below) and have the following code on each of your controllers:

 $scope.$on('$destroy', function (event) { socket.removeAllListeners(); }); 

Updated factory socket:

  var socket = io.connect('url'); 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); } }); }) }, removeAllListeners: function (eventName, callback) { socket.removeAllListeners(eventName, function() { var args = arguments; $rootScope.$apply(function () { callback.apply(socket, args); }); }); } }; }); 

Answer 2

I tried the @michaeljoser solution, but this did not work for me.

Then I found another solution and worked

 var socket = io.connect('url'); 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); } }); }) }, getSocket: function(){ return socket; } }; }); 

And in the controller I called

 $scope.$on('$destroy', function (event) { socket.getSocket().removeAllListeners(); });