How to use @novnc/novnc - 10 common examples

vncLogging,
      onInitFailed,
    } = this.props

    NovncLog.init_logging(vncLogging)
    try {
      const protocol = encrypt ? 'wss' : 'ws'
      const url = `${protocol}://${host}:${port}/${path}`

      const options = {
        repeaterID,
        shared,
        credentials,
      }

      this.rfb = new RFB(this.novncElem, url, options)
      this.addEventListeners()
      this.rfb.viewOnly = viewOnly
      this.rfb.scaleViewport = scaleViewport // if the remote session is smaller than HTML container, the view will be centered
      this.rfb.resizeSession = resizeSession
    } catch (e) {
      onInitFailed && onInitFailed(e)
      this.rfb = undefined
    }
  }

vncLogging,
      onInitFailed
    } = this.props;

    NovncLog.init_logging(vncLogging);
    try {
      const protocol = encrypt ? 'wss' : 'ws';
      const url = `${protocol}://${host}:${port}/${path}`;

      const options = {
        repeaterID,
        shared,
        credentials
      };

      this.rfb = new RFB(this.novncElem, url, options);
      this.rfb.addEventListener('connect', this.onConnected);
      this.rfb.addEventListener('disconnect', this.onDisconnected);
      this.rfb.addEventListener('securityfailure', this.onSecurityFailure);
      this.rfb.viewOnly = viewOnly;
      this.rfb.scaleViewport = false; // if the remote session is smaller than HTML container, the view will be centered
      this.rfb.resizeSession = resizeSession;
    } catch (e) {
      onInitFailed && onInitFailed(e);
      this.rfb = undefined;
    }
  }

const {
      host,
      port,
      path,
      encrypt,
      resizeSession,
      scaleViewport,
      viewOnly,
      shared,
      credentials,
      repeaterID,
      vncLogging,
      onInitFailed,
    } = this.props

    NovncLog.init_logging(vncLogging)
    try {
      const protocol = encrypt ? 'wss' : 'ws'
      const url = `${protocol}://${host}:${port}/${path}`

      const options = {
        repeaterID,
        shared,
        credentials,
      }

      this.rfb = new RFB(this.novncElem, url, options)
      this.addEventListeners()
      this.rfb.viewOnly = viewOnly
      this.rfb.scaleViewport = scaleViewport // if the remote session is smaller than HTML container, the view will be centered
      this.rfb.resizeSession = resizeSession
    } catch (e) {

componentDidMount() {
    const {
      host,
      port,
      path,
      encrypt,
      resizeSession,
      viewOnly,
      shared,
      credentials,
      repeaterID,
      vncLogging,
      onInitFailed
    } = this.props;

    NovncLog.init_logging(vncLogging);
    try {
      const protocol = encrypt ? 'wss' : 'ws';
      const url = `${protocol}://${host}:${port}/${path}`;

      const options = {
        repeaterID,
        shared,
        credentials
      };

      this.rfb = new RFB(this.novncElem, url, options);
      this.rfb.addEventListener('connect', this.onConnected);
      this.rfb.addEventListener('disconnect', this.onDisconnected);
      this.rfb.addEventListener('securityfailure', this.onSecurityFailure);
      this.rfb.viewOnly = viewOnly;
      this.rfb.scaleViewport = false; // if the remote session is smaller than HTML container, the view will be centered

return false;
              };

              function connected(e) {
                $log.debug('RFB Connected');
              }

              function disconnected(e) {
                $log.debug('RFB disconnected');
              }

              var host = $location.host();
              var port = $location.port();
              var target = element[0].firstElementChild;
              try {
                rfb = new RFB(
                    target, 'wss://' + host + ':' + port + '/kvm/0', {});

                rfb.addEventListener('connect', connected);
                rfb.addEventListener('disconnect', disconnected);
              } catch (exc) {
                $log.error(exc);
                updateState(
                    null, 'fatal', null,
                    'Unable to create RFB client -- ' + exc);
                return;  // don't continue trying to connect
              };

              scope.openWindow = function() {
                window.open(
                    '#/server-control/kvm-window', 'Kvm Window',
                    'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=1125,height=900');

async _connect(view, displayUrl) {
        if (this._rfbClient) { 
            console.log('An RFB client already appears to be connected, returning')
            return 
        }
        console.log('Creating RFB connection')
        this._rfbClient = new RFB(view, displayUrl)
        this._rfbClient.addEventListener('connect', (ev) => { this._connectedToRFBServer(ev) })
        this._rfbClient.addEventListener('disconnect', (ev) => { this._disconnectedFromRFBServer(ev) })
        this._rfbClient.addEventListener('clipboard', (ev) => { this._handleRecvClipboard(ev) })
        this._rfbClient.resizeSession = true
        this._rfbClient.scaleViewport = true
    }

$onInit() {
    this.connected = false;
    this.status = STATUS_CONNECTING;

    const rfbUrl = `wss://${this.host}:${this.port}/`;

    const rfbConfig = {
      credentials: {
        password: this.password,
      },
      wsProtocols: ['binary', 'base64'],
      shared: true,
      repeaterID: '',
    };

    this.rfb = new RFB(
      document.getElementById('noVNC_screen'),
      rfbUrl,
      rfbConfig,
    );

    this.rfb.addEventListener('connect', () => {
      this.rfb.background = '#000';
      this.$timeout(() => {
        this.connected = true;
        this.status = STATUS_CONNECTED;
      });
    });

    this.rfb.addEventListener('disconnect', () => {
      this.$timeout(() => {
        this.connected = false;

async _connect (retry) {
    this._socket = new Websock()
    this._socket.open(this._addressGetter.audioURL())
    this._socket.binaryType = 'arraybuffer'
    this._socket.on('close', (event) => {
      if (!event.wasClean && (event.code === 1006 && !retry)) {
        this._userStore.dispatch('refreshToken')
          .then(() => {
            this._connect(true)
          })
          .catch((err) => {
            this.emit(Events.error, err)
            throw err
          })
        return
      }
      this.stopRecording()
      if (!event.wasClean || (event.code !== 1000 && event.code !== 1005)) {

createRFB(link, port, session, secure) {
        const rfb = new RFB(this.canvas, `${secure ? "wss" : "ws"}://${link.hostname}:${port}/ws/vnc/${session}`, {
            credentials: {
                password: "selenoid",
            },
        });

        rfb.addEventListener("connect", this.onVNCConnect);
        rfb.addEventListener("disconnect", this.onVNCDisconnect);

        rfb.scaleViewport = true;
        rfb.resizeSession = true;
        rfb.viewOnly = true;
        return rfb;
    }

$(document).on('ContentLoad', () => {
  const vncScreen = $('#noVNC_screen');

  if (vncScreen.length) {
    $('#sendCtrlAltDelButton').on('click', sendCtrlAltDel);

    const protocol = $('#vnc').data('encrypt') ? 'wss' : 'ws';
    const host = window.location.hostname;
    const port = $('#vnc').attr('data-port');
    const url = `${protocol}://${host}:${port}`;
    const password = $('#vnc').attr('data-password');

    rfb = new RFB(vncScreen.get(0), url, {
      credentials: {
        password,
      },
    });

    rfb.addEventListener('connect', connectFinished);
    rfb.addEventListener('disconnect', disconnectFinished);
    rfb.addEventListener('securityfailure', securityFailed);

    showStatus('disconnected', __('Loading...'));
  }
});