How to use guacamole-common-js - 10 common examples

public open(id_parameter: string, endpoint_parameter: string) {
    // added to simplify development process
    const url = environment.production ? window.location.origin : API_URL;
    const tunnel = new Guacamole.HTTPTunnel(
      `${url}/api/tunnel`, false,
      { 'Authorization': `Bearer ${this.storageService.getToken()}` }
    );

    const guac = new Guacamole.Client(tunnel);
    const display = document.getElementById('display');

    display.appendChild(guac.getDisplay().getElement());
    this.layer = guac.getDisplay().getDefaultLayer();

    guac.connect(`{"host" : "${id_parameter}", "endpoint" : "${endpoint_parameter}"}`);

    // Error handler
    guac.onerror = (error) => console.log(error.message);
    window.onunload = () => guac.disconnect();

    // Mouse
    const mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
    mouse.onmousemove = (mouseState) => {
      if (navigator.userAgent.indexOf('Firefox') === -1) {
        mouseState.x = mouseState.x + 125;

// Error handler
    guac.onerror = (error) => console.log(error.message);
    window.onunload = () => guac.disconnect();

    // Mouse
    const mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
    mouse.onmousemove = (mouseState) => {
      if (navigator.userAgent.indexOf('Firefox') === -1) {
        mouseState.x = mouseState.x + 125;
        mouseState.y = mouseState.y + 65;
      }
      guac.sendMouseState(mouseState);
    }

    const keyboard = new Guacamole.Keyboard(document);
    keyboard.onkeydown = (keysym) => guac.sendKeyEvent(1, keysym);
    keyboard.onkeyup = (keysym) => guac.sendKeyEvent(0, keysym);
  }
}

);

    const guac = new Guacamole.Client(tunnel);
    const display = document.getElementById('display');

    display.appendChild(guac.getDisplay().getElement());
    this.layer = guac.getDisplay().getDefaultLayer();

    guac.connect(`{"host" : "${id_parameter}", "endpoint" : "${endpoint_parameter}"}`);

    // Error handler
    guac.onerror = (error) => console.log(error.message);
    window.onunload = () => guac.disconnect();

    // Mouse
    const mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
    mouse.onmousemove = (mouseState) => {
      if (navigator.userAgent.indexOf('Firefox') === -1) {
        mouseState.x = mouseState.x + 125;
        mouseState.y = mouseState.y + 65;
      }
      guac.sendMouseState(mouseState);
    }

    const keyboard = new Guacamole.Keyboard(document);
    keyboard.onkeydown = (keysym) => guac.sendKeyEvent(1, keysym);
    keyboard.onkeyup = (keysym) => guac.sendKeyEvent(0, keysym);
  }
}

