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')
,那么chooseSendFiles
andchooseSaveDirectory
是必须的。如果是浏览器运行环境,则会忽略它们。注意是async
函数。yarn add trzsz
0 -
支持拖拽文件和目录上传的功能。
yarn add trzsz
1 -
如果你在使用 xterm-addon-attach 插件,只将简单地用
TrzszAddon
替换AttachAddon
即可。yarn add trzsz
2
开发示例
-
浏览器 webshell 例子。
-
Electron 终端例子。
-
TrzszAddon xterm 插件例子。
录屏演示
js
版的 trzsz.js,可以在 Chrome 浏览器中使用 trzsz (trz /tsz) 上传和下载文件,如图:
js
版的 trzsz.js,可以集成到 electron 开发的终端中,使用 trzsz (trz /tsz) 上传和下载文件,如图:
还没有评论,来说两句吧...