当前位置：首页 > VUE

vue如何实现webssh

2026-03-29 16:11:02VUE

实现 WebSSH 的核心思路

在 Vue 中实现 WebSSH 功能需要结合前端与后端技术，通过 WebSocket 建立实时双向通信，将用户输入的命令发送到服务器，并接收服务器的输出结果。

前端实现步骤

安装必要的依赖包：

npm install xterm xterm-addon-fit xterm-addon-attach

创建 WebSSH 组件：

<template>
  <div ref="terminalContainer" class="terminal-container"></div>
</template>

<script>
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import { AttachAddon } from 'xterm-addon-attach'

export default {
  data() {
    return {
      term: null,
      fitAddon: new FitAddon(),
      socket: null
    }
  },
  mounted() {
    this.initTerminal()
    this.connectWebSocket()
  },
  methods: {
    initTerminal() {
      this.term = new Terminal({
        cursorBlink: true,
        fontSize: 14,
        theme: {
          background: '#1E1E1E',
          foreground: '#CCCCCC'
        }
      })

      this.term.loadAddon(this.fitAddon)
      this.term.open(this.$refs.terminalContainer)
      this.fitAddon.fit()

      window.addEventListener('resize', () => {
        this.fitAddon.fit()
      })
    },
    connectWebSocket() {
      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
      const host = window.location.host
      this.socket = new WebSocket(`${protocol}//${host}/webssh`)

      this.socket.onopen = () => {
        const attachAddon = new AttachAddon(this.socket)
        this.term.loadAddon(attachAddon)
        this.term.focus()
      }

      this.socket.onclose = () => {
        this.term.writeln('\r\nConnection closed')
      }

      this.socket.onerror = (error) => {
        console.error('WebSocket error:', error)
      }
    }
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close()
    }
    if (this.term) {
      this.term.dispose()
    }
  }
}
</script>

<style>
.terminal-container {
  width: 100%;
  height: 100%;
  padding: 10px;
}
</style>

后端实现方案

后端需要实现 WebSocket 服务，这里以 Node.js 为例：

安装依赖：

npm install ws express express-ws

创建 WebSocket 服务：

const express = require('express')
const expressWs = require('express-ws')
const { spawn } = require('child_process')

const app = express()
expressWs(app)

app.ws('/webssh', (ws, req) => {
  const shell = spawn('/bin/bash', [], {
    env: process.env
  })

  shell.stdout.on('data', (data) => {
    ws.send(data.toString())
  })

  shell.stderr.on('data', (data) => {
    ws.send(data.toString())
  })

  ws.on('message', (msg) => {
    shell.stdin.write(msg)
  })

  ws.on('close', () => {
    shell.kill()
  })
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})