@theia/core 1.43.1 → 1.45.0

package/src/node/env-variables/env-variables-server.ts

@@ -18,6 +18,7 @@ import { join } from 'path';
 import { homedir } from 'os';
 import { injectable } from 'inversify';
 import * as drivelist from 'drivelist';
+import { pathExists, mkdir } from 'fs-extra';
 import { EnvVariable, EnvVariablesServer } from '../../common/env-variables';
 import { isWindows } from '../../common/os';
 import { FileUri } from '../file-uri';
@@ -28,6 +29,7 @@ export class EnvVariablesServerImpl implements EnvVariablesServer {
     protected readonly envs: { [key: string]: EnvVariable } = {};
     protected readonly homeDirUri = FileUri.create(homedir()).toString();
     protected readonly configDirUri: Promise<string>;
+    protected readonly pathExistenceCache: { [key: string]: boolean } = {};
 
     constructor() {
         this.configDirUri = this.createConfigDirUri();
@@ -43,7 +45,25 @@ export class EnvVariablesServerImpl implements EnvVariablesServer {
     }
 
     protected async createConfigDirUri(): Promise<string> {
-        return FileUri.create(process.env.THEIA_CONFIG_DIR || join(homedir(), '.theia')).toString();
+        let dataFolderPath: string = '';
+        if (process.env.THEIA_APP_PROJECT_PATH) {
+            dataFolderPath = join(process.env.THEIA_APP_PROJECT_PATH, 'data');
+        }
+        const userDataPath = join(dataFolderPath, 'user-data');
+        const dataFolderExists = this.pathExistenceCache[dataFolderPath] ??= await pathExists(dataFolderPath);
+        if (dataFolderExists) {
+            const userDataExists = this.pathExistenceCache[userDataPath] ??= await pathExists(userDataPath);
+            if (userDataExists) {
+                process.env.THEIA_CONFIG_DIR = userDataPath;
+            } else {
+                await mkdir(userDataPath);
+                process.env.THEIA_CONFIG_DIR = userDataPath;
+                this.pathExistenceCache[userDataPath] = true;
+            }
+        } else {
+            process.env.THEIA_CONFIG_DIR = join(homedir(), '.theia');
+        }
+        return FileUri.create(process.env.THEIA_CONFIG_DIR).toString();
     }
 
     async getExecPath(): Promise<string> {

package/src/node/i18n/localization-server.ts

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { inject, injectable } from 'inversify';
-import { Localization } from 'src/common/i18n/localization';
+import { Localization } from '../../common/i18n/localization';
 import { LocalizationServer } from '../../common/i18n/localization-server';
 import { nls } from '../../common/nls';
 import { Deferred } from '../../common/promise-util';

package/src/node/messaging/default-messaging-service.ts

@@ -0,0 +1,129 @@
+// *****************************************************************************
+// Copyright (C) 2018 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { injectable, inject, named, interfaces, Container } from 'inversify';
+import { ContributionProvider, ConnectionHandler, bindContributionProvider, servicesPath } from '../../common';
+import { MessagingService } from './messaging-service';
+import { ConnectionContainerModule } from './connection-container-module';
+import Route = require('route-parser');
+import { Channel, ChannelMultiplexer } from '../../common/message-rpc/channel';
+import { FrontendConnectionService } from './frontend-connection-service';
+import { BackendApplicationContribution } from '../backend-application';
+
+export const MessagingContainer = Symbol('MessagingContainer');
+export const MainChannel = Symbol('MainChannel');
+
+@injectable()
+export class DefaultMessagingService implements MessagingService, BackendApplicationContribution {
+    @inject(MessagingContainer)
+    protected readonly container: interfaces.Container;
+
+    @inject(FrontendConnectionService)
+    protected readonly frontendConnectionService: FrontendConnectionService;
+
+    @inject(ContributionProvider) @named(ConnectionContainerModule)
+    protected readonly connectionModules: ContributionProvider<interfaces.ContainerModule>;
+
+    @inject(ContributionProvider) @named(MessagingService.Contribution)
+    protected readonly contributions: ContributionProvider<MessagingService.Contribution>;
+
+    protected readonly channelHandlers = new ConnectionHandlers<Channel>();
+
+    initialize(): void {
+        this.registerConnectionHandler(servicesPath, (_, socket) => this.handleConnection(socket));
+        for (const contribution of this.contributions.getContributions()) {
+            contribution.configure(this);
+        }
+    }
+
+    registerConnectionHandler(path: string, callback: (params: MessagingService.PathParams, mainChannel: Channel) => void): void {
+        this.frontendConnectionService.registerConnectionHandler(path, callback);
+    }
+
+    registerChannelHandler(spec: string, callback: (params: MessagingService.PathParams, channel: Channel) => void): void {
+        this.channelHandlers.push(spec, (params, channel) => callback(params, channel));
+    }
+
+    protected handleConnection(channel: Channel): void {
+        const multiplexer = new ChannelMultiplexer(channel);
+        const channelHandlers = this.getConnectionChannelHandlers(channel);
+        multiplexer.onDidOpenChannel(event => {
+            if (channelHandlers.route(event.id, event.channel)) {
+                console.debug(`Opening channel for service path '${event.id}'.`);
+                event.channel.onClose(() => console.info(`Closing channel on service path '${event.id}'.`));
+            }
+        });
+    }
+
+    protected createMainChannelContainer(socket: Channel): Container {
+        const connectionContainer: Container = this.container.createChild() as Container;
+        connectionContainer.bind(MainChannel).toConstantValue(socket);
+        return connectionContainer;
+    }
+
+    protected getConnectionChannelHandlers(socket: Channel): ConnectionHandlers<Channel> {
+        const connectionContainer = this.createMainChannelContainer(socket);
+        bindContributionProvider(connectionContainer, ConnectionHandler);
+        connectionContainer.load(...this.connectionModules.getContributions());
+        const connectionChannelHandlers = new ConnectionHandlers<Channel>(this.channelHandlers);
+        const connectionHandlers = connectionContainer.getNamed<ContributionProvider<ConnectionHandler>>(ContributionProvider, ConnectionHandler);
+        for (const connectionHandler of connectionHandlers.getContributions(true)) {
+            connectionChannelHandlers.push(connectionHandler.path, (_, channel) => {
+                connectionHandler.onConnection(channel);
+            });
+        }
+        return connectionChannelHandlers;
+    }
+
+}
+
+export class ConnectionHandlers<T> {
+    protected readonly handlers: ((path: string, connection: T) => string | false)[] = [];
+
+    constructor(
+        protected readonly parent?: ConnectionHandlers<T>
+    ) { }
+
+    push(spec: string, callback: (params: MessagingService.PathParams, connection: T) => void): void {
+        const route = new Route(spec);
+        const handler = (path: string, channel: T): string | false => {
+            const params = route.match(path);
+            if (!params) {
+                return false;
+            }
+            callback(params, channel);
+            return route.reverse(params);
+        };
+        this.handlers.push(handler);
+    }
+
+    route(path: string, connection: T): string | false {
+        for (const handler of this.handlers) {
+            try {
+                const result = handler(path, connection);
+                if (result) {
+                    return result;
+                }
+            } catch (e) {
+                console.error(e);
+            }
+        }
+        if (this.parent) {
+            return this.parent.route(path, connection);
+        }
+        return false;
+    }
+}

package/src/node/messaging/frontend-connection-service.ts

@@ -0,0 +1,24 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+
+import { Channel } from '../../common/message-rpc/';
+import { MessagingService } from './messaging-service';
+
+export const FrontendConnectionService = Symbol('FrontendConnectionService');
+
+export interface FrontendConnectionService {
+    registerConnectionHandler(path: string, callback: (params: MessagingService.PathParams, mainChannel: Channel) => void): void;
+}
+

package/src/node/messaging/ipc-protocol.ts

@@ -51,7 +51,7 @@ export function checkParentAlive(): void {
                 } catch {
                     process.exit();
                 }
-            }, 5000);
+            }, 5000).unref(); // we don't want this timeout to keep the process alive
         }
     }
 }

