Skip to content

destinytaoer/web-terminal

Repository files navigation

Web Terminal

web terminal demo, 使用 turborepo & pnpm workspace 创建的 monorepo 项目

实现 demo:

  • basic: 调试 xterm 基本功能
  • node-pty base64 编码
  • node-pty binary 编码
  • node-pty 通过 url 切换 sh 命令行
  • node-pty 切换编码
  • node-pty 实现文件传输 zmodem/trzsz
  • k8s exec in base64 channel
  • k8s exec in binary channel
  • k8s exec with zmodem

注意: k8s exec demo 需要自行搭建 k8s api 服务, 仅限于调试使用, 不长期维护

Start

Dev

$ pnpm i
$ pnpm dev

主页 https://localhost:7700 basic: https://localhost:7700/basic node-pty: https://localhost:7700/node-pty

Apps

  • client: web 界面
  • server: node 服务

Packages

  • core: web terminal 核心代码
  • zmodem: zmodem 传输协议, 基于 zmodem.js 改造
  • trzsz: 基于 trzsz.js 改造, 实现部分定制需求
  • worker-timer: worker 实现的定时器
  • tsconfig: ts 配置

Information

core process

web terminal 的核心流程:

  • new WebTerminal
  • init terminal
    • new Terminal
    • terminal.open(element)
    • load renderer -> webgl/canvas
    • load fitAddon -> fit window resize listener
    • load weblinkAddon
    • ...other
  • connect websocket
    • new Websocket -> with auth info & terminal size info
    • socket onopen -> terminal.focus / send auth message & terminal size message
    • socket onerror -> terminal.write('connect error') / error handler
    • socket onclose -> terminal.write('disconnect')/ dispose / show close code and reason
    • socket onmessage -> terminal.write -> process message from server
    • terminal onData -> socket send input message -> process message to server
    • terminal onResize -> socket send resize message -> process message to server
    • deal time -> socket send heartbeat message -> process message to server
  • dispose terminal
    • socket.close
    • remove socket listener
    • terminal.dispose
    • window remove resize listener
    • remove heartbeat timer

About

Web Terminal 封装和 demo

Resources

Stars

Watchers

Forks