Skip to content

基于xterm.js + gin + vue + websocket 的gotty web网页版实现,目的学习关键技术

License

Notifications You must be signed in to change notification settings

lflxp/gin-xterm

Repository files navigation

学习和了解gotty的实现原理,并基于gin-web + vue + xterm.js 实现了一套完整的功能

使用

环境准备npm go

前端 gin-xterm

git clone https://github.com/lflxp/gin-xterm
cd gin-xterm
make all

Xtermjs 知识点

  1. 是否需要解析键盘的各种回车、ctrl+c、ctrl+d等操作

解答:不需要,因为后端默认是以bash作为命令输入口

  1. 不需要解析键盘操作,那各种结果处理怎么做

解答: 前后端需要规划好一套数据结构去处理三种情况,格式使用: msgType + base64.encode(messageType)

  • 正常消息发送 -> msgType = 0 , messageType为输入字符

    websocket.send('0' + Base64.encode(data))

  • 定时任务发送 -> msgType = 1 , messageType忽略

    websocket.send('1')

  • Resize任务发送 -> msgType = 2 , messageType为【rows:cols】

    websocket.send('2' + Base64.encode(size.rows + ':' + size.cols))

  1. xtermjs前端背景大小、鼠标滑动、字体大小、光标怎么设置

解答:

this.term = new Terminal({
    rendererType: 'canvas', // 渲染类型
    rows: this.rows,
    cols: this.cols,
    convertEol: true, // 启用时,光标将设置为下一行的开头
    scrollback: 10, // 终端中的回滚量
    disableStdin: false, // 是否应禁用输入
    fontSize: 18,
    cursorBlink: true, // 光标闪烁
    cursorStyle: 'bar', // 光标样式 underline
    bellStyle: 'sound',
    theme: defaultTheme
})
  1. 如何查看键盘输入的详细信息

解答:借助xtermjs提供的事件监听打印object查看

this.term.on('key', function(key, ev) {
    console.log(key, ev, ev.keyCode)
})
  1. 自定义xtermjs主题样式怎么弄?

解答:

const defaultTheme = {
  foreground: '#ffffff', // 字体
  background: '#1b212f', // 背景色
  cursor: '#ffffff', // 设置光标
  selection: 'rgba(255, 255, 255, 0.3)',
  black: '#000000',
  brightBlack: '#808080',
  red: '#ce2f2b',
  brightRed: '#f44a47',
  green: '#00b976',
  brightGreen: '#05d289',
  yellow: '#e0d500',
  brightYellow: '#f4f628',
  magenta: '#bd37bc',
  brightMagenta: '#d86cd8',
  blue: '#1d6fca',
  brightBlue: '#358bed',
  cyan: '#00a8cf',
  brightCyan: '#19b8dd',
  white: '#e5e5e5',
  brightWhite: '#ffffff'
}
  1. xtermjs和websocket如何相互联动

解答:

  • websocket创建
this.ws = new WebSocket('ws://127.0.0.1:8888/api/ws/ping5')
this.ws.onerror = () => {
    this.$message.error('ws has no token, please login first')
    this.$router.push({ name: 'login' })
}

this.ws.onclose = () => {
    this.term.setOption('cursorBlink', false)
    this.$message('console.web_socket_disconnect')
}
  • xtermjs创建

查看上面第3个问题

  • 联动

websocket加入xtermjsterm.socket = websocket

websocket发送信息websocket.send($info)

  1. 有完整DEMO示例吗?

解答:

参考

About

基于xterm.js + gin + vue + websocket 的gotty web网页版实现,目的学习关键技术

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published