First successful VNC connection

virtweb_backend/Cargo.lock

@@ -314,6 +314,24 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "actix-web-actors"
+version = "4.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf6e9ccc371cfddbed7aa842256a4abc7a6dcac9f3fce392fe1d0f68cfd136b2"
+dependencies = [
+ "actix",
+ "actix-codec",
+ "actix-http",
+ "actix-web",
+ "bytes",
+ "bytestring",
+ "futures-core",
+ "pin-project-lite",
+ "tokio",
+ "tokio-util",
+]
+
 [[package]]
 name = "actix-web-codegen"
 version = "4.2.2"
@@ -614,9 +632,9 @@ checksum = "1fd0f2584146f6f2ef48085050886acf353beff7305ebd1ae69500e27c67f64b"
 
 [[package]]
 name = "bytes"
-version = "1.4.0"
+version = "1.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89b2fd2a0dcf38d7971e2194b6b6eebab45ae01067456a7fd93d5547a61b70be"
+checksum = "a2bd12c1caf447e69cd4528f47f94d203fd2582878ecb9e9465484c4148a8223"
 
 [[package]]
 name = "bytestring"
@@ -1026,6 +1044,21 @@ dependencies = [
  "percent-encoding",
 ]
 
+[[package]]
+name = "futures"
+version = "0.3.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23342abe12aba583913b2e62f22225ff9c950774065e4bfb61a19cd9770fec40"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
 [[package]]
 name = "futures-channel"
 version = "0.3.28"
@@ -1033,6 +1066,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "955518d47e09b25bbebc7a18df10b81f0c766eaf4c4f1cccef2fca5f2a4fb5f2"
 dependencies = [
  "futures-core",
+ "futures-sink",
 ]
 
 [[package]]
@@ -1041,6 +1075,17 @@ version = "0.3.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4bca583b7e26f571124fe5b7561d49cb2868d79116cfa0eefce955557c6fee8c"
 
+[[package]]
+name = "futures-executor"
+version = "0.3.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccecee823288125bd88b4d7f565c9e58e41858e47ab72e8ea2d64e93624386e0"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
 [[package]]
 name = "futures-io"
 version = "0.3.28"
