closes #34: WebSocket to communicate with clients

angular_app/index.html

@@ -11,6 +11,7 @@
         <script src="/static/js/angular-file-upload.min.js"></script> 
         <script src="/static/js/ui-bootstrap-tpls-0.12.1.js"></script>
         <script src="/static/js/angular-ui-router.min.js"></script>
+        <script src="/static/js/angular-websocket.js"></script>
         <script src="/static/js/angular-translate.js"></script>
         <script src="/static/js/eventman.js"></script>
         <script src="/js/app.js"></script>

angular_app/js/app.js

@@ -22,7 +22,8 @@ var eventManApp = angular.module('eventManApp', [
     'ui.bootstrap',
     'ui.router',
     'pascalprecht.translate',
-    'angularFileUpload'
+    'angularFileUpload',
+    'angular-websocket'
 ]);
 
 

angular_app/js/controllers.js

@@ -53,8 +53,8 @@ eventManControllers.controller('EventsListCtrl', ['$scope', 'Event',
 );
 
 
-eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', 'Person', '$stateParams', 'Setting', '$log',
-    function ($scope, Event, Person, $stateParams, Setting, $log) {
+eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', 'Person', 'EventUpdates', '$stateParams', 'Setting', '$log',
+    function ($scope, Event, Person, EventUpdates, $stateParams, Setting, $log) {
         $scope.personsOrderProp = 'name';
         $scope.eventsOrderProp = '-begin-date';
         $scope.countAttendees = 0;
@@ -68,8 +68,21 @@ eventManControllers.controller('EventDetailsCtrl', ['$scope', 'Event', 'Person',
                         return $scope.event.persons;
                     }, function(prev, old) {
                         $scope.calcAttendees();
-                    });
+                    }
+                );
             });
+
+            // Handle WebSocket connection used to update the list of persons.
+            $scope.EventUpdates = EventUpdates;
+            $scope.$watchCollection(function() {
+                    return $scope.EventUpdates.data;
+                }, function(prev, old) {
+                    if (!($scope.EventUpdates.data && $scope.EventUpdates.data.persons)) {
+                        return;
+                    }
+                    $scope.event.persons = $scope.EventUpdates.data.persons;
+                }
+            );
             $scope.allPersons = Person.all();
         }
 

angular_app/js/services.js

@@ -133,3 +133,25 @@ eventManServices.factory('Setting', ['$resource',
     }]
 );
 
+
+/* WebSocket collection used to update the list of persons of an Event. */
+eventManApp.factory('EventUpdates', ['$websocket', '$location', '$log',
+    function($websocket, $location, $log) {
+        var dataStream = $websocket('ws://' + $location.host() + ':' + $location.port() +
+            '/ws/' + $location.path() + '/updates');
+
+        var data = {};
+
+        dataStream.onMessage(function(message) {
+            $log.debug('EventUpdates message received');
+            data.persons = angular.fromJson(message.data);
+        });
+
+        var methods = {
+            data: data,
+        };
+
+        return methods;
+    }]
+);
+