fix gitpod-io#3847: reconnect ws to server in iframe

Author: akosyakov

components/dashboard/src/Login.tsx

@@ -7,7 +7,7 @@
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useContext, useEffect, useState } from "react";
 import { UserContext } from "./user-context";
-import { getGitpodService, gitpodHostUrl, reconnectGitpodService } from "./service/service";
+import { getGitpodService, gitpodHostUrl } from "./service/service";
 import { iconForAuthProvider, simplifyProviderName } from "./provider-utils";
 import gitpod from './images/gitpod.svg';
 import gitpodIcon from './icons/gitpod.svg';
@@ -58,7 +58,7 @@ export function Login() {
                     // todo: not here, but add a button to the /login-success page to close, if this should not work as expected
                 }
                 (async () => {
-                    reconnectGitpodService();
+                    await getGitpodService().reconnect();
                     setUser(await getGitpodService().server.getLoggedInUser());
                     markLoggedIn();
                 })();

components/dashboard/src/service/service.tsx

@@ -19,7 +19,11 @@ function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
         const factory = new JsonRpcProxyFactory<S>();
         const proxy = factory.createProxy();
         factory.listen(connection);
-        return new GitpodServiceImpl<C, S>(proxy);
+        return new GitpodServiceImpl<C, S>(proxy, {
+            onReconnect: async () => {
+                await connection.sendRequest('$reconnectServer');
+            }
+        });
     }
     let host = gitpodHostUrl
         .asWebsocket()
