如何用WebSocket把wterm Web终端连上真实ShellWebSocketTransport完全指南【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wtermwterm 是一个面向 Web 的终端模拟器而WebSocketTransport是它内置的 WebSocket 传输层——用几行代码就能把浏览器里的 wterm Web 终端连接到服务端的真实 ShellPTY实现打字、回显、重连一气呵成。本指南面向新手带你从零理解它的工作原理、完整配置和常见坑位。为什么 Web 终端需要 WebSocket浏览器里的终端本质上只是画面上的一层字它背后没有任何真正的进程。想让它执行ls、vim这样的命令必须有一条通往服务端的管道上行你敲下的按键含转义序列、鼠标事件下行Shell 输出的字节流含 ANSI 转义WebSocket 全双工、低延迟、天然适合这种双向实时字节流场景因此成为 Web 终端的事实标准。wterm 在wterm/core包里内置了WebSocketTransport类源码位于 packages/wterm/core/src/transport.ts零 DOM 依赖可配合任意框架使用。30秒上手最简连接代码安装并引入两个类完成终端 ↔ WebSocket ↔ PTY的接线import { WTerm, WebSocketTransport } from wterm/dom; const term new WTerm(document.getElementById(terminal), { cols: 80, rows: 24 }); await term.init(); const ws new WebSocketTransport({ url: ws://localhost:8080/pty, onData: (data) term.write(data), // 服务端 - 终端 }); ws.connect(); term.onData (data) ws.send(data); // 终端 - 服务端整个接线只有两行核心代码ws.onData - term.write和term.onData - ws.send数据就这样在浏览器和真实 Shell 之间双向流动。WebSocketTransport 配置选项速查选项类型默认值作用urlstring—WebSocket 服务端地址reconnectbooleantrue断线后是否自动重连maxReconnectDelaynumber30000重连最大间隔毫秒onDatacallback—收到服务端数据时触发onOpen/onClose/onErrorcallback—连接状态回调完整字段定义见 packages/wterm/core/src/transport.ts官方参考文档在 apps/docs/content/docs/api-reference.mdx 的WebSocketTransport一节。三个让连接更稳的内置机制1. 指数退避自动重连默认reconnect: true断线后按 1s → 2s → 4s … 逐次加倍重试直到触达maxReconnectDelay上限默认 30 秒成功后延迟计数器自动归零。相关实现见_scheduleReconnect方法transport.ts。new WebSocketTransport({ url: wss://example.com/pty, reconnect: true, // 可设为 false 关闭 maxReconnectDelay: 10000, });2. 未连接时的发送缓冲在 WebSocket 还没打开CONNECTING 状态时调用send()数据不会丢失而是进入内部缓冲区连接建立后按序自动补发_flushBuffer见 transport.ts。这意味着页面加载慢、网络抖动时用户提前敲下的输入也能完整送达 Shell。3. 二进制与文本双通道传输层统一设置binaryType arraybuffer收到二进制帧自动转为Uint8Array字符串帧原样透传transport.ts。onData回调里两种类型都可能出现写终端时用term.write(data)即可同时兼容。服务端要准备什么一个最小 PTY 后端wterm 官方提供了完整示例examples/local/server.ts。它用node-pty派生登录 Shell通过ws库的WebSocketServer在/api/terminal路径上处理连接核心逻辑很简单收到RESIZE转义序列时创建/调整 PTY 尺寸pty.onData的输出原样发回浏览器浏览器消息写入ptyProcess连接关闭时kill()掉 PTY 进程 注意官方示例用 JSON 包装{type:output,data:...}以便额外推送工作目录等信息如果你只要纯字节流直接透传即可WebSocketTransport对两种格式都不设限。常见坑与排查清单HTTPS 页面连ws://会被浏览器拦截—— 生产环境务必用wss://resize不同步导致错行—— 把WTerm的onResize转发给服务端用 PTY 的resize(cols, rows)同步尺寸重连后 Shell 会话丢失—— 传输层只负责重连网络会话状态需服务端自己维护重连后重新 spawn 或复用主动close()后仍会重连—— 不会close()会标记内部_closed状态并取消定时器彻底停止重连transport.ts延伸阅读使用文档apps/docs/content/docs/vanilla.mdxWebSocket Transport 章节包说明packages/wterm/core/README.md单元行为验证packages/wterm/core/src/tests/websocket-transport.test.ts覆盖缓冲、重连退避、上限等全部机制掌握WebSocketTransport后你的浏览器里就有一个真终端了——vim、htop、python想跑就跑断网也不慌。【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
网络代运营推广避坑：源码下载与外包的3大生死差异 网络代运营推广避坑：源码下载与外包的3大生死差异 模板网站太丑不够用，这是很多老板找代运营前最大的顾虑。你花大价钱找团队做网络代运营推广，结果上线一看，满屏都是烂大街的通用模板，连Logo位置都改不动。更坑的是，当你想二次开发或者迁移服务器… · 2026/9/27 2:27:25
基于STM32的智能桌面宠物制作全攻略 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 2:27:19
降AI后重复率升高，哪些免费工具能帮助降低重复率和AI率？ 降AI后重复率升高，哪些免费工具能帮助降低重复率和AI率？
降AI前查重已经合格，换了一版表达，重复率却升了上去。这时继续把全文反复改写，往往找不出到底哪次修改出了问题。先找出新增重复内容，再修复这些段… · 2026/9/27 2:27:19
RISC-V中断采样时机：架构约束、CSR更新与xRET返回的RTL实现要点 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 3:00:47
bge-m3与bge-large-zh-v1.5选型对比：中文Embedding模型在RAG中的部署与性能实测 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 3:00:47
哪里有专做水果的网站？新手看这篇保姆级建站教程 哪里有专做水果的网站？新手看这篇保姆级建站教程 域名服务器搞不懂，是不是让你对着电脑屏幕发愣？别急，这正是很多想做水果垂直站新手的噩梦。别被技术名词吓跑，这篇 保姆级建站教程 就是为你写的，咱们不讲虚的，直接上干货。… · 2026/9/27 3:00:41
Vitis开发中xsa文件更新全流程与QSPI固化避坑指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 3:00:41
FTDI串口驱动下载安装与故障排查实战指南 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 3:00:35
3类建站方案怎么选：分类网站建设避坑实战指南 3类建站方案怎么选：分类网站建设避坑实战指南 自己不会代码想做网站，面对满屏的“分类网站建设”术语，是不是头都大了？别慌，这行干了十年，我见过太多老板在这一步踩坑。到底怎么选，其实没那么玄乎，核心就看你的业务逻辑和预算上限。今天就把这套底层… · 2026/9/27 3:00:35
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