package/src/node/messaging/messaging-backend-module.ts

@@ -15,23 +15,38 @@
 // *****************************************************************************
 
 import { ContainerModule } from 'inversify';
-import { bindContributionProvider } from '../../common';
-import { BackendApplicationContribution } from '../backend-application';
-import { MessagingContribution, MessagingContainer } from './messaging-contribution';
+import { ConnectionHandler, RpcConnectionHandler, bindContributionProvider } from '../../common';
+// import { BackendApplicationContribution } from '../backend-application';
+import { DefaultMessagingService, MessagingContainer } from './default-messaging-service';
 import { ConnectionContainerModule } from './connection-container-module';
 import { MessagingService } from './messaging-service';
 import { MessagingListener, MessagingListenerContribution } from './messaging-listeners';
+import { FrontendConnectionService } from './frontend-connection-service';
+import { BackendApplicationContribution } from '../backend-application';
+import { connectionCloseServicePath } from '../../common/messaging/connection-management';
+import { WebsocketFrontendConnectionService } from './websocket-frontend-connection-service';
+import { WebsocketEndpoint } from './websocket-endpoint';
 
 export const messagingBackendModule = new ContainerModule(bind => {
     bindContributionProvider(bind, ConnectionContainerModule);
     bindContributionProvider(bind, MessagingService.Contribution);
-    bind(MessagingService.Identifier).to(MessagingContribution).inSingletonScope();
-    bind(MessagingContribution).toDynamicValue(({ container }) => {
-        const child = container.createChild();
-        child.bind(MessagingContainer).toConstantValue(container);
-        return child.get(MessagingService.Identifier);
-    }).inSingletonScope();
-    bind(BackendApplicationContribution).toService(MessagingContribution);
+    bind(DefaultMessagingService).toSelf().inSingletonScope();
+    bind(MessagingService.Identifier).toService(DefaultMessagingService);
+    bind(BackendApplicationContribution).toService(DefaultMessagingService);
+    bind(MessagingContainer).toDynamicValue(({ container }) => container).inSingletonScope();
+    bind(WebsocketEndpoint).toSelf().inSingletonScope();
+    bind(BackendApplicationContribution).toService(WebsocketEndpoint);
+    bind(WebsocketFrontendConnectionService).toSelf().inSingletonScope();
+    bind(FrontendConnectionService).toService(WebsocketFrontendConnectionService);
     bind(MessagingListener).toSelf().inSingletonScope();
     bindContributionProvider(bind, MessagingListenerContribution);
+
+    bind(ConnectionHandler).toDynamicValue(context => {
+        const connectionService = context.container.get<WebsocketFrontendConnectionService>(FrontendConnectionService);
+        return new RpcConnectionHandler<object>(connectionCloseServicePath, () => ({
+            markForClose: (channelId: string) => {
+                connectionService.markForClose(channelId);
+            }
+        }));
+    }).inSingletonScope();
 });

