Simulate ctrl alt del in react-vnc

Start to using react-vnc to connect wss api (cloud server) on reactjs project

<VncScreen
      url='ws://your-vnc-url.com'
      scaleViewport
      background="#000000"
      style={{
        width: '75vw',
        height: '75vh',
      }}
      ref={ref}
    />

everything looks good and it connect successfully, but on windows screen of server I need press ctrl+alt+del to unlock, but I don't know how can I do this via react or react-vnc , is there any solution for this?

Is there any way to simulate ctrl+alt+del key on javascript or in react-vnc if not, so how can I press any key on vnc ?

Solution

The onConnect, onDisconnect, and onCredentialsRequired callbacks can accept a single parameter rfb. This parameter is the RFB object, which is described by noVNC. Learn more about the RFB object here.

The RFB object should provide a method called sendCtrlAltDel (see API). Maybe you can listen for a specific keypress and call this function instead.

EDIT:

You could receive the RFB object on the 'connect' event and use it later. Then you could create a button on your UI and invoke the rfb.sendCtrlAltDel() function when the button is clicked.

I'm not very familiar with React, but with the following example you might get the idea.

import { VncScreen } from 'react-vnc';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.rfb;
  }

  render() {
    return (
      <VncScreen
        url='ws://your-vnc-url.com'
        onConnect=(rfb) => this.rfb = rfb
        // ...
      />

      <button onclick="this.rfb.sendCtrlAltDel()">
        CTRL + ALT + DEL
      </button>
    );
  }
}

Edit: Solution for functional component:

import {VncScreen} from "react-vnc";
const ref = useRef();

    <VncScreen
        url={res.data.wssUrl}
        scaleViewport
        background="#000000"
        rfbOptions={
            {
                credentials: {
                    password: res.data.password
                }
            }
        }
        onConnect={(rfb) => ref}
        style={{
            width: '100%',
            height: '100vh',
        }}
        ref={ref}
        loadingUI={true}
    />

    <Button onClick={()=>ref.rfb.sendCtrlAltDel()}>ctrl+alt+del</Button>