当前位置：首页 > VUE

vue实现webshell

2026-01-08 01:34:56VUE

Vue 实现 WebShell

使用 Vue 实现 WebShell 需要结合前端与后端的交互，通常通过 WebSocket 或 HTTP 协议与服务器通信。以下是一个基于 Vue 和 WebSocket 的 WebShell 实现方案。

安装依赖

确保项目中已安装 vue 和 axios（如果需要 HTTP 请求）或 socket.io-client（如果需要 WebSocket）。可以通过以下命令安装：

npm install vue axios socket.io-client

前端实现

创建一个 Vue 组件，用于显示终端输出和接收用户输入。

<template>
  <div class="webshell">
    <div class="terminal" ref="terminal">
      <div v-for="(line, index) in output" :key="index">{{ line }}</div>
    </div>
    <input
      v-model="command"
      @keyup.enter="sendCommand"
      placeholder="Enter command..."
    />
  </div>
</template>

<script>
import { io } from "socket.io-client";

export default {
  data() {
    return {
      command: "",
      output: [],
      socket: null,
    };
  },
  mounted() {
    this.socket = io("http://localhost:3000"); // 替换为后端地址
    this.socket.on("output", (data) => {
      this.output.push(data);
      this.scrollToBottom();
    });
  },
  methods: {
    sendCommand() {
      if (this.command.trim()) {
        this.socket.emit("command", this.command);
        this.command = "";
      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const terminal = this.$refs.terminal;
        terminal.scrollTop = terminal.scrollHeight;
      });
    },
  },
};
</script>

<style>
.webshell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.terminal {
  flex: 1;
  overflow-y: auto;
  background: #000;
  color: #fff;
  padding: 10px;
  font-family: monospace;
}
input {
  padding: 8px;
  border: none;
  background: #333;
  color: #fff;
}
</style>

后端实现

后端可以使用 Node.js 和 socket.io 实现 WebSocket 服务，处理命令并返回输出。

const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");
const { exec } = require("child_process");

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "*",
  },
});

io.on("connection", (socket) => {
  socket.on("command", (command) => {
    exec(command, (error, stdout, stderr) => {
      if (error) {
        socket.emit("output", `Error: ${error.message}`);
        return;
      }
      if (stderr) {
        socket.emit("output", stderr);
        return;
      }
      socket.emit("output", stdout);
    });
  });
});

httpServer.listen(3000, () => {
  console.log("Server running on port 3000");
});