stf-DeviceFarmer/res/app/components/stf/socket/socket-state/socket-state-directive.js

module.exports = function SocketStateDirectiveFactory(
  socket
, growl
, gettext
, $filter
, SocketDisconnectedService
, $window
) {
  return {
    restrict: 'EA',
    template: require('./socket-state.jade'),
    link: function (scope) {
      var hasFailedOnce = false

      function setState(state) {
        switch (state) {
        case 'connect':
          if (hasFailedOnce) {
            growl.success('<h4>WebSocket</h4>' + $filter('translate')(
              gettext('Connected successfully.')) +
            '<refresh-page></refresh-page>', {ttl: 2000})
          }
          break
        case 'disconnect':
          SocketDisconnectedService.open(
            gettext('Socket connection was lost'))
          break
        case 'connect_error':
        case 'error':
          SocketDisconnectedService.open(
            gettext('Error'))
          break
        case 'reconnect_failed':
          SocketDisconnectedService.open(
            gettext('Error while reconnecting'))
          break
        case 'reconnect':
          growl.success('<h4>WebSocket</h4>' + $filter('translate')(
            gettext('Reconnected successfully.')), {ttl: -1})
          break
        }

        scope.$apply(function () {
          scope.socketState = state
        })
      }

      var socketListeners = {
        'connect': function () {
          setState('connect')
        }
      , 'disconnect': function () {
          setState('disconnect')
          hasFailedOnce = true
        }
      , 'error': function () {
          setState('error')
          hasFailedOnce = true
        }
      , 'connect_error': function () {
          setState('connect_error')
          hasFailedOnce = true
        }
      , 'reconnect_error': function () {
          setState('reconnect_error')
          hasFailedOnce = true
        }
      , 'reconnect_failed': function () {
          setState('reconnect_failed')
          hasFailedOnce = true
        }
      , 'reconnect': function () {
          setState('reconnect')
          hasFailedOnce = true
        }
      }

      Object.keys(socketListeners).forEach(function(event) {
        socket.on(event, socketListeners[event])
      })

      function unloadListener() {
        // On at least Firefox, the socket connection will close
        // before the page unloads, causing the "socket disconnected"
        // message to display on every unload. To prevent that from
        // happening, let's unbind all the listeners when it's time.
        Object.keys(socketListeners).forEach(function(event) {
          socket.removeListener(event, socketListeners[event])
        })
      }

      $window.addEventListener('beforeunload', unloadListener, false)

      scope.$on('$destroy', function() {
        $window.removeEventListener('beforeunload', unloadListener, false)
      })
    }
  }
}