public open(id_parameter: string, endpoint_parameter: string) {
    // added to simplify development process
    const url = environment.production ? window.location.origin : API_URL;
    const tunnel = new Guacamole.HTTPTunnel(
      `${url}/api/tunnel`, false,
      { 'Authorization': `Bearer ${this.storageService.getToken()}` }
    );

    const guac = new Guacamole.Client(tunnel);
    const display = document.getElementById('display');

    display.appendChild(guac.getDisplay().getElement());
    this.layer = guac.getDisplay().getDefaultLayer();

    guac.connect(`{"host" : "${id_parameter}", "endpoint" : "${endpoint_parameter}"}`);

    // Error handler
    guac.onerror = (error) => console.log(error.message);
    window.onunload = () => guac.disconnect();

ngOnInit() {
    if (!this.replay.src) {
      alert('Not found replay');
      return;
    }
    this.playerRef = document.getElementById('player');
    this.displayRef = document.getElementById('display');
    this.screenRef = document.getElementById('screen');
    const tunnel = new Guacamole.StaticHTTPTunnel(this.replay.src);
    this.recording = new Guacamole.SessionRecording(tunnel);
    this.recordingDisplay = this.recording.getDisplay();
    const recordingElement = this.recordingDisplay.getElement();
    recordingElement.style.margin = '0 auto';
    this.screenRef.appendChild(recordingElement);
    this.initRecording();


    // this.toggle();
  }

ngOnInit() {
    if (!this.replay.src) {
      alert('Not found replay');
      return;
    }
    this.playerRef = document.getElementById('player');
    this.displayRef = document.getElementById('display');
    this.screenRef = document.getElementById('screen');
    const tunnel = new Guacamole.StaticHTTPTunnel(this.replay.src);
    this.recording = new Guacamole.SessionRecording(tunnel);
    this.recordingDisplay = this.recording.getDisplay();
    const recordingElement = this.recordingDisplay.getElement();
    recordingElement.style.margin = '0 auto';
    this.screenRef.appendChild(recordingElement);
    this.initRecording();


    // this.toggle();
  }

useEffect(() => {
        // Determine websocket URI
        const protocolPrefix = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        let {host} = window.location;
        let webSocketFullUrl = `${protocolPrefix}//${host}${wspath}`;

        guacRef.current = new Guacamole.Client(new Guacamole.WebSocketTunnel(webSocketFullUrl));

        displayRef.current.appendChild(guacRef.current.getDisplay().getElement());

        // Error handler
        guacRef.current.onerror = function (error) {
            let msg = error.message;

            if (GUACAMOLE_STATUS[error.code]) {
                msg = <p>
                    {error.message}<br>
                    {GUACAMOLE_STATUS[error.code].name}<br>
                    {GUACAMOLE_STATUS[error.code].text}
                </p>
            }

            setErrorMessage(msg);

useEffect(() => {
        // don't bind to events if we know this input will not be accepted at server side
        if (!controlInput) {
            return;
        }

        // Keyboard
        let keyboard = new Guacamole.Keyboard(displayRef.current);

        const fixKeys = (keysym) => {
            // 65508 - Right Ctrl
            // 65507 - Left Ctrl
            // somehow Right Ctrl is not sent, so send Left Ctrl instead
            if (keysym === 65508) return 65507;

            return keysym
        };

        keyboard.onkeydown = function (keysym) {
            guacRef.current.sendKeyEvent(1, fixKeys(keysym));
        };

        keyboard.onkeyup = function (keysym) {
            guacRef.current.sendKeyEvent(0, fixKeys(keysym));

// somehow Right Ctrl is not sent, so send Left Ctrl instead
            if (keysym === 65508) return 65507;

            return keysym
        };

        keyboard.onkeydown = function (keysym) {
            guacRef.current.sendKeyEvent(1, fixKeys(keysym));
        };

        keyboard.onkeyup = function (keysym) {
            guacRef.current.sendKeyEvent(0, fixKeys(keysym));
        };

        // Mouse
        let mouse = new Guacamole.Mouse(displayRef.current);


        mouse.onmousemove = function (mouseState) {
            mouseState.x = mouseState.x / scale.current;
            mouseState.y = mouseState.y / scale.current;
            guacRef.current.sendMouseState(mouseState);
        };

        mouse.onmousedown = mouse.onmouseup = function (mouseState) {
            guacRef.current.sendMouseState(mouseState);
        };


    }, [controlInput]);

guacRef.current.onstatechange = (newState) => {
            setClientState(newState);
        };

        // Setup connection parameters, like resolution and supported audio types
        let connectionParams = {
            audio: []
        };

        // if current instance is allowed to control remote display size - include window size in connection info
        if (controlSize) {
            connectionParams.width = displayRef.current.clientWidth;
            connectionParams.height = displayRef.current.clientHeight;
        }

        let supportedAudioTypes = Guacamole.AudioPlayer.getSupportedTypes();
        if (supportedAudioTypes.length > 0) {
            connectionParams.audio = supportedAudioTypes.map(item => item + ";rate=44100,channels=2")
        }

        // Set connection parameters as we will use them later to reconnect
        connectParamsRef.current = connectionParams;

        // Everything has been setup - we can initiate connection
        guacRef.current.connect(getConnectionString());

        // Specify how to clean up after this effect:
        return function cleanup() {
            // Disconnect Guacamole Client, so server know'w we don't need any updates and teminates connection
            // to server
            guacRef.current.disconnect();
        };