I am small white, if there is a problem, but also hope to point out, humbly seek advice.

Vue uses noVNC to implement virtual machine functions

noVNC API

Github

Let’s start with the basics

The constructor

RFB(target, url [, options])

Returns an RFB instance representing a single connection to the VNC server. It communicates using websockets that must provide the standard RFB protocol stream.

parameter

  • target: HTMLElement

If the RFB mounts a DOM element, a canvas will be appended to the DOM element to host the virtual window. The DOM element content will not be emptied. Note that you need to specify the width and height of the mount container.

  • url: String

A valid WebSocket URL

  • options: Object

    • shared: Boolean

    Specifies whether the remote server is shared. If the remote server is not shared, disconnect other clients. The default value is true

    • credentials: Object

    The specified credentials are provided to the server when validated.

    - username: String Indicates the user for authentication. - Password: String Indicates the password of the user. - Target: String Indicates the target machine or sessionCopy the code
    • repeaterID: String

    Specify VNC repeater

    • wsProtocols: Array

    Specifies the subprotocol used in the WebSocket connection, null by default

Post code

  • HTML structure

  • Build an RFB instance

Introduction of the event

  • Connect: Triggered when the RFB instance completes the handshake with the server
  • Disconnect: Triggered when the RFB instance opens a connection with the server
  • Credentialsrequired: When creating a connection, you need to provide more credentials, which are sent through the instance method rfb.sendCredentials ()
  • Securityfailure: Triggered when security negotiation with the server fails
  • Clipboard: Triggered when clipboard data is received from the server
  • Bell: Triggered when an audible bell request is received from the server
  • Desktopname: triggered when the remote desktopname is changed
  • Capabilities: RFB. Capabilities is triggered when capabilities are updated

Post code

  • Initialize the RFB object to listen for events

Instance attributes

viewOnly: Boolean

The default is false, disables sending of any mouse or keyboard events to the remote server and cannot be operated.

focusOnClick: Boolean

By default true, the keyboard focus automatically shifts to the remote session when a MouseDown or TouchStart event is received.

clickViewport: Boolean

The default is false, whether the remote session window should be clipped to fit the container, or if false, overflow will be handled via scroll bars.

dragViewport: Boolean

The default is false, disables sending of any mouse or keyboard events to the remote server and cannot be operated.

scaleViewport: Boolean

The default is false to automatically scale the remote session to fit the container. If false is specified, the remote session smaller than the container is centered. If larger than the container, it is handled according to clipViewport.

resizeSession: Boolean

The default is false, whether to send a request to resize a remote session whenever the container resizes.

showDotCursor: Boolean

The default is false, and if the server has an invisible cursor, the dot cursor should be displayed instead of a zero-size or fully transparent cursor.

background: String

Default RGB (40, 40, 40), specifies the background color.

qualityLevel: Integer [0-9]

The default is 6, specifying the image quality.

Other attributes to read the source code or related documentation…

Post code

  • Modify the properties after instantiating RFB

Instance methods

RFB.disconnect()

Manual disconnection

RFB.sendCredentials(credentials)

Sends authentication information to the server. This method should be called after the credentialSRequired event is triggered.

Rfb. sendKey(keysym, code [, down])

Send keyboard events and take quick notes.

RFB.sendCtrlAltDel()

Send the Ctrl-Alt-del shortcut event, which is a sendKey wrapper.

RFB.focus()

Focus events, keyboard events will be sent to the remote server

RFB.blur()

Out of focus, keyboard events will no longer be sent to the remote server

RFB.machineShutdown()

To turn it off

RFB.machineReboot()

restart

RFB.machineReset()

Reset computer

RFB.clipboardPasteFrom(text)

Sends clipboard content to the server.

 

Note: sendKey() should be more common, but I’ll cover this separately

  • RFB.sendKey( keysym, code [, down] )
  • Keysym: type long, specifying the RFB key. (I honestly don’t know what it is, but I exported ‘core/input/keysym.js’ from source)
  • Code: String. Valid values are KeyboardEvent. Code. Keyboard event object (Try it out)
  • Down: Boolean type that specifies whether the press or release event is triggered. If undefined, both press and release will be sent.

Remark:

If keysym is valid, code can be null. Conversely, keysym can be specified as 0 if code specifies a valid value.

2. Only one key can be sent at a time

3. If the combination key is sent, read on for special handling below.

Post code

  • SendKey call

5. Special treatment

The essence of this article is mainly based on sendKey method, and will be supplemented in the future for other uses or special cases.

Use shortcut keys (combination keys)

  • Problem: Browser shortcuts or system shortcuts cannot be sent remotely.

  • Solution: External shortcut key drop-down box, select and send manually, use sendKey method.

  • Code: through the third parameter of sengKey down, specify the sending order to achieve the operation of simulating combination key key and release.

  • SendCtrlAltDel instance (‘ core/rfb.js’)