@@ -1076,6 +1121,7 @@ version = "0.3.28"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26b01e40b772d54cf6c6d721c1d1abd0647a0106a12ecaa1c186273392a69533"
 dependencies = [
+ "futures-channel",
  "futures-core",
  "futures-io",
  "futures-macro",
@@ -2509,14 +2555,18 @@ dependencies = [
  "actix",
  "actix-cors",
  "actix-files",
+ "actix-http",
  "actix-identity",
  "actix-multipart",
  "actix-remote-ip",
  "actix-session",
  "actix-web",
+ "actix-web-actors",
  "anyhow",
+ "bytes",
  "clap",
  "env_logger",
+ "futures",
  "futures-util",
  "image",
  "lazy-regex",
@@ -2531,6 +2581,7 @@ dependencies = [
  "sysinfo",
  "tempfile",
  "thiserror",
+ "tokio",
  "url",
  "uuid",
  "virt",

virtweb_backend/Cargo.toml

@@ -18,6 +18,8 @@ actix-session = { version = "0.8.0", features = ["cookie-session"] }
 actix-identity = "0.6.0"
 actix-cors = "0.6.4"
 actix-files = "0.6.2"
+actix-web-actors = "4.2.0"
+actix-http = "3.4.0"
 serde = { version = "1.0.189", features = ["derive"] }
 serde_json = "1.0.107"
 serde-xml-rs = "0.6.0"
@@ -33,4 +35,7 @@ uuid = { version = "1.4.1", features = ["v4", "serde"] }
 lazy-regex = "3.0.2"
 thiserror = "1.0.49"
 image = "0.24.7"
-rand = "0.8.5"
+rand = "0.8.5"
+bytes = "1.5.0"
+tokio = "1.32.0"
+futures = "0.3.28"

virtweb_backend/src/actors/mod.rs

@@ -1,2 +1,3 @@
 pub mod libvirt_actor;
+pub mod vnc_actor;
 pub mod vnc_tokens_actor;

virtweb_backend/src/actors/vnc_actor.rs

@@ -0,0 +1,193 @@
+use actix::{Actor, ActorContext, AsyncContext, Handler, StreamHandler};
+use actix_http::ws::Item;
+use actix_web_actors::ws;
+use actix_web_actors::ws::Message;
+use bytes::Bytes;
+use image::EncodableLayout;
+use std::path::Path;
+use std::time::{Duration, Instant};
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::net::unix::{OwnedReadHalf, OwnedWriteHalf};
+use tokio::net::UnixStream;
+
+/// How often heartbeat pings are sent
+const HEARTBEAT_INTERVAL: Duration = Duration::from_secs(5);
+
+/// How long before lack of client response causes a timeout
+const CLIENT_TIMEOUT: Duration = Duration::from_secs(20);
+
+#[derive(thiserror::Error, Debug)]
+enum VNCError {
+    #[error("Socket file does not exists!")]
+    SocketDoesNotExists,
+}
+
+pub struct VNCActor {
+    /// Qemu -> WS
+    read_half: Option<OwnedReadHalf>,
+
+    /// WS -> Qemu
+    write_half: OwnedWriteHalf,
+
+    // Client must respond to ping at a specific interval, otherwise we drop connection
+    hb: Instant,
+}
+
+impl VNCActor {
+    pub async fn new(socket_path: &str) -> anyhow::Result<Self> {
+        let socket_path = Path::new(socket_path);
+
+        if !socket_path.exists() {
+            return Err(VNCError::SocketDoesNotExists.into());
+        }
+
+        let socket = UnixStream::connect(socket_path).await?;
+        let (read_half, write_half) = socket.into_split();
+
+        Ok(Self {
+            read_half: Some(read_half),
+            write_half,
+            hb: Instant::now(),
+        })
+    }
+
+    /// helper method that sends ping to client every second.
+    ///
+    /// also this method checks heartbeats from client
+    fn hb(&self, ctx: &mut ws::WebsocketContext<Self>) {
+        ctx.run_interval(HEARTBEAT_INTERVAL, |act, ctx| {
+            // check client heartbeats
+            if Instant::now().duration_since(act.hb) > CLIENT_TIMEOUT {
+                // heartbeat timed out
+                log::warn!("WebSocket Client heartbeat failed, disconnecting!");
+                ctx.stop();
+                return;
+            }
+
+            ctx.ping(b"");
+        });
+    }
+
+    fn send_to_socket(&mut self, bytes: Bytes, ctx: &mut ws::WebsocketContext<Self>) {
+        log::trace!("Received {} bytes for VNC socket", bytes.len());
+
+        if let Err(e) = futures::executor::block_on(self.write_half.write(bytes.as_bytes())) {
+            log::error!("Failed to relay bytes to VNC socket {e}");
+            ctx.close(None);
+        }
+    }
+
+    fn start_qemu_to_ws_end(&mut self, ctx: &mut ws::WebsocketContext<Self>) {
+        let mut read_half = self.read_half.take().unwrap();
+        let addr = ctx.address();
+        let future = async move {
+            let mut buff: [u8; 5000] = [0; 5000];
+            loop {
+                match read_half.read(&mut buff).await {
+                    Ok(l) => {
+                        if l == 0 {
+                            log::error!("Got empty read. Closing read end...");
+                            addr.do_send(CloseWebSocketReq);
+                            return;
+                        }
+
+                        let to_send = SendBytesReq(Vec::from(&buff[0..l]));
+                        if let Err(e) = addr.send(to_send).await {
+                            log::error!("Failed to send to websocket. Stopping now... {:?}", e);
+                            return;
+                        }
+                    }
+                    Err(e) => {
+                        log::error!("Failed to read from remote socket. Stopping now... {:?}", e);
+                        break;
+                    }
+                };
+            }
+
+            log::info!("Exited read loop");
+        };
+
+        tokio::spawn(future);
+    }
+}
+
+impl Actor for VNCActor {
+    type Context = ws::WebsocketContext<Self>;
+
+    fn started(&mut self, ctx: &mut Self::Context) {
+        self.hb(ctx);
+        self.start_qemu_to_ws_end(ctx);
+    }
+}
+
+impl StreamHandler<Result<Message, ws::ProtocolError>> for VNCActor {
+    fn handle(&mut self, msg: Result<Message, ws::ProtocolError>, ctx: &mut Self::Context) {
+        match msg {
+            Ok(Message::Ping(msg)) => ctx.pong(&msg),
+
+            Ok(Message::Text(_text)) => {
+                log::error!("Received unexpected text on VNC WebSocket!");
+            }
+
+            Ok(Message::Binary(bin)) => {
+                log::info!("Forward {} bytes to VNC server", bin.len());
+                self.send_to_socket(bin, ctx);
+            }
+
+            Ok(Message::Continuation(msg)) => match msg {
+                Item::FirstText(_) => {
+                    log::error!("Received unexpected split text!");
+                    ctx.close(None);
+                }
+                Item::FirstBinary(bin) | Item::Continue(bin) | Item::Last(bin) => {
+                    self.send_to_socket(bin, ctx);
+                }
+            },
+
+            Ok(Message::Pong(_)) => {
+                log::trace!("Received PONG message");
+                self.hb = Instant::now();
+            }
+
+            Ok(Message::Close(r)) => {
+                log::info!("WebSocket closed. Reason={r:?}");
+                ctx.close(r);
+            }
+
+            Ok(Message::Nop) => {
+                log::debug!("Received Nop message")
+            }
+
+            Err(e) => {
+                log::error!("WebSocket protocol error! {e}");
+                ctx.close(None)
+            }
+        }
+    }
+}
+
+#[derive(actix::Message)]
+#[rtype(result = "()")]
+pub struct SendBytesReq(Vec<u8>);
+
+impl Handler<SendBytesReq> for VNCActor {
+    type Result = ();
+
+    fn handle(&mut self, msg: SendBytesReq, ctx: &mut Self::Context) -> Self::Result {
+        log::trace!("Send {} bytes to WS", msg.0.len());
+        ctx.binary(msg.0);
+    }
+}
+
+#[derive(actix::Message)]
+#[rtype(result = "()")]
+pub struct CloseWebSocketReq;
+
+impl Handler<CloseWebSocketReq> for VNCActor {
+    type Result = ();
+
+    fn handle(&mut self, _msg: CloseWebSocketReq, ctx: &mut Self::Context) -> Self::Result {
+        log::trace!("Close websocket, because VNC socket has terminated");
+        ctx.close(None);
+    }
+}

virtweb_backend/src/controllers/mod.rs

@@ -83,6 +83,12 @@ impl From<reqwest::header::ToStrError> for HttpErr {
     }
 }
 
+impl From<actix_web::Error> for HttpErr {
+    fn from(value: actix_web::Error) -> Self {
+        HttpErr::Err(std::io::Error::new(ErrorKind::Other, value.to_string()).into())
+    }
+}
+
 impl From<HttpResponse> for HttpErr {
     fn from(value: HttpResponse) -> Self {
         HttpErr::HTTPResponse(value)

virtweb_backend/src/controllers/vm_controller.rs

@@ -1,8 +1,10 @@
+use crate::actors::vnc_actor::VNCActor;
 use crate::actors::vnc_tokens_actor::VNCTokensManager;
 use crate::controllers::{HttpResult, LibVirtReq};
 use crate::libvirt_lib_structures::{DomainState, DomainXMLUuid};
 use crate::libvirt_rest_structures::VMInfo;
-use actix_web::{web, HttpResponse};
+use actix_web::{web, HttpRequest, HttpResponse};
+use actix_web_actors::ws;
 
 #[derive(serde::Serialize)]
 struct VMInfoAndState {
@@ -231,3 +233,31 @@ pub async fn vnc_token(
         }
     })
 }
+
+#[derive(serde::Deserialize)]
+pub struct VNCTokenQuery {
+    token: String,
+}
+
+/// Start a VNC connection
+pub async fn vnc(
+    client: LibVirtReq,
+    manager: web::Data<VNCTokensManager>,
+    token: web::Query<VNCTokenQuery>,
+    req: HttpRequest,
+    stream: web::Payload,
+) -> HttpResult {
+    let domain_id = manager.consume_token(token.0.token).await?;
+    let domain = client.get_single_domain(domain_id).await?;
+
+    let socket_path = match domain.devices.graphics {
+        None => {
+            log::error!("Attempted to open VNC for a domain where VNC is disabled!");
+            return Ok(HttpResponse::ServiceUnavailable().json("VNC is not enabled!"));
+        }
+        Some(g) => g.socket,
+    };
+
+    log::info!("Start VNC connection on socket {socket_path}");
+    Ok(ws::start(VNCActor::new(&socket_path).await?, &req, stream)?)
+}

virtweb_backend/src/main.rs

@@ -165,6 +165,7 @@ async fn main() -> std::io::Result<()> {
                 "/api/vm/{uid}/vnc_token",
                 web::get().to(vm_controller::vnc_token),
             )
+            .route("/api/vnc", web::get().to(vm_controller::vnc))
     })
     .bind(&AppConfig::get().listen_address)?
     .run()

