jam-cloud/web/app/assets/javascripts/JamServer.js

// The wrapper around the web-socket connection to the server
// manages the connection, heartbeats, and reconnect logic.
// presents itself as a dialog, or in-situ banner (_jamServer.html.haml)
(function (context, $) {

  "use strict";

  context.JK = context.JK || {};

  var logger = context.JK.logger;
  var msg_factory = context.JK.MessageFactory;
  // Let socket.io know where WebSocketMain.swf is
  context.WEB_SOCKET_SWF_LOCATION = "assets/flash/WebSocketMain.swf";

  context.JK.JamServer = function (app) {

    // heartbeat
    var heartbeatInterval = null;
    var heartbeatMS = null;
    var heartbeatMissedMS = 10000; // if 10 seconds go by and we haven't seen a heartbeat ack, get upset
    var lastHeartbeatSentTime = null;
    var lastHeartbeatAckTime = null;
    var lastHeartbeatFound = false;
    var heartbeatAckCheckInterval = null;
    var notificationLastSeenAt = undefined;
    var notificationLastSeen = undefined;

    // reconnection logic
    var connectDeferred = null;
    var freezeInteraction = false;
    var countdownInterval = null;
    var reconnectAttemptLookup = [2, 2, 2, 4, 8, 15, 30];
    var reconnectAttempt = 0;
    var reconnectingWaitPeriodStart = null;
    var reconnectDueTime = null;
    var connectTimeout = null;

    // elements
    var $inSituBanner = null;
    var $inSituBannerHolder = null;
    var $messageContents = null;
    var $dialog = null;
    var $templateServerConnection = null;
    var $templateDisconnected = null;
    var $currentDisplay = null;

    var server = {};
    server.socket = {};
    server.signedIn = false;
    server.clientID = "";
    server.publicIP = "";
    server.dispatchTable = {};
    server.socketClosedListeners = [];
    server.connected = false;


    // if activeElementVotes is null, then we are assuming this is the initial connect sequence
    function initiateReconnect(activeElementVotes, in_error) {
      var initialConnect = !!activeElementVotes;

      freezeInteraction = activeElementVotes && ((activeElementVotes.dialog && activeElementVotes.dialog.freezeInteraction === true) || (activeElementVotes.screen && activeElementVotes.screen.freezeInteraction === true));

      if (!initialConnect) {
        context.JK.CurrentSessionModel.onWebsocketDisconnected(in_error);
      }

      if (in_error) {
        reconnectAttempt = 0;
        $currentDisplay = renderDisconnected();
        beginReconnectPeriod();
      }
    }

    // handles logic if the websocket connection closes, and if it was in error then also prompt for    reconnect
    function closedCleanup(in_error) {

      // stop future heartbeats
      if (heartbeatInterval != null) {
        clearInterval(heartbeatInterval);
        heartbeatInterval = null;
      }

      // stop checking for heartbeat acks
      if (heartbeatAckCheckInterval != null) {
        clearTimeout(heartbeatAckCheckInterval);
        heartbeatAckCheckInterval = null;
      }

      if (server.connected) {
        server.connected = false;
        if (app.clientUpdating) {
          // we don't want to do a 'cover the whole screen' dialog
          // because the client update is already showing.
          return;
        }

        server.reconnecting = true;

        var result = app.activeElementEvent('beforeDisconnect');

        initiateReconnect(result, in_error);

        app.activeElementEvent('afterDisconnect');

        // notify anyone listening that the socket closed
        var len = server.socketClosedListeners.length;
        for (var i = 0; i < len; i++) {
          try {
            server.socketClosedListeners[i](in_error);
          } catch (ex) {
            logger.warn('exception in callback for websocket closed event:' + ex);
          }
        }
      }
    }

    ////////////////////
    //// HEARTBEAT /////
    ////////////////////
    function _heartbeatAckCheck() {

      // if we've seen an ack to the latest heartbeat, don't bother with checking again
      // this makes us resilient to front-end hangs
      if (lastHeartbeatFound) {
        return;
      }

      // check if the server is still sending heartbeat acks back down
      // this logic equates to 'if we have not received a heartbeat within heartbeatMissedMS, then get upset
      if (new Date().getTime() - lastHeartbeatAckTime.getTime() > heartbeatMissedMS) {
        logger.error("no heartbeat ack received from server after ", heartbeatMissedMS, " seconds . giving up on socket connection");
        context.JK.JamServer.close(true);
      }
      else {
        lastHeartbeatFound = true;
      }
    }

    function _heartbeat() {
      if (app.heartbeatActive) {
        var message = context.JK.MessageFactory.heartbeat(notificationLastSeen, notificationLastSeenAt);
        notificationLastSeenAt = undefined;
        notificationLastSeen = undefined;
        // for debugging purposes, see if the last time we've sent a heartbeat is way off (500ms) of the target interval
        var now = new Date();

        if (lastHeartbeatSentTime) {
          var drift = new Date().getTime() - lastHeartbeatSentTime.getTime() - heartbeatMS;
          if (drift > 500) {
            logger.error("significant drift between heartbeats: " + drift + 'ms beyond target interval')
          }
        }
        lastHeartbeatSentTime = now;
        context.JK.JamServer.send(message);
        lastHeartbeatFound = false;
      }
    }

    function loggedIn(header, payload) {

      if (!connectTimeout) {
        clearTimeout(connectTimeout);
        connectTimeout = null;
      }

      app.clientId = payload.client_id;

      // tell the backend that we have logged in
      context.jamClient.OnLoggedIn(payload.user_id, payload.token);

      $.cookie('client_id', payload.client_id);

      heartbeatMS = payload.heartbeat_interval * 1000;
      logger.debug("jamkazam.js.loggedIn(): clientId now " + app.clientId + "; Setting up heartbeat every " + heartbeatMS + " MS");
      heartbeatInterval = context.setInterval(_heartbeat, heartbeatMS);
      heartbeatAckCheckInterval = context.setInterval(_heartbeatAckCheck, 1000);
      lastHeartbeatAckTime = new Date(new Date().getTime() + heartbeatMS); // add a little forgiveness to server for initial heartbeat

      connectDeferred.resolve();
      app.activeElementEvent('afterConnect', payload);

    }

    function heartbeatAck(header, payload) {
      lastHeartbeatAckTime = new Date();

      context.JK.CurrentSessionModel.trackChanges(header, payload);
    }

    function registerLoginAck() {
      logger.debug("register for loggedIn to set clientId");
      context.JK.JamServer.registerMessageCallback(context.JK.MessageType.LOGIN_ACK, loggedIn);
    }

    function registerHeartbeatAck() {
      logger.debug("register for heartbeatAck");
      context.JK.JamServer.registerMessageCallback(context.JK.MessageType.HEARTBEAT_ACK, heartbeatAck);
    }

    function registerSocketClosed() {
      logger.debug("register for socket closed");
      context.JK.JamServer.registerOnSocketClosed(socketClosed);
    }


    /**
     * Called whenever the websocket closes; this gives us a chance to cleanup things that should be stopped/cleared
     * @param in_error did the socket close abnormally?
     */
    function socketClosed(in_error) {

      // tell the backend that we have logged out
      context.jamClient.OnLoggedOut();

    }

    ///////////////////
    /// RECONNECT /////
    ///////////////////
    function internetUp() {
      var start = new Date().getTime();
      server.connect()
        .done(function () {
          guardAgainstRapidTransition(start, performReconnect);
        })
        .fail(function () {
          guardAgainstRapidTransition(start, closedOnReconnectAttempt);
        });
    }

    // websocket couldn't connect.  let's try again soon
    function closedOnReconnectAttempt() {
      failedReconnect();
    }

    function performReconnect() {

      if ($currentDisplay.is('.no-websocket-connection')) {
        $currentDisplay.hide();

        // TODO: tell certain elements that we've reconnected
      }
      else {
        context.JK.CurrentSessionModel.leaveCurrentSession()
          .always(function () {
            window.location.reload();
          });
      }
      server.reconnecting = false;
    }

    function buildOptions() {
      return {};
    }

    function renderDisconnected() {

      var content = null;
      if (freezeInteraction) {
        var template = $templateDisconnected.html();
        var templateHtml = $(context.JK.fillTemplate(template, buildOptions()));
        templateHtml.find('.reconnect-countdown').html(formatDelaySecs(reconnectDelaySecs()));
        content = context.JK.Banner.show({
          html: templateHtml,
          type: 'reconnect'
        });
      }
      else {
        var $inSituContent = $(context._.template($templateServerConnection.html(), buildOptions(), { variable: 'data' }));
        $inSituContent.find('.reconnect-countdown').html(formatDelaySecs(reconnectDelaySecs()));
        $messageContents.empty();
        $messageContents.append($inSituContent);
        $inSituBannerHolder.show();
        content = $inSituBannerHolder;
      }

      return content;
    }

    function formatDelaySecs(secs) {
      return $('<span class="countdown-seconds"><span class="countdown">' + secs + '</span> ' + (secs == 1 ? ' second.<span style="visibility:hidden">s</span>' : 'seconds.') + '</span>');
    }

    function setCountdown($parent) {
      $parent.find('.reconnect-countdown').html(formatDelaySecs(reconnectDelaySecs()));
    }

    function renderCouldNotReconnect() {
      return renderDisconnected();
    }

    function renderReconnecting() {
      $currentDisplay.find('.reconnect-progress-msg').text('Attempting to reconnect...')

      if ($currentDisplay.is('.no-websocket-connection')) {
        $currentDisplay.find('.disconnected-reconnect').removeClass('reconnect-enabled').addClass('reconnect-disabled');
      }
      else {
        $currentDisplay.find('.disconnected-reconnect').removeClass('button-orange').addClass('button-grey');
      }
    }

    function failedReconnect() {
      reconnectAttempt += 1;
      $currentDisplay = renderCouldNotReconnect();
      beginReconnectPeriod();
    }

    function guardAgainstRapidTransition(start, nextStep) {
      var now = new Date().getTime();

      if ((now - start) < 1500) {
        setTimeout(function () {
          nextStep();
        }, 1500 - (now - start))
      }
      else {
        nextStep();
      }
    }

    function attemptReconnect() {

      var start = new Date().getTime();

      renderReconnecting();

      rest.serverHealthCheck()
        .done(function () {
          guardAgainstRapidTransition(start, internetUp);
        })
        .fail(function (xhr, textStatus, errorThrown) {

          if (xhr && xhr.status >= 100) {
            // we could connect to the server, and it's alive
            guardAgainstRapidTransition(start, internetUp);
          }
          else {
            guardAgainstRapidTransition(start, failedReconnect);
          }
        });

      return false;
    }

    function clearReconnectTimers() {
      if (countdownInterval) {
        clearInterval(countdownInterval);
        countdownInterval = null;
      }
    }

    function beginReconnectPeriod() {
      // allow user to force reconnect
      $currentDisplay.find('a.disconnected-reconnect').unbind('click').click(function () {
        if ($(this).is('.button-orange') || $(this).is('.reconnect-enabled')) {
          clearReconnectTimers();
          attemptReconnect();
        }
        return false;
      });

      reconnectingWaitPeriodStart = new Date().getTime();
      reconnectDueTime = reconnectingWaitPeriodStart + reconnectDelaySecs() * 1000;

      // update count down timer periodically
      countdownInterval = setInterval(function () {
        var now = new Date().getTime();
        if (now > reconnectDueTime) {
          clearReconnectTimers();
          attemptReconnect();
        }
        else {
          var secondsUntilReconnect = Math.ceil((reconnectDueTime - now) / 1000);
          $currentDisplay.find('.reconnect-countdown').html(formatDelaySecs(secondsUntilReconnect));
        }
      }, 333);
    }

    function reconnectDelaySecs() {
      if (reconnectAttempt > reconnectAttemptLookup.length - 1) {
        return reconnectAttemptLookup[reconnectAttemptLookup.length - 1];
      }
      else {
        return reconnectAttemptLookup[reconnectAttempt];
      }
    }


    server.registerOnSocketClosed = function (callback) {
      server.socketClosedListeners.push(callback);
    }

    server.registerMessageCallback = function (messageType, callback) {
      if (server.dispatchTable[messageType] === undefined) {
        server.dispatchTable[messageType] = [];
      }

      server.dispatchTable[messageType].push(callback);
    };

    server.unregisterMessageCallback = function (messageType, callback) {
      if (server.dispatchTable[messageType] !== undefined) {
        for (var i = server.dispatchTable[messageType].length; i--;) {
          if (server.dispatchTable[messageType][i] === callback) {
            server.dispatchTable[messageType].splice(i, 1);
            break;
          }
        }

        if (server.dispatchTable[messageType].length === 0) {
          delete server.dispatchTable[messageType];
        }
      }
    };

    server.connect = function () {
      connectDeferred = new $.Deferred();
      logger.log("server.connect");
      var uri = context.JK.websocket_gateway_uri;  // Set in index.html.erb.
      //var uri = context.gon.websocket_gateway_uri; // Leaving here for now, as we're looking for a better solution.

      server.socket = new context.WebSocket(uri);
      server.socket.onopen = server.onOpen;
      server.socket.onmessage = server.onMessage;
      server.socket.onclose = server.onClose;

      connectTimeout = setTimeout(function () {
        connectTimeout = null;
        if (connectDeferred.state() === 'pending') {
          server.close(true);
          connectDeferred.reject();
        }
      }, 4000);

      return connectDeferred;
    };

    server.close = function (in_error) {
      logger.log("closing websocket");

      server.socket.close();

      closedCleanup(in_error);
    }

    server.rememberLogin = function () {
      var token, loginMessage;
      token = $.cookie("remember_token");
      var clientType = context.jamClient.IsNativeClient() ? 'client' : 'browser';
      loginMessage = msg_factory.login_with_token(token, null, clientType);
      server.send(loginMessage);
    };

    server.onOpen = function () {
      logger.log("server.onOpen");
      server.rememberLogin();
    };

    server.onMessage = function (e) {
      var message = JSON.parse(e.data),
        messageType = message.type.toLowerCase(),
        payload = message[messageType],
        callbacks = server.dispatchTable[message.type];

      if (message.type != context.JK.MessageType.HEARTBEAT_ACK && message.type != context.JK.MessageType.PEER_MESSAGE) {
        logger.log("server.onMessage:" + messageType + " payload:" + JSON.stringify(payload));
      }

      if (callbacks !== undefined) {
        var len = callbacks.length;
        for (var i = 0; i < len; i++) {
          try {
            callbacks[i](message, payload);
          } catch (ex) {
            logger.warn('exception in callback for websocket message:' + ex);
            throw ex;
          }
        }
      }
      else {
        logger.log("Unexpected message type %s.", message.type);
      }
    };

    server.onClose = function () {
      logger.log("Socket to server closed.");

      if (connectDeferred.state() === "pending") {
        connectDeferred.reject();
      }

      closedCleanup(true);
    };

    server.send = function (message) {

      var jsMessage = JSON.stringify(message);

      if (message.type != context.JK.MessageType.HEARTBEAT && message.type != context.JK.MessageType.PEER_MESSAGE) {
        logger.log("server.send(" + jsMessage + ")");
      }
      if (server !== undefined && server.socket !== undefined && server.socket.send !== undefined) {
        server.socket.send(jsMessage);
      } else {
        logger.log("Dropped message because server connection is closed.");
      }
    };

    server.loginSession = function (sessionId) {
      var loginMessage;

      if (!server.signedIn) {
        logger.log("Not signed in!");
        // TODO: surface the error
        return;
      }

      loginMessage = msg_factory.login_jam_session(sessionId);
      server.send(loginMessage);
    };

    /** with the advent of the reliable UDP channel, this is no longer how messages are sent from client-to-clent
     * however, the mechanism still exists and is useful in test contexts; and maybe in the future
     * @param receiver_id  client ID of message to send
     * @param message the actual message
     */
    server.sendP2PMessage = function (receiver_id, message) {
      //logger.log("P2P message from [" + server.clientID + "] to [" + receiver_id + "]: " + message);
      //console.time('sendP2PMessage');
      var outgoing_msg = msg_factory.client_p2p_message(server.clientID, receiver_id, message);
      server.send(outgoing_msg);
      //console.timeEnd('sendP2PMessage');
    };

    server.updateNotificationSeen = function (notificationId, notificationCreatedAt) {
      var time = new Date(notificationCreatedAt);

      if (!notificationCreatedAt) {
        throw 'invalid value passed to updateNotificationSeen'
      }

      if (!notificationLastSeenAt) {
        notificationLastSeenAt = notificationCreatedAt;
        notificationLastSeen = notificationId;
        logger.debug("updated notificationLastSeenAt with: " + notificationCreatedAt);
      }
      else if (time.getTime() > new Date(notificationLastSeenAt).getTime()) {
        notificationLastSeenAt = notificationCreatedAt;
        notificationLastSeen = notificationId;
        logger.debug("updated notificationLastSeenAt with: " + notificationCreatedAt);
      }
      else {
        logger.debug("ignored notificationLastSeenAt for: " + notificationCreatedAt);
      }
    }

    // Message callbacks
    server.registerMessageCallback(context.JK.MessageType.LOGIN_ACK, function (header, payload) {
      server.signedIn = true;
      logger.debug("Handling LOGIN_ACK. Updating client id to " + payload.client_id);
      server.clientID = payload.client_id;
      server.publicIP = payload.public_ip;
      server.connected = true;

      if (context.jamClient !== undefined) {
        logger.debug("... (handling LOGIN_ACK) Updating backend client, connected to true and clientID to " +
          payload.client_id);
        context.jamClient.connected = true;
        context.jamClient.clientID = server.clientID;
      }
    });

    server.registerMessageCallback(context.JK.MessageType.PEER_MESSAGE, function (header, payload) {
      if (context.jamClient !== undefined) {
        context.jamClient.P2PMessageReceived(header.from, payload.message);
      }
    });

    context.JK.JamServer = server;

    // Callbacks from jamClient
    if (context.jamClient !== undefined) {
      context.jamClient.SendP2PMessage.connect(server.sendP2PMessage);
    }

    function initialize() {
      registerLoginAck();
      registerHeartbeatAck();
      registerSocketClosed();

      $inSituBanner = $('.server-connection');
      $inSituBannerHolder = $('.no-websocket-connection');
      $messageContents = $inSituBannerHolder.find('.message-contents');
      $dialog = $('#banner');
      $templateServerConnection = $('#template-server-connection');
      $templateDisconnected = $('#template-disconnected');

      if ($inSituBanner.length != 1) {
        throw "found wrong number of .server-connection: " + $inSituBanner.length;
      }
      if ($inSituBannerHolder.length != 1) {
        throw "found wrong number of .no-websocket-connection: " + $inSituBannerHolder.length;
      }
      if ($messageContents.length != 1) {
        throw "found wrong number of .message-contents: " + $messageContents.length;
      }
      if ($dialog.length != 1) {
        throw "found wrong number of #banner: " + $dialog.length;
      }
      if ($templateServerConnection.length != 1) {
        throw "found wrong number of #template-server-connection: " + $templateServerConnection.length;
      }
      if ($templateDisconnected.length != 1) {
        throw "found wrong number of #template-disconnected: " + $templateDisconnected.length;
      }
    }

    this.initialize = initialize;
    this.initiateReconnect = initiateReconnect;

    return this;
  }
})(window, jQuery);