How to use the monaco-languageclient.createMonacoServices function in monaco-languageclient

})

// Create the web socket
// const socketUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/elkgraph`
// const socketUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://localhost:8080/org.eclipse.scava.crossflow.web/elkgraph`
const socketUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://localhost:8080/org.eclipse.scava.crossflow.web/elkgraph?initialContent=${encodeURIComponent(initialContent)}`
const socketOptions = {
    maxReconnectionDelay: 10000,
    minReconnectionDelay: 1000,
    reconnectionDelayGrowFactor: 1.3,
    connectionTimeout: 10000,
    maxRetries: Infinity,
    debug: false
}
const webSocket = new WebSocket(socketUrl, undefined, socketOptions)
const services = createMonacoServices(editor)
listen({
    webSocket,
    onConnection: connection => {
        const languageClient = createLanguageClient(connection)
        const disposable = languageClient.start()
        connection.onClose(() => {
            diagramServer.disconnect()
            disposable.dispose()
        })
    }
})

function createLanguageClient(messageConnection: MessageConnection): BaseLanguageClient {
    return new BaseLanguageClient({
        name: 'ELK Graph Language Client',
        clientOptions: {

compressedContent: LZString.compressToEncodedURIComponent(editor.getValue())
    };
});
// Create the web socket
// const socketUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/elkgraph`
var socketUrl = (location.protocol === 'https:' ? 'wss' : 'ws') + "://localhost:8080/org.eclipse.scava.crossflow.web/elkgraph";
var socketOptions = {
    maxReconnectionDelay: 10000,
    minReconnectionDelay: 1000,
    reconnectionDelayGrowFactor: 1.3,
    connectionTimeout: 10000,
    maxRetries: Infinity,
    debug: false
};
var webSocket = new WebSocket(socketUrl, undefined, socketOptions);
var services = monaco_languageclient_1.createMonacoServices(editor);
vscode_ws_jsonrpc_1.listen({
    webSocket: webSocket,
    onConnection: function (connection) {
        var languageClient = createLanguageClient(connection);
        var disposable = languageClient.start();
        connection.onClose(function () {
            diagramServer.disconnect();
            disposable.dispose();
        });
    }
});
function createLanguageClient(messageConnection) {
    return new monaco_languageclient_1.BaseLanguageClient({
        name: 'ELK Graph Language Client',
        clientOptions: {
            documentSelector: ['elkt'],

// create the web socket
const serverUrl = "ws://localhost:3000//sampleServer";
const webSocket = createWebSocket(serverUrl);
// listen when the web socket is opened
listen({
    webSocket,
    onConnection: connection => {
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
    },
});

const monacoServices = createMonacoServices();
function createLanguageClient(connection: MessageConnection): BaseLanguageClient {
    return new BaseLanguageClient({
        name: "Sample Language Client",
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ["json"],
            // disable the default error handler
            errorHandler: {
                error: () => ErrorAction.Continue,
                closed: () => CloseAction.DoNotRestart,
            },
        },
        services: monacoServices,
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: (errorHandler, closeHandler) => {

editorDidMount(editorInstance, monaco) {
        this.monaco = monaco;
        this.editorInstance = editorInstance;
        monaco.languages.register({ id: BAL_LANGUAGE });
        monaco.languages.setMonarchTokensProvider(BAL_LANGUAGE, Grammar);
        monaco.languages.setLanguageConfiguration(BAL_LANGUAGE, BAL_LANG_CONFIG);
        const uri = monaco.Uri.parse(this.props.file.toURI());
        let modelForFile = monaco.editor.getModel(uri);
        if (!modelForFile) {
            modelForFile = monaco.editor.createModel(this.props.file.content, BAL_LANGUAGE, uri);
        }
        editorInstance.setModel(modelForFile);
        this.props.commandProxy.on(WORKSPACE_EVENTS.FILE_CLOSED, this.onWorkspaceFileClose);
        this.props.commandProxy.on(GO_TO_POSITION, this.handleGoToPosition);
        const services = createMonacoServices(editorInstance);
        const getLangServerConnection = this.props.ballerinaPlugin.getLangServerConnection();
        getLangServerConnection
            .then((connection) => {
                // create and start the language client
                const languageClient = new BaseLanguageClient({
                    name: 'Ballerina Language Client',
                    clientOptions: {
                        // use a language id as a document selector
                        documentSelector: [BAL_LANGUAGE],
                        // disable the default error handler
                        errorHandler: {
                            error: () => ErrorAction.Continue,
                            closed: () => CloseAction.DoNotRestart,
                        },
                    },
                    services,