The web KVM isn't showing the terminal screen

[huyle-anh]

Describe the bug:
The Web KVM isn't showing the terminal screen.
Compile webui-vue at commit: 918526f20c16a05c261a56814657942a707323dd

Step to Reproduce:

1. Go to 'Web page → Operations'
2. Click on 'KVM page'
3. See screen: KVM is not displaying the interface screen; it just displays a white screen.

Expected behavior:

• The KVM displays the interface screen, and the user can type on the terminal screen.

Screenshots:

• OS: MACOS Ventura - Version 13.7
• Browser: Chrome
• Version: 130.0.6723.116

[huyle-anh]

Also, I created the patch to fix this as follows, which resulted in the KVM displaying the terminal screen:

diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 6e2a4ea..4fff925 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -112,10 +112,11 @@ export default {
     },
     openTerminal() {
       const token = this.$store.getters['authentication/token'];
-      this.rfb = new RFB(
-        this.$refs.panel,
-        `wss://${window.location.host}/kvm/0`,
-        { wsProtocols: [token] },
+      this.rfb = Object.assign(
+        new RFB(this.$refs.panel, `wss://${window.location.host}/kvm/0`, {
+          wsProtocols: [token],
+        }),
+        new RFB(),
       );

After applying the patch, the KVM displays the terminal screen. Now, when I switch to another page multiple times and then go back to the KVM page, I randomly encounter an issue where the KVM terminal screen does not display. The journalctl logs get an error.

Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:200] Error closing websocket stream truncated [asio.ssl.stream:1]
Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:264] doRead error Operation canceled [system:125 at /usr/include/boost/beast/websocket/impl/stream_impl.hpp:355:13 in function 'bool boost::beast::websocket::stream< <template-parameter-1-1>, <anonymous> >::impl_type::check_stop_now(boost::beast::error_code&)']

Does anyone have any ideas or suggestions for solving this problem?

[mdmillerii]

Thanks for reporting the source you are using. Please adjust your reference to the source hash to remove the > quoting as this defeats GitHub Markdown from automatically linking to the source. (If you remove all quoting the SHA will be shortened to a link and your description will follow as plain text, or you can use link format to specify the link text to display. You can follow
Markdown is supported below the input box to find these references later).

Your code having been reformatted before generating the diff makes it hard to spot what you changed. There obvious change is replacing new RFB(args...) with Object.Assign(new RFB(...args), new RFB (),).
This seems odd to me in that it creates a [RFB object(https://github.com/novnc/noVNC/blob/master/docs/API.md#constructor) and a customized object and overwrites anything returned from the object constructed without required arguments over the customized one. This would be strange unless the library had state leak from the empty and invalid constructor method.

The diagnostics you reported

Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:200] Error closing websocket stream truncated [asio.ssl.stream:1]
Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:264] doRead error Operation canceled [system:125 at /usr/include/boost/beast/websocket/impl/stream_impl.hpp:355:13 in function 'bool boost::beast::websocket::stream< <template-parameter-1-1>, <anonymous> >::impl_type::check_stop_now(boost::beast::error_code&)']

appears to be a connection was closed without the expected websocket shutdown handshake but would need realtime monitoring to see what action triggered them

However, I'll also mention there was a recent discussion in discord #webui of others reporting similar problems with the GUI displaying the KVM and/or SOL window after the switch to vue3.

That discussion showed an apparent object that was 0 sized viewport.

But this does make me curious what creates vertical displacement for the object? (Might the invalid constructed object have a nonzero size? ) The div is class terminalClass which is an empty string and the RFB viewport is scaled and clipped to it's parent, which can be detected with the clippingViewport status property and the
clippingviewport event

[huyle-anh]

Thanks for your reply with the information,
Updated #128 (comment)
I've seen the big change from Vue2 to Vue3 at 7d6b44c.

Basically, about using new RFB() to create a new object in Vue 2 and Vue 3 does not significantly differ in terms of operation. Both versions support creating new objects from a class or constructor function, same with scaleViewport & clipViewport on both the versions.

Regarding the clues you provided, I will find more and provide them in the next comments.