typescript - how do i implement xterm console via proxmox api in nuxt 3 - Stack Overflow

admin管理员组

文章数量:1396858

currently i'm coding a nuxt 3 / vue / typescript customer panel for my server hosting company. i'm facing issues when trying to implement shell / xterm from lxc / kvm servers on the slug page in my panel /panel/.../server/

it takes around 3-5 seconds, then it shows: Verbindung zur Proxmox Shell geschlossen.

I do also get a valid PVETicket, i logged it as a verification for myself in the console.

Any help or troubleshooting would be appreciated!

here is my backend /api/proxmox/console/terminal.ts:

import { defineEventHandler, getQuery } from "h3";
import { $fetch } from "ofetch";

export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const vmid = query.vmid as string;
  const node = query.node as string;
  const type = query.type as string; // "lxc" oder "qemu"

  if (!vmid || !node || !type) {
    return { error: "VMID, Node oder Typ fehlt." };
  }

  try {

    console.log(`Terminal-Anfrage für VMID ${vmid} auf ${node}`);

    const proxmoxApiUrl = `https://xxx:8006/api2/json/nodes/${node}/${type.toLowerCase()}/${vmid}/termproxy`;

    const response = await $fetch(proxmoxApiUrl, {
      method: "POST",
      headers: {
        "Authorization": `PVEAPIToken=xxx`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "", // WICHTIG: API benötigt einen leeren Body!
    });

        console.log("Proxmox API Antwort:", response);
    
    
        return response;
      } catch (error) {
        console.error("Fehler bei API-Anfrage:", error);
        return { error: "Fehler beim Starten der Terminal-Session.", details: error };
      }
    });

here is my xterm component vue:

<template>
    <div class="terminal-container">
      <div ref="terminal" class="h-96 w-full bg-black"></div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from "vue";
  
  const props = defineProps({
    vmid: String,
    node: String,
    type: String, // "lxc" oder "qemu"
  });
  
  const terminal = ref(null);
  let term = null;
  let socket = null;
  
  onMounted(async () => {
    if (!props.vmid || !props.node || !props.type) {
      console.error("Fehlende Server-Daten für Konsole");
      return;
    }
  
    // **WICHTIG:** xterm.js und Addons erst im Client importieren!
    if (process.client) {
      const { Terminal } = await import("@xterm/xterm");
      const { FitAddon } = await import("@xterm/addon-fit");
  
      term = new Terminal({
        cursorBlink: true,
        fontSize: 14,
        theme: {
          background: "#000000",
          foreground: "#ffffff",
        },
      });
  
      const fitAddon = new FitAddon();
      term.loadAddon(fitAddon);
      term.open(terminal.value);
      fitAddon.fit();
  
      try {
        const response = await fetch(`/api/proxmox/console/terminal?vmid=${props.vmid}&node=${props.node}&type=${props.type}`);
        const data = await response.json();
  
        if (!data || !data.data) {
          console.error("Fehler beim Abrufen der Terminal-Daten", data);
          return;
        }
        const { port, ticket } = data.data;
        const websocketUrl = `wss://xxx:8006/api2/json/nodes/${props.node}/${props.type.toLowerCase()}/${props.vmid}/vncwebsocket?port=${port}&vncticket=${encodeURIComponent(ticket)}`;
  
        socket = new WebSocket(websocketUrl);
  
        socket.onmessage = (event) => {
          term.write(event.data);
        };
  
        term.onData((data) => {
          socket.send(data);
        });
  
        socket.onclose = () => {
          term.write("\r\nVerbindung zur Proxmox Shell geschlossen.");
        };
      } catch (error) {
        console.error("Fehler beim Starten des Terminals:", error);
      }
    }
  });
  </script>
  
  <style>
  .terminal-container {
    border-radius: 8px;
    overflow: hidden;
  }
  </style>
  

本文标签： typescripthow do i implement xterm console via proxmox api in nuxt 3Stack Overflow