Show socket status in the UI. Absolutely no styling yet.

res/app/components/stf/socket/socket-service.js

@@ -1,6 +1,6 @@
 var io = require('socket.io')
 
-module.exports = function SocketFactory() {
+module.exports = function SocketFactory($rootScope) {
   var socket = io.connect()
 
   socket.scoped = function($scope) {
@@ -24,5 +24,53 @@ module.exports = function SocketFactory() {
     }
   }
 
+  socket.on('connect', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'connect'
+    })
+  })
+
+  socket.on('connecting', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'connecting'
+    })
+  })
+
+  socket.on('disconnect', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'disconnect'
+    })
+  })
+
+  socket.on('connect_failed', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'connect_failed'
+    })
+  })
+
+  socket.on('error', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'error'
+    })
+  })
+
+  socket.on('reconnect_failed', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'reconnect_failed'
+    })
+  })
+
+  socket.on('reconnect', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'reconnect'
+    })
+  })
+
+  socket.on('reconnecting', function() {
+    $rootScope.$apply(function() {
+      socket.state = 'reconnecting'
+    })
+  })
+
   return socket
 }