@novnc/novnc Usage with React App

[Alex Haight]

Hi all,

I'm having a little trouble using the npm @novnc/novnc library in my react app.

My gist of my code looks as follows:

import RFB from '@novnc/novnc'

default function NoVNC(props){

   useEffect(() => {

      let rfb = new RFB(document.getElementById('novnc-display), ws://<connection_ip>)

      rfb.addEventListener('connect', (e) => console.log(e))

      rfb.addEventListener('disconnect', (e) => console.log(e))

      rfb.scaleViewport = true

      rfb.resizeSession = true

   })

   return(

      <>

         <div id="novnc-display>

         </div>

      </>

   )

}

I can see that a canvas is being rendered inside my 'novnc-display' div, however, it's not displaying anything and is 0 px in height and 0 px in width. The event listener for connect never fires, but I do sometimes get the disconnect event. I've confirmed that my connection is valid through a standalone VNC client viewer.

I've also tried importing RFB from '@novnc/novnc/core/rfb' with no luck. Am I doing something incorrectly?

[Samuel Mannehed]

Hi Alex,

Could you verify that you have a websocket proxy in place? Perhaps your VNC server has a built in websocket proxy, otherwise you should set up your own (i.e. Websockify).