How to dispose languageclient and websocket connection properly

[shivam6543]

Hello Team,

I would like to know how to dispose the existing Languageclient and WebSocket LSP connection before creating a new one. My use case involves creating a new LanguageClient and LSP WebSocket connection when switching to a different language. However, before doing that, I need to dispose the existing connections. But when I try to change the language while the current connection is initializing (between the initialize and initialized messages), it throws this error:

Seems like it's not able to dispose the connection that's initializing.

Currently, I am handling it like this:

import * as monaco from 'monaco-editor';
import { initServices } from 'monaco-languageclient/vscode/services';
import { MonacoLanguageClient } from 'monaco-languageclient';
import { WebSocketMessageReader, WebSocketMessageWriter, toSocket } from 'vscode-ws-jsonrpc';
import { CloseAction, ErrorAction, MessageTransports } from 'vscode-languageclient';

let editor = null;
let languageClient = null;
let webSocket = null;

const startClient = async (value, language, fileUri) => {
  await initServices({});

  editor = monaco.editor.create(editorNode, {
    minimap: {
      enabled: false,
    },
    theme: "vs-dark",
  });

  let editorModel = monaco.editor.createModel(
    value,
    language,
    monaco.Uri.parse(fileUri)
  );

  editor.setModel(editorModel);

  webSocket = initLspConnection(`ws://localhost:8080/${language}`);
};

const initLspConnection = (url, language): WebSocket => {
  webSocket = new WebSocket(url);

  webSocket.onopen = async () => {
    const socket = toSocket(webSocket);
    const reader = new WebSocketMessageReader(socket);
    const writer = new WebSocketMessageWriter(socket);
    languageClient = createLanguageClient({
      reader,
      writer,
    }, language);

    await languageClient.start();

    reader.onClose(async () => await languageClient.stop());
  };
  return webSocket;
};

const createLanguageClient = (transports, language) => {
  return new MonacoLanguageClient({
    name: "Sample Language Client",
    clientOptions: {
      workspaceFolder,
      documentSelector: [language],
      errorHandler: {
        error: () => ({ action: ErrorAction.Continue }),
        closed: () => ({ action: CloseAction.DoNotRestart }),
      },
    },
    connectionProvider: {
      get: () => {
        return Promise.resolve(transports);
      },
    },
  });
};

// calling this on language change
const onChange = async (language, fileUri, value) => {
  await dispose();

  let editorModel = monaco.editor.createModel(
    value,
    language,
    monaco.Uri.file(fileUri)
  );

  editor.setModel(editorModel);

  webSocket = initLspConnection(`ws://localhost:8080/${language}`);
};

const dispose = async () => {
  if (languageClient) {
    await languageClient.dispose();
    languageClient = null;
  }

  if (webSocket) {
    webSocket.close();
    webSocket = null;
  }
};

startClient("", 'java', myFilePath)

If I switch to different language after initialization, it works fine.

Thank you for your help!

[kaisalmen]

@shivam6543 this is not an issue and therefore I transferred it to a discussion.
Consider using monaco-editor-wrapper. It has proper dispose already built in, see here. See how it handles the dispose.