virtweb_frontend/package-lock.json

@@ -33,6 +33,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.15.0",
         "react-scripts": "5.0.1",
+        "react-vnc": "^1.0.0",
         "typescript": "^4.9.5",
         "uuid": "^9.0.1",
         "web-vitals": "^2.1.4"
@@ -15283,6 +15284,16 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-vnc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-vnc/-/react-vnc-1.0.0.tgz",
+      "integrity": "sha512-LE9i2H6X/njuzbJTRIsopadgyka18k5avUMWDj6kuRsis5O192qm2EIqJ4l8xRRpwrKVFrOkAC5wIgw+PBNAyw==",
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0",
+        "react-scripts": ">=4.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -28921,6 +28932,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-vnc": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-vnc/-/react-vnc-1.0.0.tgz",
+      "integrity": "sha512-LE9i2H6X/njuzbJTRIsopadgyka18k5avUMWDj6kuRsis5O192qm2EIqJ4l8xRRpwrKVFrOkAC5wIgw+PBNAyw==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

virtweb_frontend/package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
+    "react-vnc": "^1.0.0",
     "typescript": "^4.9.5",
     "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"

virtweb_frontend/src/App.tsx

@@ -18,6 +18,7 @@ import { SysInfoRoute } from "./routes/SysInfoRoute";
 import { VMListRoute } from "./routes/VMListRoute";
 import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
 import { VMRoute } from "./routes/VMRoute";
