update socket api again, add unsync method for cleanup

Author: DaftMonk

app/templates/client/app/main/main.controller(coffee).coffee

@@ -1,9 +1,11 @@
 'use strict'
 
 angular.module('<%= scriptAppName %>').controller 'MainCtrl', ($scope, $http<% if(filters.socketio) { %>, socket<% } %>) ->
+  $scope.awesomeThings = []
+
   $http.get('/api/things').success (awesomeThings) ->
     $scope.awesomeThings = awesomeThings
-    <% if(filters.socketio) { %>socket.syncArray $scope.awesomeThings, 'thing'<% } %>
+    <% if(filters.socketio) { %>socket.syncUpdates 'thing', $scope.awesomeThings<% } %>
 <% if(filters.mongoose) { %>
   $scope.addThing = ->
     return if $scope.newThing is ''
@@ -13,4 +15,7 @@ angular.module('<%= scriptAppName %>').controller 'MainCtrl', ($scope, $http<% i
     $scope.newThing = ''
 
   $scope.deleteThing = (thing) ->
-    $http.delete '/api/things/' + thing._id<% } %>
+    $http.delete '/api/things/' + thing._id<% } %><% if(filters.socketio) { %>
+
+  $scope.$on '$destroy', ->
+    socket.unsyncUpdates 'thing'<% } %>

app/templates/client/app/main/main.controller(js).js

@@ -2,9 +2,11 @@
 
 angular.module('<%= scriptAppName %>')
   .controller('MainCtrl', function ($scope, $http<% if(filters.socketio) { %>, socket<% } %>) {
+    $scope.awesomeThings = [];
+
     $http.get('/api/things').success(function(awesomeThings) {
       $scope.awesomeThings = awesomeThings;<% if(filters.socketio) { %>
-      socket.syncArray($scope.awesomeThings, 'thing');<% } %>
+      socket.syncUpdates('thing', $scope.awesomeThings);<% } %>
     });
 <% if(filters.mongoose) { %>
     $scope.addThing = function() {
@@ -17,5 +19,9 @@ angular.module('<%= scriptAppName %>')
 
     $scope.deleteThing = function(thing) {
       $http.delete('/api/things/' + thing._id);
-    };<% } %>
+    };<% } %><% if(filters.socketio) { %>
+
+    $scope.$on('$destroy', function () {
+      socket.unsyncUpdates('thing');
+    });<% } %>
   });

app/templates/client/components/socket(socketio)/socket.mock(coffee).coffee

@@ -10,4 +10,5 @@ angular.module('socketMock', []).factory 'socket', ->
 
     receive: ->
 
-  syncArray: ->
+  syncUpdates: ->
+  unsyncUpdates: ->

app/templates/client/components/socket(socketio)/socket.mock.js

@@ -10,6 +10,7 @@ angular.module('socketMock', [])
         receive: function() {}
       },
 
-      syncArray: function() {}
+      syncUpdates: function() {},
+      unsyncUpdates: function() {}
     };
   });

app/templates/client/components/socket(socketio)/socket.service(coffee).coffee

@@ -10,33 +10,34 @@ angular.module('<%= scriptAppName %>').factory 'socket', (socketFactory) ->
     'force new connection': true
     'max reconnection attempts': Infinity
     'reconnection limit': 10 * 1000
+    # Send auth token on connection
+    # 'query': 'token=' + Auth.getToken()
   )
 
-  # Send auth token on connection
-  # 'query': 'token=' + Auth.getToken()
   retryTimer = setInterval(->
     ioSocket.connect()  if not ioSocket.socket.connected and not ioSocket.socket.connecting and not ioSocket.socket.reconnecting
   , retryInterval)
   socket = socketFactory(ioSocket: ioSocket)
+
   socket: socket
 
   ###
-  Register listeners to sync an array with a database collection through socket.io
+  Register listeners to sync an array with updates on a model
 
-  Takes the array we want to sync, the model namespace that socket updates are sent from,
+  Takes the array we want to sync, the model name that socket updates are sent from,
   and an optional callback function after new items are updated.
 
+  @param {String} modelName
   @param {Array} array
-  @param {String} namespace
   @param {Function} cb
   ###
-  syncArray: (array, namespace, cb) ->
+  syncUpdates: (modelName, array, cb) ->
     cb = cb or angular.noop
 
     ###
     Syncs item creation/updates on 'model:save'
     ###
-    socket.on namespace + ":save", (newItem) ->
+    socket.on modelName + ":save", (newItem) ->
       oldItem = _.find(array,
         _id: newItem._id
       )
@@ -50,12 +51,20 @@ angular.module('<%= scriptAppName %>').factory 'socket', (socketFactory) ->
         array.push newItem
       cb array
 
-
     ###
     Syncs removed items on 'model:remove'
     ###
-    socket.on namespace + ":remove", (newItem) ->
+    socket.on modelName + ":remove", (newItem) ->
       _.remove array,
         _id: newItem._id
 
-      cb array
+      cb array
+
+  ###
+  Removes listeners for a models updates on the socket
+
+  @param modelName
+  ###
+  unsyncUpdates: (modelName) ->
+    socket.removeAllListeners modelName + ":save"
+    socket.removeAllListeners modelName + ":remove"

app/templates/client/components/socket(socketio)/socket.service.js

@@ -35,43 +35,53 @@ angular.module('<%= scriptAppName %>')
       socket: socket,
 
       /**
-       * Register listeners to sync an array with a database collection through socket.io
+       * Register listeners to sync an array with updates on a model
        *
-       * Takes the array we want to sync, the model namespace that socket updates are sent from,
+       * Takes the array we want to sync, the model name that socket updates are sent from,
        * and an optional callback function after new items are updated.
        *
+       * @param {String} modelName
        * @param {Array} array
-       * @param {String} namespace
        * @param {Function} cb
        */
-      syncArray: function(array, namespace, cb) {
+      syncUpdates: function (modelName, array, cb) {
         cb = cb || angular.noop;
 
         /**
          * Syncs item creation/updates on 'model:save'
          */
-        socket.on(namespace + ':save', function(newItem) {
-          var oldItem = _.find(array, { _id: newItem._id });
+        socket.on(modelName + ':save', function (newItem) {
+          var oldItem = _.find(array, {_id: newItem._id});
           var index = array.indexOf(oldItem);
 
           // replace oldItem if it exists
           // otherwise just add newItem to the collection
-          if(oldItem) {
+          if (oldItem) {
             array.splice(index, 1, newItem);
           } else {
             array.push(newItem);
           }
 
-          cb(array)
+          cb(array);
         });
 
         /**
          * Syncs removed items on 'model:remove'
          */
-        socket.on(namespace + ':remove', function(newItem) {
-          _.remove(array, { _id: newItem._id });
-          cb(array)
+        socket.on(modelName + ':remove', function (newItem) {
+          _.remove(array, {_id: newItem._id});
+          cb(array);
         });
+      },
+
+      /**
+       * Removes listeners for a models updates on the socket
+       *
+       * @param modelName
+       */
+      unsyncUpdates: function (modelName) {
+        socket.removeAllListeners(modelName + ':save');
+        socket.removeAllListeners(modelName + ':remove');
       }
     };
   });