py-web-ssh 0.1.0__py3-none-any.whl

webssh/static/app.js

@@ -0,0 +1,316 @@
+const terminalElement = document.querySelector("#terminal");
+const logsElement = document.querySelector("#logs");
+const statusElement = document.querySelector("#status");
+const sessionInput = document.querySelector("#session-id");
+const sessionLabel = document.querySelector("#session-label");
+const logsLink = document.querySelector("#logs-link");
+
+const term = new Terminal({
+  cursorBlink: true,
+  convertEol: false,
+  fontFamily: "Cascadia Mono, Consolas, Menlo, monospace",
+  fontSize: 14,
+  scrollback: 5000,
+  theme: {
+    background: "#0b0f14",
+    foreground: "#dbe7f3",
+    cursor: "#f8d66d",
+    selectionBackground: "#315f8c",
+    black: "#0b0f14",
+    red: "#f26d6d",
+    green: "#8fd694",
+    yellow: "#f8d66d",
+    blue: "#7db7ff",
+    magenta: "#c792ea",
+    cyan: "#82d7d1",
+    white: "#dbe7f3",
+    brightBlack: "#61707f",
+    brightRed: "#ff8a8a",
+    brightGreen: "#a6e3a1",
+    brightYellow: "#ffe08a",
+    brightBlue: "#9cc9ff",
+    brightMagenta: "#d9a8ff",
+    brightCyan: "#a5f3ed",
+    brightWhite: "#ffffff",
+  },
+});
+const fitAddon = new FitAddon.FitAddon();
+const serializeAddon = new SerializeAddon.SerializeAddon();
+term.loadAddon(fitAddon);
+term.loadAddon(serializeAddon);
+term.open(terminalElement);
+fitAddon.fit();
+
+let ws = null;
+let activeSessionId = localStorage.getItem("py-web-ssh-session") || "";
+let lastAppliedSeq = 0;
+let snapshotTimer = null;
+
+if (activeSessionId) {
+  sessionInput.value = activeSessionId;
+  updateSessionUi(activeSessionId);
+}
+
+window.addEventListener("resize", () => {
+  fitAddon.fit();
+  sendResize();
+});
+
+term.onData((data) => {
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    return;
+  }
+  ws.send(JSON.stringify({ type: "input", data: stringToBase64(data) }));
+});
+
+document.querySelector("#connect-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  setStatus("创建会话...");
+  const privateKey = await readPrivateKey();
+  const payload = {
+    host: valueOf("#host"),
+    port: Number(valueOf("#port") || 22),
+    username: valueOf("#username"),
+    password: valueOf("#password"),
+    private_key: privateKey,
+    private_key_passphrase: valueOf("#private-key-passphrase"),
+    allow_agent: checked("#allow-agent"),
+    look_for_keys: checked("#look-for-keys"),
+    legacy_algorithms: checked("#legacy-algorithms"),
+    strict_host_key: checked("#strict-host-key"),
+    term: "xterm-256color",
+    size: { cols: term.cols, rows: term.rows },
+  };
+
+  const response = await fetch("/api/sessions", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!response.ok) {
+    appendLogLine(`创建会话失败: ${await response.text()}`);
+    setStatus("创建失败");
+    return;
+  }
+  const result = await response.json();
+  activeSessionId = result.session_id;
+  localStorage.setItem("py-web-ssh-session", activeSessionId);
+  sessionInput.value = activeSessionId;
+  updateSessionUi(activeSessionId);
+  connectWebSocket(activeSessionId);
+});
+
+document.querySelector("#reconnect").addEventListener("click", () => {
+  const id = sessionInput.value.trim();
+  if (id) {
+    activeSessionId = id;
+    localStorage.setItem("py-web-ssh-session", id);
+    updateSessionUi(id);
+    connectWebSocket(id);
+  }
+});
+
+document.querySelector("#disconnect").addEventListener("click", () => {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    sendSnapshot();
+    ws.send(JSON.stringify({ type: "disconnect" }));
+  }
+});
+
+document.querySelector("#upload-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const file = document.querySelector("#upload-file").files[0];
+  const remotePath = valueOf("#upload-path");
+  if (!activeSessionId || !file || !remotePath) {
+    appendLogLine("上传需要会话 UUID、远端路径和本地文件。");
+    return;
+  }
+  const form = new FormData();
+  form.append("remote_path", remotePath);
+  form.append("file", file);
+  setStatus("上传中...");
+  const response = await fetch(`/api/sessions/${activeSessionId}/files/upload`, {
+    method: "POST",
+    body: form,
+  });
+  const body = await response.text();
+  appendLogLine(response.ok ? `上传完成: ${body}` : `上传失败: ${body}`);
+  setStatus(response.ok ? "上传完成" : "上传失败");
+});
+
+document.querySelector("#download-form").addEventListener("submit", (event) => {
+  event.preventDefault();
+  const remotePath = valueOf("#download-path");
+  if (!activeSessionId || !remotePath) {
+    appendLogLine("下载需要会话 UUID 和远端路径。");
+    return;
+  }
+  window.location.href =
+    `/api/sessions/${activeSessionId}/files/download?remote_path=${encodeURIComponent(remotePath)}`;
+});
+
+document.querySelectorAll(".tab").forEach((button) => {
+  button.addEventListener("click", () => {
+    document.querySelectorAll(".tab").forEach((tab) => tab.classList.remove("active"));
+    document.querySelectorAll(".pane").forEach((pane) => pane.classList.remove("active"));
+    button.classList.add("active");
+    document.querySelector(`#${button.dataset.tab}-pane`).classList.add("active");
+    if (button.dataset.tab === "terminal") {
+      fitAddon.fit();
+    }
+  });
+});
+
+function connectWebSocket(sessionId) {
+  if (ws) {
+    sendSnapshot();
+    ws.close();
+  }
+  term.focus();
+  setStatus("WebSocket 连接中...");
+  const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+  const socket = new WebSocket(`${protocol}://${window.location.host}/ws/sessions/${sessionId}`);
+  ws = socket;
+  socket.addEventListener("open", () => {
+    if (ws !== socket) return;
+    setStatus("WebSocket 已连接");
+    sendResize();
+  });
+  socket.addEventListener("message", async (event) => {
+    if (ws !== socket) return;
+    const message = JSON.parse(event.data);
+    await handleMessage(message);
+  });
+  socket.addEventListener("close", () => {
+    if (ws !== socket) return;
+    setStatus("WebSocket 已断开，可重连");
+  });
+  socket.addEventListener("error", () => {
+    if (ws === socket) setStatus("WebSocket 错误");
+  });
+}
+
+async function handleMessage(message) {
+  if (message.type === "session") {
+    appendLogLine(`绑定会话 ${message.session_id}`);
+  } else if (message.type === "replay") {
+    await replayTerminal(message);
+    setStatus(`会话状态: ${message.state}`);
+    if (message.warning) appendLogLine(message.warning);
+    for (const entry of message.logs || []) appendLogEntry(entry);
+  } else if (message.type === "output") {
+    await writeChunk(message);
+  } else if (message.type === "status") {
+    setStatus(`会话状态: ${message.state}`);
+  } else if (message.type === "log") {
+    appendLogEntry(message.entry);
+  } else if (message.type === "warning") {
+    appendLogLine(message.message);
+  }
+}
+
+async function replayTerminal(message) {
+  term.reset();
+  lastAppliedSeq = 0;
+  if (message.snapshot) {
+    await writeTerminal(base64ToString(message.snapshot));
+    lastAppliedSeq = message.snapshot_seq || 0;
+  }
+  for (const chunk of message.chunks || []) {
+    await writeChunk(chunk);
+  }
+  scheduleSnapshot();
+}
+
+async function writeChunk(chunk) {
+  const bytes = base64ToBytes(chunk.data);
+  await writeTerminal(bytes);
+  lastAppliedSeq = chunk.seq + bytes.byteLength;
+  scheduleSnapshot();
+}
+
+function writeTerminal(data) {
+  return new Promise((resolve) => term.write(data, resolve));
+}
+
+function sendResize() {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+  }
+}
+
+function scheduleSnapshot() {
+  if (snapshotTimer) return;
+  snapshotTimer = window.setTimeout(() => {
+    snapshotTimer = null;
+    sendSnapshot();
+  }, 1500);
+}
+
+function sendSnapshot() {
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    return;
+  }
+  const snapshot = serializeAddon.serialize();
+  ws.send(JSON.stringify({ type: "snapshot", seq: lastAppliedSeq, data: stringToBase64(snapshot) }));
+}
+
+window.addEventListener("beforeunload", sendSnapshot);
+
+async function readPrivateKey() {
+  const file = document.querySelector("#private-key-file").files[0];
+  return file ? await file.text() : "";
+}
+
+function updateSessionUi(sessionId) {
+  sessionLabel.textContent = sessionId ? `UUID ${sessionId}` : "";
+  logsLink.href = sessionId ? `/sessions/${sessionId}/logs` : "#";
+}
+
+function setStatus(text) {
+  statusElement.textContent = text;
+}
+
+function appendLogEntry(entry) {
+  const detail = entry.details ? `\n${entry.details}` : "";
+  appendLogLine(`[${entry.timestamp}] ${entry.level.toUpperCase()} ${entry.message}${detail}`);
+}
+
+function appendLogLine(line) {
+  logsElement.textContent += `${line}\n`;
+  logsElement.scrollTop = logsElement.scrollHeight;
+}
+
+function valueOf(selector) {
+  return document.querySelector(selector).value.trim();
+}
+
+function checked(selector) {
+  return document.querySelector(selector).checked;
+}
+
+function bytesToBase64(bytes) {
+  let binary = "";
+  const size = 0x8000;
+  for (let i = 0; i < bytes.length; i += size) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + size));
+  }
+  return btoa(binary);
+}
+
+function base64ToBytes(text) {
+  const binary = atob(text);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+function stringToBase64(text) {
+  return bytesToBase64(new TextEncoder().encode(text));
+}
+
+function base64ToString(text) {
+  return new TextDecoder().decode(base64ToBytes(text));
+}

webssh/static/index.html

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>py-web-ssh</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" />
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <main class="app-shell">
+      <aside class="sidebar">
+        <header class="brand">
+          <h1>py-web-ssh</h1>
+          <p>Web SSH client</p>
+        </header>
+
+        <section class="panel">
+          <h2>连接</h2>
+          <form id="connect-form" class="stack">
+            <label>
+              目标服务器
+              <input id="host" name="host" required autocomplete="off" placeholder="192.168.1.10" />
+            </label>
+            <div class="grid-2">
+              <label>
+                端口
+                <input id="port" name="port" type="number" min="1" max="65535" value="22" required />
+              </label>
+              <label>
+                用户名
+                <input id="username" name="username" required autocomplete="username" />
+              </label>
+            </div>
+            <label>
+              口令
+              <input id="password" name="password" type="password" autocomplete="current-password" />
+            </label>
+            <label>
+              私钥文件
+              <input id="private-key-file" name="private-key-file" type="file" />
+            </label>
+            <label>
+              私钥口令
+              <input id="private-key-passphrase" name="private-key-passphrase" type="password" />
+            </label>
+            <div class="checks">
+              <label><input id="legacy-algorithms" type="checkbox" checked /> legacy 算法</label>
+              <label><input id="allow-agent" type="checkbox" /> SSH agent</label>
+              <label><input id="look-for-keys" type="checkbox" /> 服务端本机密钥</label>
+              <label><input id="strict-host-key" type="checkbox" /> known_hosts 校验</label>
+            </div>
+            <button class="primary" type="submit">连接</button>
+          </form>
+        </section>
+
+        <section class="panel">
+          <h2>会话</h2>
+          <div class="stack">
+            <label>
+              UUID
+              <input id="session-id" autocomplete="off" spellcheck="false" />
+            </label>
+            <div class="button-row">
+              <button id="reconnect" type="button">重连</button>
+              <button id="disconnect" type="button">断开 SSH</button>
+            </div>
+            <a id="logs-link" class="quiet-link" href="#" target="_blank" rel="noreferrer">打开完整日志</a>
+          </div>
+        </section>
+
+        <section class="panel">
+          <h2>文件</h2>
+          <form id="upload-form" class="stack">
+            <label>
+              上传到远端路径
+              <input id="upload-path" placeholder="/tmp/file.txt" />
+            </label>
+            <label>
+              本地文件
+              <input id="upload-file" type="file" />
+            </label>
+            <button type="submit">上传</button>
+          </form>
+          <form id="download-form" class="stack compact">
+            <label>
+              下载远端路径
+              <input id="download-path" placeholder="/tmp/file.txt" />
+            </label>
+            <button type="submit">下载</button>
+          </form>
+        </section>
+      </aside>
+
+      <section class="workspace">
+        <div class="toolbar">
+          <div>
+            <strong id="status">未连接</strong>
+            <span id="session-label"></span>
+          </div>
+          <div class="tabs" role="tablist">
+            <button class="tab active" data-tab="terminal" type="button">终端</button>
+            <button class="tab" data-tab="logs" type="button">日志</button>
+          </div>
+        </div>
+        <div id="terminal-pane" class="pane active">
+          <div id="terminal"></div>
+        </div>
+        <div id="logs-pane" class="pane">
+          <pre id="logs"></pre>
+        </div>
+      </section>
+    </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-serialize@0.13.0/lib/addon-serialize.min.js"></script>
+    <script src="/static/app.js"></script>
+  </body>
+</html>

webssh/static/logs.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>py-web-ssh logs</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body class="logs-page">
+    <main class="log-document">
+      <header>
+        <h1>会话日志</h1>
+        <p id="log-session-id">__SESSION_ID__</p>
+      </header>
+      <pre id="full-logs">加载中...</pre>
+    </main>
+    <script>
+      const sessionId = "__SESSION_ID__";
+      const fullLogs = document.querySelector("#full-logs");
+
+      function formatEntry(entry) {
+        const details = entry.details ? `\n${entry.details}` : "";
+        return `[${entry.timestamp}] ${entry.level.toUpperCase()} ${entry.message}${details}`;
+      }
+
+      async function refresh() {
+        const response = await fetch(`/api/sessions/${sessionId}/logs`);
+        if (!response.ok) {
+          fullLogs.textContent = await response.text();
+          return;
+        }
+        const payload = await response.json();
+        fullLogs.textContent = [
+          JSON.stringify(payload.session, null, 2),
+          "",
+          ...payload.logs.map(formatEntry),
+        ].join("\n");
+      }
+
+      refresh();
+      setInterval(refresh, 3000);
+    </script>
+  </body>
+</html>