package/src/node/messaging/messaging-service.ts

@@ -14,7 +14,6 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Socket } from 'socket.io';
 import { Channel } from '../../common/message-rpc/channel';
 
 export interface MessagingService {
@@ -22,7 +21,7 @@ export interface MessagingService {
      * Accept a web socket channel on the given path.
      * A path supports the route syntax: https://github.com/rcs/route-parser#what-can-i-use-in-my-routes.
      */
-    wsChannel(path: string, callback: (params: MessagingService.PathParams, channel: Channel) => void): void;
+    registerChannelHandler(path: string, handler: (params: MessagingService.PathParams, channel: Channel) => void): void;
     /**
      * Accept a web socket connection on the given path.
      * A path supports the route syntax: https://github.com/rcs/route-parser#what-can-i-use-in-my-routes.
@@ -31,8 +30,9 @@ export interface MessagingService {
      * Prefer using web socket channels over establishing new web socket connection. Clients can handle only limited amount of web sockets
      * and excessive amount can cause performance degradation. All web socket channels share a single web socket connection.
      */
-    ws(path: string, callback: (params: MessagingService.PathParams, socket: Socket) => void): void;
+    registerConnectionHandler(path: string, callback: (params: MessagingService.PathParams, mainChannel: Channel) => void): void;
 }
+
 export namespace MessagingService {
     /** Inversify container identifier for the `MessagingService` component. */
     export const Identifier = Symbol('MessagingService');

package/src/node/messaging/test/test-web-socket-channel.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @theia/runtime-import-check */
 // *****************************************************************************
 // Copyright (C) 2018 TypeFox and others.
 //
@@ -17,40 +18,44 @@
 import * as http from 'http';
 import * as https from 'https';
 import { AddressInfo } from 'net';
-import { io, Socket } from 'socket.io-client';
-import { Channel, ChannelMultiplexer } from '../../../common/message-rpc/channel';
-import { IWebSocket, WebSocketChannel } from '../../../common/messaging/web-socket-channel';
+import { servicesPath } from '../../../common';
+import { WebSocketConnectionSource } from '../../../browser/messaging/ws-connection-source';
+import { Container, inject } from 'inversify';
+import { RemoteConnectionProvider, ServiceConnectionProvider } from '../../../browser/messaging/service-connection-provider';
+import { messagingFrontendModule } from '../../../browser/messaging/messaging-frontend-module';
+import { Socket, io } from 'socket.io-client';
+
+const websocketUrl = Symbol('testWebsocketUrl');
+class TestWebsocketConnectionSource extends WebSocketConnectionSource {
+    @inject(websocketUrl)
+    readonly websocketUrl: string;
+
+    protected override createWebSocketUrl(path: string): string {
+        return this.websocketUrl;
+    }
+
+    protected override createWebSocket(url: string): Socket {
+        return io(url);
+    }
+}
 
 export class TestWebSocketChannelSetup {
-    public readonly multiplexer: ChannelMultiplexer;
-    public readonly channel: Channel;
+    public readonly connectionProvider: ServiceConnectionProvider;
 
     constructor({ server, path }: {
         server: http.Server | https.Server,
         path: string
     }) {
-        const socket = io(`ws://localhost:${(server.address() as AddressInfo).port}${WebSocketChannel.wsPath}`);
-        this.channel = new WebSocketChannel(toIWebSocket(socket));
-        this.multiplexer = new ChannelMultiplexer(this.channel);
-        socket.on('connect', () => {
-            this.multiplexer.open(path);
-        });
-        socket.connect();
+        const address = (server.address() as AddressInfo);
+        const url = `ws://${address.address}:${address.port}${servicesPath}`;
+        this.connectionProvider = this.createConnectionProvider(url);
     }
-}
 
-function toIWebSocket(socket: Socket): IWebSocket {
-    return {
-        close: () => {
-            socket.removeAllListeners('disconnect');
-            socket.removeAllListeners('error');
-            socket.removeAllListeners('message');
-            socket.close();
-        },
-        isConnected: () => socket.connected,
-        onClose: cb => socket.on('disconnect', reason => cb(reason)),
-        onError: cb => socket.on('error', reason => cb(reason)),
-        onMessage: cb => socket.on('message', data => cb(data)),
-        send: message => socket.emit('message', message)
-    };
+    protected createConnectionProvider(socketUrl: string): ServiceConnectionProvider {
+        const container = new Container();
+        container.bind(websocketUrl).toConstantValue(socketUrl);
+        container.load(messagingFrontendModule);
+        container.rebind(WebSocketConnectionSource).to(TestWebsocketConnectionSource);
+        return container.get(RemoteConnectionProvider);
+    }
 }

package/src/node/messaging/websocket-endpoint.ts

@@ -0,0 +1,79 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+
+import { MessagingService } from './messaging-service';
+import * as http from 'http';
+import * as https from 'https';
+import { inject, injectable } from 'inversify';
+import { Server, Socket } from 'socket.io';
+import { WsRequestValidator } from '../ws-request-validators';
+import { MessagingListener } from './messaging-listeners';
+import { ConnectionHandlers } from './default-messaging-service';
+import { BackendApplicationContribution } from '../backend-application';
+
+@injectable()
+export class WebsocketEndpoint implements BackendApplicationContribution {
+    @inject(WsRequestValidator)
+    protected readonly wsRequestValidator: WsRequestValidator;
+
+    @inject(MessagingListener)
+    protected readonly messagingListener: MessagingListener;
+
+    protected checkAliveTimeout = 30000; // 30 seconds
+    protected maxHttpBufferSize = 1e8; // 100 MB
+
+    protected readonly wsHandlers = new ConnectionHandlers<Socket>();
+
+    registerConnectionHandler(spec: string, callback: (params: MessagingService.PathParams, socket: Socket) => void): void {
+        this.wsHandlers.push(spec, callback);
+    }
+
+    onStart(server: http.Server | https.Server): void {
+        const socketServer = new Server(server, {
+            pingInterval: this.checkAliveTimeout,
+            pingTimeout: this.checkAliveTimeout * 2,
+            maxHttpBufferSize: this.maxHttpBufferSize
+        });
+        // Accept every namespace by using /.*/
+        socketServer.of(/.*/).on('connection', async socket => {
+            const request = socket.request;
+            // Socket.io strips the `origin` header of the incoming request
+            // We provide a `fix-origin` header in the `WebSocketConnectionProvider`
+            request.headers.origin = request.headers['fix-origin'] as string;
+            if (await this.allowConnect(socket.request)) {
+                await this.handleConnection(socket);
+                this.messagingListener.onDidWebSocketUpgrade(socket.request, socket);
+            } else {
+                socket.disconnect(true);
+            }
+        });
+    }
+
+    protected async allowConnect(request: http.IncomingMessage): Promise<boolean> {
+        try {
+            return this.wsRequestValidator.allowWsUpgrade(request);
+        } catch (e) {
+            return false;
+        }
+    }
+
+    protected async handleConnection(socket: Socket): Promise<void> {
+        const pathname = socket.nsp.name;
+        if (pathname && !this.wsHandlers.route(pathname, socket)) {
+            console.error('Cannot find a ws handler for the path: ' + pathname);
+        }
+    }
+}
+

package/src/node/messaging/websocket-frontend-connection-service.ts

@@ -0,0 +1,171 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+
+import { Channel, WriteBuffer } from '../../common/message-rpc';
+import { MessagingService } from './messaging-service';
+import { inject, injectable } from 'inversify';
+import { Socket } from 'socket.io';
+import { ConnectionHandlers } from './default-messaging-service';
+import { SocketWriteBuffer } from '../../common/messaging/socket-write-buffer';
+import { FrontendConnectionService } from './frontend-connection-service';
+import { AbstractChannel } from '../../common/message-rpc/channel';
+import { Uint8ArrayReadBuffer, Uint8ArrayWriteBuffer } from '../../common/message-rpc/uint8-array-message-buffer';
+import { BackendApplicationConfigProvider } from '../backend-application-config-provider';
+import { WebsocketEndpoint } from './websocket-endpoint';
+import { ConnectionManagementMessages } from '../../common/messaging/connection-management';
+import { Disposable, DisposableCollection } from '../../common';
+
+@injectable()
+export class WebsocketFrontendConnectionService implements FrontendConnectionService {
+
+    @inject(WebsocketEndpoint)
+    protected readonly websocketServer: WebsocketEndpoint;
+
+    protected readonly wsHandlers = new ConnectionHandlers();
+    protected readonly connectionsByFrontend = new Map<string, ReconnectableSocketChannel>();
+    protected readonly closeTimeouts = new Map<string, NodeJS.Timeout>();
+    protected readonly channelsMarkedForClose = new Set<string>();
+
+    registerConnectionHandler(spec: string, callback: (params: MessagingService.PathParams, channel: Channel) => void): void {
+        this.websocketServer.registerConnectionHandler(spec, (params, socket) => this.handleConnection(socket, channel => callback(params, channel)));
+    }
+
+    protected async handleConnection(socket: Socket, channelCreatedHandler: (channel: Channel) => void): Promise<void> {
+        // eslint-disable-next-line prefer-const
+        let reconnectListener: (frontEndId: string) => void;
+        const initialConnectListener = (frontEndId: string) => {
+            socket.off(ConnectionManagementMessages.INITIAL_CONNECT, initialConnectListener);
+            socket.off(ConnectionManagementMessages.RECONNECT, reconnectListener);
+            if (this.connectionsByFrontend.has(frontEndId)) {
+                this.closeConnection(frontEndId, 'reconnecting same front end');
+            }
+            channelCreatedHandler(this.createConnection(socket, frontEndId));
+            socket.emit(ConnectionManagementMessages.INITIAL_CONNECT);
+        };
+
+        reconnectListener = (frontEndId: string) => {
+            socket.off(ConnectionManagementMessages.INITIAL_CONNECT, initialConnectListener);
+            socket.off(ConnectionManagementMessages.RECONNECT, reconnectListener);
+            const channel = this.connectionsByFrontend.get(frontEndId);
+            if (channel) {
+                console.info(`Reconnecting to front end ${frontEndId}`);
+                socket.emit(ConnectionManagementMessages.RECONNECT, true);
+                channel.connect(socket);
+                const pendingTimeout = this.closeTimeouts.get(frontEndId);
+                clearTimeout(pendingTimeout);
+                this.closeTimeouts.delete(frontEndId);
+            } else {
+                console.info(`Reconnecting failed for ${frontEndId}`);
+                socket.emit(ConnectionManagementMessages.RECONNECT, false);
+            }
+        };
+        socket.on(ConnectionManagementMessages.INITIAL_CONNECT, initialConnectListener);
+        socket.on(ConnectionManagementMessages.RECONNECT, reconnectListener);
+    }
+
+    protected closeConnection(frontEndId: string, reason: string): void {
+        console.info(`closing connection for ${frontEndId}`);
+        const connection = this.connectionsByFrontend.get(frontEndId)!; // not called when no connection is present
+
+        this.connectionsByFrontend.delete(frontEndId);
+
+        const pendingTimeout = this.closeTimeouts.get(frontEndId);
+        clearTimeout(pendingTimeout);
+        this.closeTimeouts.delete(frontEndId);
+
+        connection.onCloseEmitter.fire({ reason });
+        connection.close();
+    }
+
+    protected createConnection(socket: Socket, frontEndId: string): Channel {
+        console.info(`creating connection for ${frontEndId}`);
+        const channel = new ReconnectableSocketChannel();
+        channel.connect(socket);
+
+        socket.on('disconnect', evt => {
+            console.info('socked closed');
+            channel.disconnect();
+            const timeout = BackendApplicationConfigProvider.get().frontendConnectionTimeout;
+            const isMarkedForClose = this.channelsMarkedForClose.delete(frontEndId);
+            if (timeout === 0 || isMarkedForClose) {
+                this.closeConnection(frontEndId, evt);
+            } else if (timeout > 0) {
+                console.info(`setting close timeout for id ${frontEndId} to ${timeout}`);
+                const handle = setTimeout(() => {
+                    this.closeConnection(frontEndId, evt);
+                }, timeout);
+                this.closeTimeouts.set(frontEndId, handle);
+            } else {
+                // timeout < 0: never close the back end
+            }
+        });
+
+        this.connectionsByFrontend.set(frontEndId, channel);
+        return channel;
+    }
+
+    markForClose(channelId: string): void {
+        this.channelsMarkedForClose.add(channelId);
+    }
+}
+
+class ReconnectableSocketChannel extends AbstractChannel {
+    private socket: Socket | undefined;
+    private socketBuffer = new SocketWriteBuffer();
+    private disposables = new DisposableCollection();
+
+    connect(socket: Socket): void {
+        this.disposables = new DisposableCollection();
+        this.socket = socket;
+        const errorHandler = (err: Error) => {
+            this.onErrorEmitter.fire(err);
+        };
+        this.disposables.push(Disposable.create(() => {
+            socket.off('error', errorHandler);
+        }));
+        socket.on('error', errorHandler);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const dataListener = (data: any) => {
+            // In the browser context socketIO receives binary messages as ArrayBuffers.
+            // So we have to convert them to a Uint8Array before delegating the message to the read buffer.
+            const buffer = data instanceof ArrayBuffer ? new Uint8Array(data) : data;
+            this.onMessageEmitter.fire(() => new Uint8ArrayReadBuffer(buffer));
+        };
+        this.disposables.push(Disposable.create(() => {
+            socket.off('message', dataListener);
+        }));
+        socket.on('message', dataListener);
+        this.socketBuffer.flush(socket);
+    }
+
+    disconnect(): void {
+        this.disposables.dispose();
+        this.socket = undefined;
+    }
+
+    override getWriteBuffer(): WriteBuffer {
+        const writeBuffer = new Uint8ArrayWriteBuffer();
+        writeBuffer.onCommit(data => {
+            if (this.socket?.connected) {
+                this.socket.send(data);
+            } else {
+                this.socketBuffer.buffer(data);
+            }
+        });
+        return writeBuffer;
+    }
+}
+