GitHub 开源地址: https://github.com/trzsz/trzsz.js
在 webshell 中实现文件传输的 js 库 trzsz.js 发布 v1.1.5,优化了进度条,将光标隐藏。
软件简介
trzsz (trz /tsz) 是一个兼容 tmux 的文件传输工具,和 lrzsz ( rz /sz ) 类似,并且有进度条,支持目录传输,支持拖动上传。
有关 trzsz 更详细的文档,请查看 https://trzsz.github.io/cn。
trzsz.js 是 trzsz 的 js 版实现,支持在浏览器中运行的 webshell,支持用 electron 等实现的 js 语言的终端。
开发指引
-
添加依赖
npm install trzsz或者
yarn add trzsz -
在 Node.js 中引用
import { TrzszFilter } from "trzsz";或者
const { TrzszFilter } = require("trzsz"); -
或者在浏览器中引用
<script src="node_modules/trzsz/lib/trzsz.js"></script> -
创建
TrzszFilter对象( 每个登录服务器的连接创建一个相应的 )const trzszFilter = new TrzszFilter({ // 这里设置 trzsz 的属性,详情请参考下文。 }); -
一般来说,服务器的输出会转发到终端进行显示,创建
TrzszFilter过滤器,接受服务器的输出,并转发给终端。const trzszFilter = new TrzszFilter({ // 将服务器的输出转发给终端进行显示,当用户在服务器上执行 trz / tsz 命令时,输出则会被接管。 writeToTerminal: (data) => terminal.write(typeof data === "string" ? data : new Uint8Array(data)), }); // 将服务器的输出转发给 TrzszFilter 进行处理,一般会原样转发回上面定义的 writeToTerminal 函数。 webSocket.addEventListener("message", (ev) => trzszFilter.processServerOutput(ev.data)); -
一般来说,用户的输入会转发到服务器上,创建
TrzszFilter过滤器,接受用户的输入,并转发给服务器。const trzszFilter = new TrzszFilter({ // 将用户的输入转发到服务器上,当 trz / tsz 上传或下载时,输入则会被忽略,ctrl + c 会停止传输。 sendToServer: (data) => webSocket.send(data), }); // 将用户的输入转发给 TrzszFilter 进行处理,一般会原样转发回上面定义的 sendToServer 函数。 terminal.onData((data) => trzszFilter.processTerminalInput(data)); // 将用户的鼠标事件转发给 TrzszFilter 进行处理,一般会原样转发回上面定义的 sendToServer 函数。 terminal.onBinary((data) => trzszFilter.processBinaryInput(data)); -
需要告知
TrzszFilter终端的宽度,在显示进度条时会使用到。const trzszFilter = new TrzszFilter({ // 终端的初始宽度 terminalColumns: terminal.cols, }); // 当终端宽度发生变化时,告知 TrzszFilter 最新的宽度。 terminal.onResize((size) => trzszFilter.setTerminalColumns(size.cols)); -
如果远程服务器是 Windows 命令行,例如
cmd和PowerShell。const trzszFilter = new TrzszFilter({ // 声明远程服务器是 Windows 的 cmd / PowerShell 等 isWindowsShell: true, }); -
如果是
Node.js运行环境,即能正常执行require('fs'),那么chooseSendFilesandchooseSaveDirectory是必须的。如果是浏览器运行环境,则会忽略它们。注意是async函数。yarn add trzsz0 -
支持拖拽文件和目录上传的功能。
yarn add trzsz1 -
如果你在使用 xterm-addon-attach 插件,只将简单地用
TrzszAddon替换AttachAddon即可。yarn add trzsz2
开发示例
-
浏览器 webshell 例子。
-
Electron 终端例子。
-
TrzszAddon xterm 插件例子。
录屏演示
js 版的 trzsz.js,可以在 Chrome 浏览器中使用 trzsz (trz /tsz) 上传和下载文件,如图:
js 版的 trzsz.js,可以集成到 electron 开发的终端中,使用 trzsz (trz /tsz) 上传和下载文件,如图:






还没有评论,来说两句吧...