阅读 427

使用vue + xterm.js+websocket实现终端功能

最近项目需要写一个cmd命令行窗口的功能,实现这个功能来来回回换了好几个版本,查了好多的资料,不得不说官网文档真的真的很难看懂,在此记录一下我是怎么实现的~

1.安装版本

    首先,安装插件。关于Xtermd 我只用到了xterm以及xterm-addon-fit这两个插件,xterm-add-fit这个插件是用于让命令行窗口自适应大小的。我xterm.js使用的是4.13的版本,大家注意区分3.x和4.x的版本,里面有个获取键盘输入的方法是不一样的(具体请看:blog.csdn.net/weixin_3831…npm install xterm.js --savenpm install xterm-add-fit --save

2.引入插件

    在页面内,引入xterm.js以及xterm-addon-fit

import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import 'xterm/css/xterm.css'
import 'xterm/lib/xterm.js'复制代码

3.使用xterm.js

    (1)连接socket      socket消息回调函数那里我做了一些关于控制台文本颜色控制的处理,有点子花花绿绿的,如果有需要的话,可以看一下,我这只设置了文本颜色,还可以设置背景色,字体加粗之类的。

// 初始化websocket
    initSocket () {
      let url = ''
      if (process.env.NODE_ENV === 'development') {
        url = '192.168.1.149:2224'  //` ws地址
      } else {
        url = this.baseUrl
        url = url.split('//')[1]
      }
      // console.log(url)
      this.socket = new WebSocket((location.protocol === 'http:' ? 'ws://' : 'wss://') + url + '/web/consoleWebsocket')
      this.openSocket()
      this.closeSocket()
      this.errorSocket()
      this.messageSocket()
    },
// 打开连接
    openSocket () {
      this.socket.onopen = () => {
        this.initTerm()
        this.sendData(1)
      }
    },
    // 关闭连接
    closeSocket () {
      this.socket.onclose = () => {
        // console
        // this.sendData()
      }
    },
    // 连接错误
    errorSocket () {
      this.socket.onerror = () => {
        this.$message.error('websoket连接失败,请刷新!')
      }
    },
    // 消息回调
    messageSocket () {
      this.socket.onmessage = (res) => {
        // console.log(res)
        if (res.data.length !== 0) {
          // console.log(res.data.repeat())
          let data = res.data
          let result = data
          let color = '\x1b[37m'
          // console.log(typeof data)
          if (res.data.substr(0,1).indexOf('{') !== -1) {
            data = JSON.parse(data)
            this.sshPrompt = data.prompt
            if (data.status === 'status') {
              color = '\x1b[94m'    // 蓝色
            } else if (data.status === 'error') {
              color = '\x1b[91m'    // 红色
            } else if (data.status === 'good') {
              color = '\x1b[92m'    // 绿色
            } else if (data.status === 'warning') {
              color = '\x1b[93m'    // 黄色
            } else {
              color = '\x1b[37m'    // 白色
            }
            result = data.data
            this.term.write('\r\n'+ color + result)
            if (data.busy) {
              return
            }
          } else {
            this.term.write('\r\n' + color + result)
          }
          this.term.prompt()
          // setTimeout(, 2000)
        }
      }
    },复制代码

    (2)初始化xterm     代码有点长,概括一下下面的代码主要实现了哪些功能:

    键盘输入字符,拼接命令,遇到回车之后就将命令发送给后端,后端返回命令运行结果输出到界面;

    保存输入过的命令到sessionStorage内,通过上下键可以切换命令;

    tab键补全功能,这个是调用后端接口实现的;

// 初始化终端
    initTerm () {
      this.consoleLoading = true
      let that = this
      let termContainer = document.getElementById('terminal')
      localStorage.setItem('commands', '')
      that.cols = termContainer.offsetWidth / 9
      that.rows = termContainer.offsetHeight / 9
      const term = new Terminal({
        cursorBlink: true,
        cols: parseInt(that.cols),
        theme: {
          // foreground: "#7e9192", //字体
          fontFamily: 'DejaVu',
          lineHeight: 16
        }
      })
      let fitAddon = new FitAddon()
      term.loadAddon(fitAddon)
      term.open(termContainer)
      term.prompt = function () {
        let color = '\x1b[33m'
        term.write('\r\n' + color + that.sshPrompt + '$\x1b[0m ');
      }
      fitAddon.fit()
      // 内容全屏显示-窗口大小发生改变时
      function resizeScreen() {
        // console.log("size", size);
        try {
          fitAddon.fit();
        } catch (e) {
          console.log("e", e.message);
        }
      }
      window.addEventListener("resize", resizeScreen)
      term.focus()  // 光标聚焦
      // 添加事件监听器,支持输入方法
      term.onData( function (key) {
        if (key.charCodeAt(0) == 13) { // 回车
          if(that.command === 'clear') {
            term.clear()
          }
          if (that.command.trim().length === 0) {
            term.prompt()
          } else {
            // 保存命令
            let commands = localStorage.getItem('commands') ? JSON.parse(localStorage.getItem('commands')) : []
            commands.push(that.command)
            localStorage.setItem('commands', JSON.stringify(commands))
            localStorage.setItem('index', commands.length)
            that.sendData(0)
          }
          that.command = ''
        } else if (key === '\u001b[A') {   // 向上方向
          let commands = localStorage.getItem('commands') ? JSON.parse(localStorage.getItem('commands')) : []
          // console.log(commands)
          let index = localStorage.getItem('index') ? localStorage.getItem('index') : commands.length
          index = parseInt(index)
          if (commands.length && index < commands.length + 1 && index > 0) {
            // 删除现有命令
            for (let i = 0; i < that.command.length; i++) {
              if (term._core.buffer.x > (that.sshPrompt.length + 2)) {
                term.write('\b \b')
              }
            }
            that.command = commands[index - 1]
            term.write(that.command)
            localStorage.setItem('index', index - 1)
          }
        } else if (key  === '\u001b[B') {   // 向下方向
          let commands = localStorage.getItem('commands') ? JSON.parse(localStorage.getItem('commands')) : []
          let index = localStorage.getItem('index') ? localStorage.getItem('index') : commands.length
          index = parseInt(index)
          if (commands.length && index < commands.length - 1 && index > -1) {
            // 删除现有命令
            for (let i = 0; i < that.command.length; i++) {
              if (term._core.buffer.x > (that.sshPrompt.length + 2)) {
                term.write('\b \b')
              }
            }
            that.command = commands[index + 1]
            term.write(that.command)
            localStorage.setItem('index', index + 1)
          }
        } else if (key.charCodeAt(0) === 9) {  // tab键
          let params = {
            consoleUUID: that.activeMsf,
            cmd: that.command
          }
          // tab补全
          that.$apis.readTabsComplete(params).then((res) => {
            if (res.code === 200) {
              if (res.data.length) {
                for (let i = 0; i < that.command.length; i++) {
                  term.write('\b \b')
                }
                let data = res.data.join('\r\n')
                that.command = res.data[res.data.length - 1]
                if (res.data.length > 1) {
                  term.write('\r\n')
                  term.write(data)
                  term.prompt()
                  term.write(res.data[res.data.length - 1])
                } else {
                  term.write(that.command)
                }
              }
            } else {
              that.$message.error(res.message())
            }
          })
        } else if (key.charCodeAt(0) === 127) {
          if (term._core.buffer.x > (that.sshPrompt.length + 2)) {
            term.write('\b \b')
            that.command = that.command.substr(0, that.command.length - 1)
          }
        } else{
          that.command += key
          term.write(key)
        }
      })
      that.term = term
    },


作者:智慧少女不秃头
链接:https://juejin.cn/post/7028755378930188318


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