diff --git a/keyserver/src/socket/tunnelbroker-socket.js b/keyserver/src/socket/tunnelbroker-socket.js
index ea430b5a9..751e95d80 100644
--- a/keyserver/src/socket/tunnelbroker-socket.js
+++ b/keyserver/src/socket/tunnelbroker-socket.js
@@ -1,212 +1,217 @@
 // @flow
 
 import _debounce from 'lodash/debounce.js';
 import uuid from 'uuid';
 import WebSocket from 'ws';
 
 import { tunnelbrokerHeartbeatTimeout } from 'lib/shared/timeouts.js';
 import type { ClientMessageToDevice } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import type { MessageReceiveConfirmation } from 'lib/types/tunnelbroker/message-receive-confirmation-types.js';
 import type { MessageSentStatus } from 'lib/types/tunnelbroker/message-to-device-request-status-types.js';
 import type { MessageToDeviceRequest } from 'lib/types/tunnelbroker/message-to-device-request-types.js';
 import {
   type TunnelbrokerMessage,
   tunnelbrokerMessageTypes,
   tunnelbrokerMessageValidator,
 } from 'lib/types/tunnelbroker/messages.js';
 import {
   type RefreshKeyRequest,
   refreshKeysRequestValidator,
 } from 'lib/types/tunnelbroker/peer-to-peer-message-types.js';
 import type { ConnectionInitializationMessage } from 'lib/types/tunnelbroker/session-types.js';
 import type { Heartbeat } from 'lib/types/websocket/heartbeat-types.js';
 
 import { uploadNewOneTimeKeys } from '../utils/olm-utils.js';
 
 type PromiseCallbacks = {
   +resolve: () => void,
   +reject: (error: string) => void,
 };
 type Promises = { [clientMessageID: string]: PromiseCallbacks };
 
 class TunnelbrokerSocket {
   ws: WebSocket;
   connected: boolean = false;
   closed: boolean = false;
   promises: Promises = {};
   heartbeatTimeoutID: ?TimeoutID;
   oneTimeKeysPromise: ?Promise<void>;
 
-  constructor(socketURL: string, initMessage: ConnectionInitializationMessage) {
+  constructor(
+    socketURL: string,
+    initMessage: ConnectionInitializationMessage,
+    onClose: () => mixed,
+  ) {
     const socket = new WebSocket(socketURL);
 
     socket.on('open', () => {
       if (!this.closed) {
         socket.send(JSON.stringify(initMessage));
       }
     });
 
     socket.on('close', async () => {
       if (this.closed) {
         return;
       }
       this.closed = true;
       this.connected = false;
       this.stopHeartbeatTimeout();
       console.error('Connection to Tunnelbroker closed');
+      onClose();
     });
 
     socket.on('error', (error: Error) => {
       console.error('Tunnelbroker socket error:', error.message);
     });
 
     socket.on('message', this.onMessage);
 
     this.ws = socket;
   }
 
   onMessage: (event: ArrayBuffer) => Promise<void> = async (
     event: ArrayBuffer,
   ) => {
     let rawMessage;
     try {
       rawMessage = JSON.parse(event.toString());
     } catch (e) {
       console.error('error while parsing Tunnelbroker message:', e.message);
       return;
     }
 
     if (!tunnelbrokerMessageValidator.is(rawMessage)) {
       console.error('invalid TunnelbrokerMessage: ', rawMessage.toString());
       return;
     }
     const message: TunnelbrokerMessage = rawMessage;
 
     this.resetHeartbeatTimeout();
 
     if (
       message.type ===
       tunnelbrokerMessageTypes.CONNECTION_INITIALIZATION_RESPONSE
     ) {
       if (message.status.type === 'Success' && !this.connected) {
         this.connected = true;
         console.info('session with Tunnelbroker created');
       } else if (message.status.type === 'Success' && this.connected) {
         console.info(
           'received ConnectionInitializationResponse with status: Success for already connected socket',
         );
       } else {
         this.connected = false;
         console.error(
           'creating session with Tunnelbroker error:',
           message.status.data,
         );
       }
     } else if (message.type === tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE) {
       const confirmation: MessageReceiveConfirmation = {
         type: tunnelbrokerMessageTypes.MESSAGE_RECEIVE_CONFIRMATION,
         messageIDs: [message.messageID],
       };
       this.ws.send(JSON.stringify(confirmation));
 
       const { payload } = message;
       try {
         const messageToKeyserver = JSON.parse(payload);
         if (refreshKeysRequestValidator.is(messageToKeyserver)) {
           const request: RefreshKeyRequest = messageToKeyserver;
           this.debouncedRefreshOneTimeKeys(request.numberOfKeys);
         }
       } catch (e) {
         console.error(
           'error while processing message to keyserver:',
           e.message,
         );
       }
     } else if (
       message.type === tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE_REQUEST_STATUS
     ) {
       for (const status: MessageSentStatus of message.clientMessageIDs) {
         if (status.type === 'Success') {
           if (this.promises[status.data]) {
             this.promises[status.data].resolve();
             delete this.promises[status.data];
           } else {
             console.log(
               'received successful response for a non-existent request',
             );
           }
         } else if (status.type === 'Error') {
           if (this.promises[status.data.id]) {
             this.promises[status.data.id].reject(status.data.error);
             delete this.promises[status.data.id];
           } else {
             console.log('received error response for a non-existent request');
           }
         } else if (status.type === 'SerializationError') {
           console.error('SerializationError for message: ', status.data);
         } else if (status.type === 'InvalidRequest') {
           console.log('Tunnelbroker recorded InvalidRequest');
         }
       }
     } else if (message.type === tunnelbrokerMessageTypes.HEARTBEAT) {
       const heartbeat: Heartbeat = {
         type: tunnelbrokerMessageTypes.HEARTBEAT,
       };
       this.ws.send(JSON.stringify(heartbeat));
     }
   };
 
   refreshOneTimeKeys: (numberOfKeys: number) => void = numberOfKeys => {
     const oldOneTimeKeysPromise = this.oneTimeKeysPromise;
     this.oneTimeKeysPromise = (async () => {
       await oldOneTimeKeysPromise;
       await uploadNewOneTimeKeys(numberOfKeys);
     })();
   };
 
   debouncedRefreshOneTimeKeys: (numberOfKeys: number) => void = _debounce(
     this.refreshOneTimeKeys,
     100,
     { leading: true, trailing: true },
   );
 
   sendMessage: (message: ClientMessageToDevice) => Promise<void> = (
     message: ClientMessageToDevice,
   ) => {
     if (!this.connected) {
       throw new Error('Tunnelbroker not connected');
     }
     const clientMessageID = uuid.v4();
     const messageToDevice: MessageToDeviceRequest = {
       type: tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE_REQUEST,
       clientMessageID,
       deviceID: message.deviceID,
       payload: message.payload,
     };
 
     return new Promise((resolve, reject) => {
       this.promises[clientMessageID] = {
         resolve,
         reject,
       };
       this.ws.send(JSON.stringify(messageToDevice));
     });
   };
 
   stopHeartbeatTimeout() {
     if (this.heartbeatTimeoutID) {
       clearTimeout(this.heartbeatTimeoutID);
       this.heartbeatTimeoutID = null;
     }
   }
 
   resetHeartbeatTimeout() {
     this.stopHeartbeatTimeout();
     this.heartbeatTimeoutID = setTimeout(() => {
       this.ws.close();
       this.connected = false;
     }, tunnelbrokerHeartbeatTimeout);
   }
 }
 
 export default TunnelbrokerSocket;
diff --git a/keyserver/src/socket/tunnelbroker.js b/keyserver/src/socket/tunnelbroker.js
index 5e8d0dc9b..e0e15c59b 100644
--- a/keyserver/src/socket/tunnelbroker.js
+++ b/keyserver/src/socket/tunnelbroker.js
@@ -1,49 +1,57 @@
 // @flow
 
+import { clientTunnelbrokerSocketReconnectDelay } from 'lib/shared/timeouts.js';
 import type { ConnectionInitializationMessage } from 'lib/types/tunnelbroker/session-types.js';
 import { getCommConfig } from 'lib/utils/comm-config.js';
+import sleep from 'lib/utils/sleep.js';
 
 import TunnelbrokerSocket from './tunnelbroker-socket.js';
 import { type IdentityInfo } from '../user/identity.js';
 import { getContentSigningKey } from '../utils/olm-utils.js';
 
 type TBConnectionInfo = {
   +url: string,
 };
 
 async function getTBConnectionInfo(): Promise<TBConnectionInfo> {
   const tbConfig = await getCommConfig<TBConnectionInfo>({
     folder: 'facts',
     name: 'tunnelbroker',
   });
 
   if (tbConfig) {
     return tbConfig;
   }
 
   console.warn('Defaulting to local Tunnelbroker instance');
   return {
     url: 'wss://tunnelbroker.staging.commtechnologies.org:51001',
   };
 }
 
 async function createAndMaintainTunnelbrokerWebsocket(
   identityInfo: IdentityInfo,
 ) {
   const [deviceID, tbConnectionInfo] = await Promise.all([
     getContentSigningKey(),
     getTBConnectionInfo(),
   ]);
 
   const initMessage: ConnectionInitializationMessage = {
     type: 'ConnectionInitializationMessage',
     deviceID: deviceID,
     accessToken: identityInfo.accessToken,
     userID: identityInfo.userId,
     deviceType: 'keyserver',
   };
 
-  new TunnelbrokerSocket(tbConnectionInfo.url, initMessage);
+  const createNewTunnelbrokerSocket = () => {
+    new TunnelbrokerSocket(tbConnectionInfo.url, initMessage, async () => {
+      await sleep(clientTunnelbrokerSocketReconnectDelay);
+      createNewTunnelbrokerSocket();
+    });
+  };
+  createNewTunnelbrokerSocket();
 }
 
 export { createAndMaintainTunnelbrokerWebsocket };
diff --git a/lib/shared/timeouts.js b/lib/shared/timeouts.js
index 43370ea52..35440ef77 100644
--- a/lib/shared/timeouts.js
+++ b/lib/shared/timeouts.js
@@ -1,42 +1,50 @@
 // @flow
 
 // Sometimes the connection can just go "away", without the client knowing it.
 // To detect this happening, the client hits the server with a "ping" at
 // interval specified below when there hasn't been any other communication.
 export const pingFrequency = 3000; // in milliseconds
 
 // Time for request to get response after which we consider our connection
 // questionable. We won't close and reopen the socket yet, but we will visually
 // indicate to the user that their connection doesn't seem to be working.
 export const clientRequestVisualTimeout = 5000; // in milliseconds
 
 // Time for request to get response after which we assume our socket
 // is dead. It's possible this happened because of some weird shit on
 // the server side, so we try to close and reopen the socket in the
 // hopes that it will fix the problem. Of course, this is rather
 // unlikely, as the connectivity issue is likely on the client side.
 export const clientRequestSocketTimeout = 10000; // in milliseconds
 
 // Time after which CallSingleKeyserverEndpoint will timeout a request. When
 // using sockets this is preempted by the above timeout, so it really only
 // applies for HTTP requests.
 export const callSingleKeyserverEndpointTimeout = 10000; // in milliseconds
 
 // The server expects to get a request at least every three
 // seconds from the client. If server doesn't get a request
 // after time window specified below, it will close connection
 export const serverRequestSocketTimeout = 120000; // in milliseconds
 
 // Time server allows itself to respond to client message. If it
 // takes it longer to respond, it will timeout and send an error
 // response. This is better than letting the request timeout on the
 // client, since the client will assume network issues and close the socket.
 export const serverResponseTimeout = 5000; // in milliseconds
 
+// This controls how long the client waits before trying to reconnect a
+// disconnected keyserver socket.
+export const clientKeyserverSocketReconnectDelay = 2000;
+
 // Time after which the client consider the Tunnelbroker connection
 // as unhealthy and chooses to close the socket.
 export const tunnelbrokerHeartbeatTimeout = 9000; // in milliseconds
 
+// This controls how long the client waits before trying to reconnect a
+// disconnected Tunnelbroker socket.
+export const clientTunnelbrokerSocketReconnectDelay = 3000;
+
 // Time after which the client consider the Identity Search connection
 // as unhealthy and chooses to close the socket.
 export const identitySearchHeartbeatTimeout = 9000; // in milliseconds
diff --git a/lib/socket/socket.react.js b/lib/socket/socket.react.js
index e419635e1..ae8853bfb 100644
--- a/lib/socket/socket.react.js
+++ b/lib/socket/socket.react.js
@@ -1,792 +1,793 @@
 // @flow
 
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 
 import ActivityHandler from './activity-handler.react.js';
 import APIRequestHandler from './api-request-handler.react.js';
 import CalendarQueryHandler from './calendar-query-handler.react.js';
 import { InflightRequests } from './inflight-requests.js';
 import MessageHandler from './message-handler.react.js';
 import RequestResponseHandler from './request-response-handler.react.js';
 import UpdateHandler from './update-handler.react.js';
 import { updateActivityActionTypes } from '../actions/activity-actions.js';
 import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js';
 import {
   setNewSessionActionType,
   updateConnectionStatusActionType,
   setLateResponseActionType,
   setActiveSessionRecoveryActionType,
 } from '../keyserver-conn/keyserver-conn-types.js';
 import { unsupervisedBackgroundActionType } from '../reducers/lifecycle-state-reducer.js';
 import {
   pingFrequency,
   serverRequestSocketTimeout,
   clientRequestVisualTimeout,
   clientRequestSocketTimeout,
+  clientKeyserverSocketReconnectDelay,
 } from '../shared/timeouts.js';
 import {
   recoveryActionSources,
   type RecoveryActionSource,
 } from '../types/account-types.js';
 import type { CompressedData } from '../types/compression-types.js';
 import { type PlatformDetails } from '../types/device-types.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import { forcePolicyAcknowledgmentActionType } from '../types/policy-types.js';
 import type { Dispatch } from '../types/redux-types.js';
 import {
   serverRequestTypes,
   type ClientClientResponse,
   type ClientServerRequest,
 } from '../types/request-types.js';
 import {
   type SessionState,
   type SessionIdentification,
   type PreRequestUserState,
 } from '../types/session-types.js';
 import {
   clientSocketMessageTypes,
   type ClientClientSocketMessage,
   serverSocketMessageTypes,
   type ClientServerSocketMessage,
   stateSyncPayloadTypes,
   fullStateSyncActionType,
   incrementalStateSyncActionType,
   type ConnectionInfo,
   type ClientInitialClientSocketMessage,
   type ClientResponsesClientSocketMessage,
   type PingClientSocketMessage,
   type AckUpdatesClientSocketMessage,
   type APIRequestClientSocketMessage,
   type ClientSocketMessageWithoutID,
   type SocketListener,
   type ConnectionStatus,
   type CommTransportLayer,
   type ActivityUpdateResponseServerSocketMessage,
   type ClientStateSyncServerSocketMessage,
   type PongServerSocketMessage,
 } from '../types/socket-types.js';
 import { actionLogger } from '../utils/action-logger.js';
 import { getConfig } from '../utils/config.js';
 import { ServerError, SocketTimeout, SocketOffline } from '../utils/errors.js';
 import { promiseAll } from '../utils/promises.js';
 import type { DispatchActionPromise } from '../utils/redux-promise-utils.js';
 import sleep from '../utils/sleep.js';
 
 const remainingTimeAfterVisualTimeout =
   clientRequestSocketTimeout - clientRequestVisualTimeout;
 
 export type BaseSocketProps = {
   +keyserverID: string,
   +detectUnsupervisedBackgroundRef?: (
     detectUnsupervisedBackground: (alreadyClosed: boolean) => boolean,
   ) => void,
 };
 type Props = {
   ...BaseSocketProps,
   +active: boolean,
   +openSocket: () => CommTransportLayer,
   +getClientResponses: (
     activeServerRequests: $ReadOnlyArray<ClientServerRequest>,
   ) => Promise<$ReadOnlyArray<ClientClientResponse>>,
   +activeThread: ?string,
   +sessionStateFunc: () => SessionState,
   +sessionIdentification: SessionIdentification,
   +cookie: ?string,
   +connection: ConnectionInfo,
   +currentCalendarQuery: () => CalendarQuery,
   +frozen: boolean,
   +preRequestUserState: PreRequestUserState,
   +noDataAfterPolicyAcknowledgment?: boolean,
   +lastCommunicatedPlatformDetails: ?PlatformDetails,
   +decompressSocketMessage: CompressedData => string,
   +activeSessionRecovery: null | RecoveryActionSource,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +showSocketCrashLoopAlert?: () => mixed,
 };
 type State = {
   +inflightRequests: ?InflightRequests,
 };
 class Socket extends React.PureComponent<Props, State> {
   state: State = {
     inflightRequests: null,
   };
   socket: ?CommTransportLayer;
   nextClientMessageID: number = 0;
   listeners: Set<SocketListener> = new Set();
   pingTimeoutID: ?TimeoutID;
   messageLastReceived: ?number;
   reopenConnectionAfterClosing: boolean = false;
   initializedWithUserState: ?PreRequestUserState;
   failuresAfterPolicyAcknowledgment: number = 0;
 
   openSocket(newStatus: ConnectionStatus) {
     if (
       this.props.frozen ||
       !this.props.cookie ||
       !this.props.cookie.startsWith('user=')
     ) {
       return;
     }
     if (this.socket) {
       const { status } = this.props.connection;
       if (status === 'forcedDisconnecting') {
         this.reopenConnectionAfterClosing = true;
         return;
       } else if (status === 'disconnecting' && this.socket.readyState === 1) {
         this.markSocketInitialized();
         return;
       } else if (
         status === 'connected' ||
         status === 'connecting' ||
         status === 'reconnecting'
       ) {
         return;
       }
       if (this.socket.readyState < 2) {
         this.socket.close();
         console.log(`this.socket seems open, but Redux thinks it's ${status}`);
       }
     }
     this.props.dispatch({
       type: updateConnectionStatusActionType,
       payload: { status: newStatus, keyserverID: this.props.keyserverID },
     });
 
     const socket = this.props.openSocket();
     const openObject: { initializeMessageSent?: true } = {};
     socket.onopen = () => {
       if (this.socket === socket) {
         void this.initializeSocket();
         openObject.initializeMessageSent = true;
       }
     };
     socket.onmessage = this.receiveMessage;
     socket.onclose = () => {
       if (this.socket === socket) {
         this.onClose();
       }
     };
     this.socket = socket;
 
     void (async () => {
       await sleep(clientRequestVisualTimeout);
       if (this.socket !== socket || openObject.initializeMessageSent) {
         return;
       }
       this.setLateResponse(-1, true);
       await sleep(remainingTimeAfterVisualTimeout);
       if (this.socket !== socket || openObject.initializeMessageSent) {
         return;
       }
       this.finishClosingSocket();
     })();
 
     this.setState({
       inflightRequests: new InflightRequests({
         timeout: () => {
           if (this.socket === socket) {
             this.finishClosingSocket();
           }
         },
         setLateResponse: (messageID: number, isLate: boolean) => {
           if (this.socket === socket) {
             this.setLateResponse(messageID, isLate);
           }
         },
       }),
     });
   }
 
   markSocketInitialized() {
     this.props.dispatch({
       type: updateConnectionStatusActionType,
       payload: { status: 'connected', keyserverID: this.props.keyserverID },
     });
     this.resetPing();
   }
 
   closeSocket(
     // This param is a hack. When closing a socket there is a race between this
     // function and the one to propagate the activity update. We make sure that
     // the activity update wins the race by passing in this param.
     activityUpdatePending: boolean,
   ) {
     const { status } = this.props.connection;
     if (status === 'disconnected') {
       return;
     } else if (status === 'disconnecting' || status === 'forcedDisconnecting') {
       this.reopenConnectionAfterClosing = false;
       return;
     }
     this.stopPing();
     this.props.dispatch({
       type: updateConnectionStatusActionType,
       payload: { status: 'disconnecting', keyserverID: this.props.keyserverID },
     });
     if (!activityUpdatePending) {
       this.finishClosingSocket();
     }
   }
 
   forceCloseSocket() {
     this.stopPing();
     const { status } = this.props.connection;
     if (status !== 'forcedDisconnecting' && status !== 'disconnected') {
       this.props.dispatch({
         type: updateConnectionStatusActionType,
         payload: {
           status: 'forcedDisconnecting',
           keyserverID: this.props.keyserverID,
         },
       });
     }
     this.finishClosingSocket();
   }
 
   finishClosingSocket(receivedResponseTo?: ?number) {
     const { inflightRequests } = this.state;
     if (
       inflightRequests &&
       !inflightRequests.allRequestsResolvedExcept(receivedResponseTo)
     ) {
       return;
     }
     if (this.socket && this.socket.readyState < 2) {
       // If it's not closing already, close it
       this.socket.close();
     }
     this.socket = null;
     this.stopPing();
     this.setState({ inflightRequests: null });
     if (this.props.connection.status !== 'disconnected') {
       this.props.dispatch({
         type: updateConnectionStatusActionType,
         payload: {
           status: 'disconnected',
           keyserverID: this.props.keyserverID,
         },
       });
     }
     if (this.reopenConnectionAfterClosing) {
       this.reopenConnectionAfterClosing = false;
       if (this.props.active) {
         this.openSocket('connecting');
       }
     }
   }
 
   reconnect: $Call<typeof _throttle, () => void, number> = _throttle(
     () => this.openSocket('reconnecting'),
-    2000,
+    clientKeyserverSocketReconnectDelay,
   );
 
   componentDidMount() {
     if (this.props.detectUnsupervisedBackgroundRef) {
       this.props.detectUnsupervisedBackgroundRef(
         this.detectUnsupervisedBackground,
       );
     }
     if (this.props.active) {
       this.openSocket('connecting');
     }
   }
 
   componentWillUnmount() {
     this.closeSocket(false);
     this.reconnect.cancel();
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.active && !prevProps.active) {
       this.openSocket('connecting');
     } else if (!this.props.active && prevProps.active) {
       this.closeSocket(!!prevProps.activeThread);
     } else if (
       this.props.active &&
       prevProps.openSocket !== this.props.openSocket
     ) {
       // This case happens when the baseURL/urlPrefix is changed
       this.reopenConnectionAfterClosing = true;
       this.forceCloseSocket();
     } else if (
       this.props.active &&
       this.props.connection.status === 'disconnected' &&
       prevProps.connection.status !== 'disconnected' &&
       !this.props.activeSessionRecovery
     ) {
       this.reconnect();
     }
   }
 
   render(): React.Node {
     // It's important that APIRequestHandler get rendered first here. This is so
     // that it is registered with Redux first, so that its componentDidUpdate
     // processes before the other Handlers. This allows APIRequestHandler to
     // register itself with action-utils before other Handlers call
     // dispatchActionPromise in response to the componentDidUpdate triggered by
     // the same Redux change (state.connection.status).
     return (
       <React.Fragment>
         <APIRequestHandler
           inflightRequests={this.state.inflightRequests}
           sendMessage={this.sendMessageWithoutID}
           keyserverID={this.props.keyserverID}
         />
         <ActivityHandler
           activeThread={this.props.activeThread}
           frozen={this.props.frozen}
           keyserverID={this.props.keyserverID}
         />
         <RequestResponseHandler
           inflightRequests={this.state.inflightRequests}
           sendMessage={this.sendMessageWithoutID}
           addListener={this.addListener}
           removeListener={this.removeListener}
           getClientResponses={this.props.getClientResponses}
           currentCalendarQuery={this.props.currentCalendarQuery}
           keyserverID={this.props.keyserverID}
         />
         <UpdateHandler
           sendMessage={this.sendMessageWithoutID}
           addListener={this.addListener}
           removeListener={this.removeListener}
           keyserverID={this.props.keyserverID}
         />
         <MessageHandler
           addListener={this.addListener}
           removeListener={this.removeListener}
         />
         <CalendarQueryHandler
           currentCalendarQuery={this.props.currentCalendarQuery}
           frozen={this.props.frozen}
           keyserverID={this.props.keyserverID}
         />
       </React.Fragment>
     );
   }
 
   sendMessageWithoutID: (message: ClientSocketMessageWithoutID) => number =
     message => {
       const id = this.nextClientMessageID++;
       // These conditions all do the same thing and the runtime checks are only
       // necessary for Flow
       if (message.type === clientSocketMessageTypes.INITIAL) {
         this.sendMessage(
           ({ ...message, id }: ClientInitialClientSocketMessage),
         );
       } else if (message.type === clientSocketMessageTypes.RESPONSES) {
         this.sendMessage(
           ({ ...message, id }: ClientResponsesClientSocketMessage),
         );
       } else if (message.type === clientSocketMessageTypes.PING) {
         this.sendMessage(({ ...message, id }: PingClientSocketMessage));
       } else if (message.type === clientSocketMessageTypes.ACK_UPDATES) {
         this.sendMessage(({ ...message, id }: AckUpdatesClientSocketMessage));
       } else if (message.type === clientSocketMessageTypes.API_REQUEST) {
         this.sendMessage(({ ...message, id }: APIRequestClientSocketMessage));
       }
       return id;
     };
 
   sendMessage(message: ClientClientSocketMessage) {
     const socket = this.socket;
     invariant(socket, 'should be set');
     socket.send(JSON.stringify(message));
   }
 
   messageFromEvent(event: MessageEvent): ?ClientServerSocketMessage {
     if (typeof event.data !== 'string') {
       console.log('socket received a non-string message');
       return null;
     }
 
     let rawMessage;
     try {
       rawMessage = JSON.parse(event.data);
     } catch (e) {
       console.log(e);
       return null;
     }
 
     if (rawMessage.type !== serverSocketMessageTypes.COMPRESSED_MESSAGE) {
       return rawMessage;
     }
 
     const result = this.props.decompressSocketMessage(rawMessage.payload);
     try {
       return JSON.parse(result);
     } catch (e) {
       console.log(e);
       return null;
     }
   }
 
   receiveMessage: (event: MessageEvent) => Promise<void> = async event => {
     const message = this.messageFromEvent(event);
     if (!message) {
       return;
     }
     this.failuresAfterPolicyAcknowledgment = 0;
 
     const { inflightRequests } = this.state;
     if (!inflightRequests) {
       // inflightRequests can be falsey here if we receive a message after we've
       // begun shutting down the socket. It's possible for a React Native
       // WebSocket to deliver a message even after close() is called on it. In
       // this case the message is probably a PONG, which we can safely ignore.
       // If it's not a PONG, it has to be something server-initiated (like
       // UPDATES or MESSAGES), since InflightRequests.allRequestsResolvedExcept
       // will wait for all responses to client-initiated requests to be
       // delivered before closing a socket. UPDATES and MESSAGES are both
       // checkpointed on the client, so should be okay to just ignore here and
       // redownload them later, probably in an incremental STATE_SYNC.
       return;
     }
 
     // If we receive any message, that indicates that our connection is healthy,
     // so we can reset the ping timeout.
     this.resetPing();
 
     inflightRequests.resolveRequestsForMessage(message);
     const { status } = this.props.connection;
     if (status === 'disconnecting' || status === 'forcedDisconnecting') {
       this.finishClosingSocket(
         // We do this for Flow
         message.responseTo !== undefined ? message.responseTo : null,
       );
     }
 
     for (const listener of this.listeners) {
       listener(message);
     }
 
     if (message.type === serverSocketMessageTypes.ERROR) {
       const { message: errorMessage, payload } = message;
       if (payload) {
         console.log(`socket sent error ${errorMessage} with payload`, payload);
       } else {
         console.log(`socket sent error ${errorMessage}`);
       }
       if (errorMessage === 'policies_not_accepted' && this.props.active) {
         this.props.dispatch({
           type: forcePolicyAcknowledgmentActionType,
           payload,
         });
       }
     } else if (message.type === serverSocketMessageTypes.AUTH_ERROR) {
       this.props.dispatch({
         type: setActiveSessionRecoveryActionType,
         payload: {
           activeSessionRecovery:
             recoveryActionSources.socketAuthErrorResolutionAttempt,
           keyserverID: this.props.keyserverID,
         },
       });
     }
   };
 
   addListener: (listener: SocketListener) => void = listener => {
     this.listeners.add(listener);
   };
 
   removeListener: (listener: SocketListener) => void = listener => {
     this.listeners.delete(listener);
   };
 
   onClose: () => void = () => {
     const { status } = this.props.connection;
     this.socket = null;
     this.stopPing();
     if (this.state.inflightRequests) {
       this.state.inflightRequests.rejectAll(new Error('socket closed'));
       this.setState({ inflightRequests: null });
     }
     const handled = this.detectUnsupervisedBackground(true);
     if (!handled && status !== 'disconnected') {
       this.props.dispatch({
         type: updateConnectionStatusActionType,
         payload: {
           status: 'disconnected',
           keyserverID: this.props.keyserverID,
         },
       });
     }
   };
 
   async sendInitialMessage() {
     const { inflightRequests } = this.state;
     invariant(
       inflightRequests,
       'inflightRequests falsey inside sendInitialMessage',
     );
     const messageID = this.nextClientMessageID++;
 
     const shouldSendInitialPlatformDetails = !_isEqual(
       this.props.lastCommunicatedPlatformDetails,
     )(getConfig().platformDetails);
 
     const clientResponses: ClientClientResponse[] = [];
     if (shouldSendInitialPlatformDetails) {
       clientResponses.push({
         type: serverRequestTypes.PLATFORM_DETAILS,
         platformDetails: getConfig().platformDetails,
       });
     }
 
     let activityUpdatePromise;
     const { queuedActivityUpdates } = this.props.connection;
     if (queuedActivityUpdates.length > 0) {
       clientResponses.push({
         type: serverRequestTypes.INITIAL_ACTIVITY_UPDATES,
         activityUpdates: queuedActivityUpdates,
       });
       activityUpdatePromise =
         inflightRequests.fetchResponse<ActivityUpdateResponseServerSocketMessage>(
           messageID,
           serverSocketMessageTypes.ACTIVITY_UPDATE_RESPONSE,
         );
     }
 
     const sessionState = this.props.sessionStateFunc();
     const { sessionIdentification } = this.props;
     const initialMessage = {
       type: clientSocketMessageTypes.INITIAL,
       id: messageID,
       payload: {
         clientResponses,
         sessionState,
         sessionIdentification,
       },
     };
     this.initializedWithUserState = this.props.preRequestUserState;
     this.sendMessage(initialMessage);
 
     const stateSyncPromise =
       inflightRequests.fetchResponse<ClientStateSyncServerSocketMessage>(
         messageID,
         serverSocketMessageTypes.STATE_SYNC,
       );
 
     // https://flow.org/try/#1N4Igxg9gdgZglgcxALlAJwKYEMwBcD6aArlLnALYYrgA2WAzvXGCADQgYAeOBARgJ74AJhhhYiNXClzEM7DFCLl602QF92kEdQb8oYAAQwSeONAMAHNBHJx6GAII0aAHgAqyA8AMBqANoA1hj8nvQycFAIALqetpwYQgZqAHwAFAA6UAYGERZEuJ4AJABK2EIA8lA0-O7JrJkAlJ4ACta29i6F5bwAVgCyWBburAa4-BYYEDAGhVgA7lhwuMnJXpnZkFBhlm12GPQGALwGflEA3OsGm9tB-AfH3T0YeAB0t-SpufkNF1lGEGgDKkaBhcDkjgYAAxncEuAzvF4gyK4AAWMLgPh8DTWfw20BuwQh7z8cHOlzxWzBVhsewhX1wgWCZNxOxp9noLzy9BRqWp7QwP0uaku1zBmHoElw9wM80WYNabIwLywzl5u3Zgr+ooMAgAclhKJ5gH4wmgItFYnB4kI1BDgGpftkYACgSCwXAIdDYfDghykQhUejMdjgOSrviwbcib6Sczstk9QaMIz+FEIeLJfRY46kpdMLgiGgsonKL9hVBMrp9EYTGRzPYoEIAJJQJZwFV9fb0LAIDCpEOXN2jfa4BX8nNwaYZEAojDOCDpEAvMJYNBSgDqSx5i4Ci4aA5ZuBHY9pxxP9he4ogNAAbn2ZEQBTny5dZUtWfynDRUt4j2FzxgSSamobAgHeaBMNA1A3pCLwAEwAIwACwvJCIBqEAA
     // $FlowFixMe fixed in Flow 0.214
     const { stateSyncMessage, activityUpdateMessage } = await promiseAll({
       activityUpdateMessage: activityUpdatePromise,
       stateSyncMessage: stateSyncPromise,
     });
 
     if (shouldSendInitialPlatformDetails) {
       this.props.dispatch({
         type: updateLastCommunicatedPlatformDetailsActionType,
         payload: {
           platformDetails: getConfig().platformDetails,
           keyserverID: this.props.keyserverID,
         },
       });
     }
 
     if (activityUpdateMessage) {
       this.props.dispatch({
         type: updateActivityActionTypes.success,
         payload: {
           activityUpdates: { [this.props.keyserverID]: queuedActivityUpdates },
           result: activityUpdateMessage.payload,
         },
       });
     }
 
     if (stateSyncMessage.payload.type === stateSyncPayloadTypes.FULL) {
       const { sessionID, type, ...actionPayload } = stateSyncMessage.payload;
       this.props.dispatch({
         type: fullStateSyncActionType,
         payload: {
           ...actionPayload,
           calendarQuery: sessionState.calendarQuery,
           keyserverID: this.props.keyserverID,
         },
       });
       if (sessionID !== null && sessionID !== undefined) {
         invariant(
           this.initializedWithUserState,
           'initializedWithUserState should be set when state sync received',
         );
         this.props.dispatch({
           type: setNewSessionActionType,
           payload: {
             sessionChange: { cookieInvalidated: false, sessionID },
             preRequestUserState: this.initializedWithUserState,
             error: null,
             authActionSource: undefined,
             keyserverID: this.props.keyserverID,
           },
         });
       }
     } else {
       const { type, ...actionPayload } = stateSyncMessage.payload;
       this.props.dispatch({
         type: incrementalStateSyncActionType,
         payload: {
           ...actionPayload,
           calendarQuery: sessionState.calendarQuery,
           keyserverID: this.props.keyserverID,
         },
       });
     }
 
     const currentAsOf =
       stateSyncMessage.payload.type === stateSyncPayloadTypes.FULL
         ? stateSyncMessage.payload.updatesCurrentAsOf
         : stateSyncMessage.payload.updatesResult.currentAsOf;
     this.sendMessageWithoutID({
       type: clientSocketMessageTypes.ACK_UPDATES,
       payload: { currentAsOf },
     });
 
     this.markSocketInitialized();
   }
 
   initializeSocket: (retriesLeft?: number) => Promise<void> = async (
     retriesLeft = 1,
   ) => {
     try {
       await this.sendInitialMessage();
     } catch (e) {
       if (this.props.noDataAfterPolicyAcknowledgment) {
         this.failuresAfterPolicyAcknowledgment++;
       } else {
         this.failuresAfterPolicyAcknowledgment = 0;
       }
       if (this.failuresAfterPolicyAcknowledgment >= 2) {
         this.failuresAfterPolicyAcknowledgment = 0;
         this.props.showSocketCrashLoopAlert?.();
         this.props.dispatch({
           type: setActiveSessionRecoveryActionType,
           payload: {
             activeSessionRecovery:
               recoveryActionSources.refetchUserDataAfterAcknowledgment,
             keyserverID: this.props.keyserverID,
           },
         });
         return;
       }
 
       console.log(e);
       const { status } = this.props.connection;
       if (
         e instanceof SocketTimeout ||
         e instanceof SocketOffline ||
         (status !== 'connecting' && status !== 'reconnecting')
       ) {
         // This indicates that the socket will be closed. Do nothing, since the
         // connection status update will trigger a reconnect.
       } else if (
         retriesLeft === 0 ||
         (e instanceof ServerError && e.message !== 'unknown_error')
       ) {
         if (e.message === 'not_logged_in') {
           this.props.dispatch({
             type: setActiveSessionRecoveryActionType,
             payload: {
               activeSessionRecovery: recoveryActionSources.socketNotLoggedIn,
               keyserverID: this.props.keyserverID,
             },
           });
         } else if (this.socket) {
           this.socket.close();
         }
       } else {
         await this.initializeSocket(retriesLeft - 1);
       }
     }
   };
 
   stopPing() {
     if (this.pingTimeoutID) {
       clearTimeout(this.pingTimeoutID);
       this.pingTimeoutID = null;
     }
   }
 
   resetPing() {
     this.stopPing();
     const socket = this.socket;
     this.messageLastReceived = Date.now();
     this.pingTimeoutID = setTimeout(() => {
       if (this.socket === socket) {
         void this.sendPing();
       }
     }, pingFrequency);
   }
 
   async sendPing() {
     if (this.props.connection.status !== 'connected') {
       // This generally shouldn't happen because anything that changes the
       // connection status should call stopPing(), but it's good to make sure
       return;
     }
     const messageID = this.sendMessageWithoutID({
       type: clientSocketMessageTypes.PING,
     });
     try {
       invariant(
         this.state.inflightRequests,
         'inflightRequests falsey inside sendPing',
       );
       await this.state.inflightRequests.fetchResponse<PongServerSocketMessage>(
         messageID,
         serverSocketMessageTypes.PONG,
       );
     } catch (e) {}
   }
 
   setLateResponse: (messageID: number, isLate: boolean) => void = (
     messageID,
     isLate,
   ) => {
     this.props.dispatch({
       type: setLateResponseActionType,
       payload: { messageID, isLate, keyserverID: this.props.keyserverID },
     });
   };
 
   cleanUpServerTerminatedSocket() {
     if (this.socket && this.socket.readyState < 2) {
       this.socket.close();
     } else {
       this.onClose();
     }
   }
 
   detectUnsupervisedBackground: (alreadyClosed: boolean) => boolean =
     alreadyClosed => {
       // On native, sometimes the app is backgrounded without the proper
       // callbacks getting triggered. This leaves us in an incorrect state for
       // two reasons:
       // (1) The connection is still considered to be active, causing API
       //     requests to be processed via socket and failing.
       // (2) We rely on flipping foreground state in Redux to detect activity
       //     changes, and thus won't think we need to update activity.
       if (
         this.props.connection.status !== 'connected' ||
         !this.messageLastReceived ||
         this.messageLastReceived + serverRequestSocketTimeout >= Date.now() ||
         (actionLogger.mostRecentActionTime &&
           actionLogger.mostRecentActionTime + 3000 < Date.now())
       ) {
         return false;
       }
       if (!alreadyClosed) {
         this.cleanUpServerTerminatedSocket();
       }
       this.props.dispatch({
         type: unsupervisedBackgroundActionType,
         payload: { keyserverID: this.props.keyserverID },
       });
       return true;
     };
 }
 
 export default Socket;