Rebooting or Shutting Down Host

[candiedoperation]

I do have a brief idea of implementing the disconnect method by forwardRef() but I do not find a way to implement the RFB.machineReboot() or RFB.machineShutdown() functions listed in the noVNC API.md

[roerohan]

Hey @candiedoperation

Currently, there are no methods in react-vnc which implement RFB.machineReboot() or RFB.machineShutdown(). However, the rfb object from noVNC is exposed when the 'connect' event is fired. So, you can do something like:

<VncScreen
  url={vncUrl}
  scaleViewport
  debug
  ref={vncScreenRef}
  onConnect={(rfb) => {
    console.log('connected', rfb);
  }}
/>

You can use a ref to set the RFB object to your component scope.

function App() {
  const vncRfb = useRef(null);
  const vncScreenRef = useRef<React.ElementRef<typeof VncScreen>>(null);

  return (
    <VncScreen
      url={vncUrl}
      scaleViewport
      debug
      ref={vncScreenRef}
      onConnect={(rfb) => {
        console.log('connected', rfb);
        vncRfb.current = rfb;
      }}
    />
  )
}

You can use this rfb object to run any method that is described in the noVNC API.

[roerohan]

In #26, I've exposed the rfb object. So, if you have a code snippet like:

function App() {
  const vncScreenRef = useRef<React.ElementRef<typeof VncScreen>>(null);

  return (
    <VncScreen
      url={vncUrl}
      scaleViewport
      debug
      ref={vncScreenRef}
    />
  )
}

You can access the rfb object using vncScreenRef.current?.rfb. If the rfb object isn't set, it's value is null.

[roerohan]

In #28 , I've also added support for the following methods from RFB

sendCredentials,
sendKey,
sendCtrlAltDel,
focus,
blur,
machineShutdown,
machineReboot,
machineReset,
clipboardPaste

So, you could just do vncScreenRef.current?.machineShutdown() from the above example.

[firstdorsal]

Hey, this does not work for me. Nothing happens when the function is called. It says something about adding the "power" capability, how would one do that? Is there something that needs to be configured in the backend?

I am using it like this

import { PureComponent, CSSProperties, createRef } from "react";
//@ts-ignore
import { VncScreen, RFB } from "react-vnc";
import { Button } from "rsuite";

interface VNCProps {
    readonly className?: string;
    readonly style?: CSSProperties;
    readonly url: string;
}

interface VNCState {}

export default class VNC extends PureComponent<VNCProps, VNCState> {
    private vncRef = createRef<VncScreen>();
    constructor(props: VNCProps) {
        super(props);
        this.state = {};
    }

    componentDidMount = async () => {};

    reboot = () => {
        this.vncRef.current.rfb.machineReset();
    };

    render = () => {
        return (
            <div
                style={{ ...this.props.style }}
                className={`VNC w-full h-full${this.props.className ?? ""}`}
            >
                <Button onClick={this.reboot}>Reboot</Button>
                <div className="w-full h-full bg-[#000] ">
                    <VncScreen
                        url={this.props.url}
                        scaleViewport
                        background="#000000"
                        className="w-full h-full"
                        ref={this.vncRef}
                    />
                </div>
            </div>
        );
    };
}

[roerohan]

capabilities is a readonly field that's present in the RFB object's properties.
https://github.com/novnc/noVNC/blob/master/docs/API.md#properties

I haven't used it before, but here's what I understand from what I read.
Some VNC servers would have a power extension using which you can control the system power. When you use that VNC server with react-vnc, the RFB.properties function will have the power capability set to true. In that case, you can run machineReset or machineShutdown.