+import { VNCRoute } from "./routes/VNCRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -44,6 +45,7 @@ export function App() {
           <Route path="vms/new" element={<CreateVMRoute />} />
           <Route path="vm/:uuid" element={<VMRoute />} />
           <Route path="vm/:uuid/edit" element={<EditVMRoute />} />
+          <Route path="vm/:uuid/vnc" element={<VNCRoute />} />
 
           <Route path="sysinfo" element={<SysInfoRoute />} />
           <Route path="*" element={<NotFoundRoute />} />

virtweb_frontend/src/api/VMApi.ts

@@ -69,6 +69,10 @@ export class VMInfo implements VMInfoInterface {
   get EditURL(): string {
     return `/vm/${this.uuid}/edit`;
   }
+
+  get VNCURL(): string {
+    return `/vm/${this.uuid}/vnc`;
+  }
 }
 
 export class VMApi {
@@ -230,4 +234,27 @@ export class VMApi {
       jsonData: { keep_files },
     });
   }
+
+  /**
+   * Get a oneshot VNC connect URL
+   */
+  static async OneShotVNCURL(vm: VMInfo): Promise<string> {
+    const token = (
+      await APIClient.exec({
+        uri: `/vm/${vm.uuid}/vnc_token`,
+        method: "GET",
+      })
+    ).data.token;
+
+    let baseWSURL = APIClient.backendURL();
+    if (!baseWSURL.includes("://"))
+      baseWSURL =
+        window.location.protocol + "://" + window.location.hostname + baseWSURL;
+
+    return (
+      baseWSURL.replace("http", "ws") +
+      "/vnc?token=" +
+      encodeURIComponent(token)
+    );
+  }
 }

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -0,0 +1,67 @@
+import { CircularProgress } from "@mui/material";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { VncScreen } from "react-vnc";
+import { VMApi, VMInfo } from "../api/VMApi";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+
+export function VNCRoute(): React.ReactElement {
+  const { uuid } = useParams();
+
+  const [vm, setVM] = React.useState<VMInfo | undefined>();
+
+  const load = async () => {
+    setVM(await VMApi.GetSingle(uuid!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      load={load}
+      errMsg="Failed to load VM information!"
+      build={() => <VNCInner vm={vm!} />}
+    />
+  );
+}
+
+function VNCInner(p: { vm: VMInfo }): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const [url, setURL] = React.useState<string | undefined>();
+
+  const load = async () => {
+    try {
+      const u = await VMApi.OneShotVNCURL(p.vm);
+      console.info(u);
+      setURL(u);
+    } catch (e) {
+      console.error(e);
+      snackbar("Failed to initialize VNC connection!");
+    }
+  };
+
+  React.useEffect(() => {
+    if (url !== undefined) {
+      return;
+    }
+
+    load();
+  });
+
+  if (url === undefined)
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        <CircularProgress />
+      </div>
+    );
+
+  return <VncScreen url={url} />;
+}

virtweb_frontend/src/widgets/forms/CheckboxInput.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, FormControlLabel, Typography } from "@mui/material";
+import { Checkbox, FormControlLabel } from "@mui/material";
 
 export function CheckboxInput(p: {
   editable: boolean;

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -1,4 +1,5 @@
 import PauseIcon from "@mui/icons-material/Pause";
+import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import ReplayIcon from "@mui/icons-material/Replay";
@@ -10,6 +11,7 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { VMApi, VMInfo, VMState } from "../../api/VMApi";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
@@ -20,6 +22,7 @@ export function VMStatusWidget(p: {
   onChange?: (s: VMState) => void;
 }): React.ReactElement {
   const snackbar = useSnackbar();
+  const navigate = useNavigate();
 
   const [state, setState] = React.useState<undefined | VMState>(undefined);
 
@@ -54,6 +57,19 @@ export function VMStatusWidget(p: {
     <div style={{ display: "inline-flex" }}>
       <Typography>{state}</Typography>
 
+      {
+        /* VNC console */ p.vm.vnc_access && (
+          <ActionButton
+            currState={state}
+            cond={["Running"]}
+            icon={<PersonalVideoIcon />}
+            tooltip="Graphical remote control over the VM"
+            performAction={async () => navigate(p.vm.VNCURL)}
+            onExecuted={() => {}}
+          />
+        )
+      }
+
       {/* Start VM */}
       <ActionButton
         currState={state}