@@ -28,25 +32,20 @@ function createGitpodService<C extends GitpodClient, S extends GitpodServer>() {
 
     const connectionProvider = new WebSocketConnectionProvider();
     let numberOfErrors = 0;
-    const { proxy, webSocket } = connectionProvider.createProxy2<S>(host.toString(), undefined, {
+    let onReconnect = () => { };
+    const proxy = connectionProvider.createProxy<S>(host.toString(), undefined, {
         onerror: (event: any) => {
             log.error(event);
             if (numberOfErrors++ === 5) {
                 alert('We are having trouble connecting to the server.\nEither you are offline or websocket connections are blocked.');
             }
+        },
+        onListening: socket => {
+            onReconnect = () => socket.reconnect()
         }
     });
 
-    const service = new GitpodServiceImpl<C, S>(proxy);
-    (service as any).reconnect = () => {
-        const ws = (webSocket as any);
-        if (typeof ws.reconnect === "function") {
-            ws.reconnect();
-        } else {
-            console.log("WebSocket reconnect not possible.");
-        }
-    };
-    return service;
+    return new GitpodServiceImpl<C, S>(proxy, { onReconnect });
 }
 
 function getGitpodService(): GitpodService {
@@ -56,13 +55,4 @@ function getGitpodService(): GitpodService {
     return service;
 }
 
-function reconnectGitpodService() {
-    const service = getGitpodService() as any;
-    if (service.reconnect) {
-        service.reconnect();
-    } else {
-        console.error("WebSocket reconnect not possible.")
-    }
-}
-
-export { getGitpodService, reconnectGitpodService }
+export { getGitpodService }

components/gitpod-protocol/src/gitpod-service.ts

@@ -8,7 +8,7 @@ import {
     User, WorkspaceInfo, WorkspaceCreationResult, UserMessage, WorkspaceInstanceUser,
     WhitelistedRepository, WorkspaceImageBuild, AuthProviderInfo, Branding, CreateWorkspaceMode,
     Token, UserEnvVarValue, ResolvePluginsParams, PreparePluginUploadParams, Terms,
-    ResolvedPlugins, Configuration, InstallPluginsParams, UninstallPluginParams, UserInfo, GitpodTokenType, 
+    ResolvedPlugins, Configuration, InstallPluginsParams, UninstallPluginParams, UserInfo, GitpodTokenType,
     GitpodToken, AuthProviderEntry, GuessGitTokenScopesParams, GuessedGitTokenScopes
 } from './protocol';
 import { JsonRpcProxy, JsonRpcServer } from './messaging/proxy-factory';
@@ -189,7 +189,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     tsGetSlots(): Promise<TeamSubscriptionSlotResolved[]>;
     tsGetUnassignedSlot(teamSubscriptionId: string): Promise<TeamSubscriptionSlot | undefined>
     tsAddSlots(teamSubscriptionId: string, quantity: number): Promise<void>;
-    tsAssignSlot(teamSubscriptionId: string, teamSubscriptionSlotId: string, identityStr: string|undefined): Promise<void>
+    tsAssignSlot(teamSubscriptionId: string, teamSubscriptionSlotId: string, identityStr: string | undefined): Promise<void>
     tsReassignSlot(teamSubscriptionId: string, teamSubscriptionSlotId: string, newIdentityStr: string): Promise<void>;
     tsDeactivateSlot(teamSubscriptionId: string, teamSubscriptionSlotId: string): Promise<void>;
     tsReactivateSlot(teamSubscriptionId: string, teamSubscriptionSlotId: string): Promise<void>;
@@ -402,7 +402,7 @@ export class WorkspaceInstanceUpdateListener {
     private readonly onDidChangeEmitter = new Emitter<void>();
     readonly onDidChange = this.onDidChangeEmitter.event;
 
-    private source: 'sync' | 'update' = 'sync';
+    private source: 'sync' | 'update' = 'sync';
 
     get info(): WorkspaceInfo {
         return this._info;
@@ -494,11 +494,15 @@ export class WorkspaceInstanceUpdateListener {
 
 }
 
+export interface GitpodServiceOptions {
+    onReconnect?: () => (void | Promise<void>)
+}
+
 export class GitpodServiceImpl<Client extends GitpodClient, Server extends GitpodServer> {
 
     private readonly compositeClient = new GitpodCompositeClient<Client>();
 
-    constructor(public readonly server: JsonRpcProxy<Server>) {
+    constructor(public readonly server: JsonRpcProxy<Server>, private options?: GitpodServiceOptions) {
         server.setClient(this.compositeClient);
         server.onDidOpenConnection(() => this.compositeClient.notifyDidOpenConnection());
         server.onDidCloseConnection(() => this.compositeClient.notifyDidCloseConnection());
@@ -518,6 +522,12 @@ export class GitpodServiceImpl<Client extends GitpodClient, Server extends Gitpo
         this.instanceListeners.set(workspaceId, listener);
         return listener;
     }
+
+    async reconnect(): Promise<void> {
+        if (this.options?.onReconnect) {
+            await this.options.onReconnect();
+        }
+    }
 }
 
 export function createGitpodService<C extends GitpodClient, S extends GitpodServer>(serverUrl: string | Promise<string>) {
@@ -535,6 +545,11 @@ export function createGitpodService<C extends GitpodClient, S extends GitpodServ
     }
 
     const connectionProvider = new WebSocketConnectionProvider();
-    const gitpodServer = connectionProvider.createProxy<S>(url);
-    return new GitpodServiceImpl<C, S>(gitpodServer);
+    let onReconnect = () => { };
+    const gitpodServer = connectionProvider.createProxy<S>(url, undefined, {
+        onListening: socket => {
+            onReconnect = () => socket.reconnect();
+        }
+    });
+    return new GitpodServiceImpl<C, S>(gitpodServer, { onReconnect });
 }

components/gitpod-protocol/src/messaging/browser/connection.ts

@@ -12,6 +12,7 @@ import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export interface WebSocketOptions {
     onerror?: (event: Event) => void;
+    onListening?: (socket: ReconnectingWebSocket) => void;
 }
 
 export class WebSocketConnectionProvider {
@@ -26,30 +27,24 @@ export class WebSocketConnectionProvider {
     createProxy<T extends object>(path: string | Promise<string>, target?: object, options?: WebSocketOptions): JsonRpcProxy<T> {
         const factory = new JsonRpcProxyFactory<T>(target);
         const startListening = (path: string) => {
-            this.listen({
-                    path,
-                    onConnection: c => factory.listen(c)
-                },
+            const socket = this.listen({
+                path,
+                onConnection: c => factory.listen(c)
+            },
                 options
             );
+            if (options?.onListening) {
+                options.onListening(socket as any as ReconnectingWebSocket)
+            }
         };
-        
+
         if (typeof path === "string") {
             startListening(path);
         } else {
             path.then(path => startListening(path));
         }
         return factory.createProxy();
     }
-    createProxy2<T extends object>(path: string, target?: object, options?: WebSocketOptions): { proxy: JsonRpcProxy<T>, webSocket: WebSocket } {
-        const factory = new JsonRpcProxyFactory<T>(target);
-        const webSocket = this.listen({
-            path,
-            onConnection: c => factory.listen(c)
-        }, options);
-        const proxy = factory.createProxy();
-        return { proxy, webSocket };
-    }
 
     /**
      * Install a connection handler for the given path.

components/supervisor/frontend/src/shared/loading-frame.ts

@@ -40,6 +40,7 @@ export function load({ gitpodService }: {
             const frameWindow = frame.contentWindow!;
             const writer = new WindowMessageWriter('gitpodServer', frameWindow, serverOrigin);
             const connection = createMessageConnection(reader, writer, new ConsoleLogger())
+            connection.onRequest('$reconnectServer', () => gitpodService.reconnect());
             factory.listen(connection);
             const setState = (state: object) => {
                 frameWindow.postMessage({ type: 'setState', state }, serverOrigin);