Giter Club home page Giter Club logo

trzsz.js's Introduction

trzsz.js ( trz / tsz ) - the js version of trzsz

MIT License npmjs trzsz WebSite 中文文档

trzsz.js makes terminal built with electron and webshell to support trzsz ( trz / tsz ), which similar to ( rz / sz ), and compatible with tmux.

Please check https://trzsz.github.io for more information about trzsz ( trz / tsz ).

Getting Started

  • Install the module

    npm install trzsz
    

    or

    yarn add trzsz
    
  • Use in Node.js

    import { TrzszFilter } from "trzsz";

    or

    const { TrzszFilter } = require("trzsz");
  • Use in browser

    <script src="node_modules/trzsz/lib/trzsz.js"></script>
  • Create TrzszFilter object for each connection.

    const trzszFilter = new TrzszFilter({
      // The trzsz options, see below
    });
  • Generally, the output of the server is forwarded to the terminal. Pass the output through TrzszFilter.

    const trzszFilter = new TrzszFilter({
      // The output will be forwarded back by TrzszFilter, unless the user runs ( trz / tsz ) on the server.
      writeToTerminal: (data) => terminal.write(typeof data === "string" ? data : new Uint8Array(data)),
    });
    
    // forward the output to TrzszFilter
    webSocket.addEventListener("message", (ev) => trzszFilter.processServerOutput(ev.data));
  • Generally, the user input is forwarded to the server. Pass the user input through TrzszFilter.

    const trzszFilter = new TrzszFilter({
      // The user input will be forwarded back by TrzszFilter, unless there are files being transferred.
      sendToServer: (data) => webSocket.send(data),
    });
    
    // forward the user input to TrzszFilter
    terminal.onData((data) => trzszFilter.processTerminalInput(data));
    // forward binary input to TrzszFilter
    terminal.onBinary((data) => trzszFilter.processBinaryInput(data));
  • Let TrzszFilter know the terminal columns for rendering progress bar.

    const trzszFilter = new TrzszFilter({
      // initialize the terminal columns
      terminalColumns: terminal.cols,
    });
    
    // reset the terminal columns
    terminal.onResize((size) => trzszFilter.setTerminalColumns(size.cols));
  • If the remote server is a Windows shell, such as cmd and PowerShell.

    const trzszFilter = new TrzszFilter({
      // There is a windows shell
      isWindowsShell: true,
    });
  • If running in Node.js and TrzszFilter can require('fs'), chooseSendFiles and chooseSaveDirectory are required. If running in web browser, they will be ignored. Note that they are async functions.

    const trzszFilter = new TrzszFilter({
      // call on the user runs trz ( upload files ) on the server and no error on require('fs').
      chooseSendFiles: async (directory) => {
        // if `directory` is `true`, allow to choose multiple directories and files.
        // otherwise, only allow to choose multiple files.
        // return `undefined` if the user cancels.
        // return an array of file paths choosed by the user.
        return ["/path/to/file1", "/path/to/file2", "/path/to/directory3"];
      },
      // call on the user runs tsz ( download files ) on the server and no error on require('fs').
      chooseSaveDirectory: async () => {
        // return `undefined` if the user cancels.
        // return a directory path choosed by the user.
        return "/path/to/directory";
      },
    });
  • Support dragging files or directories to upload.

    terminalHtmlElement.addEventListener("dragover", (event) => event.preventDefault());
    terminalHtmlElement.addEventListener("drop", (event) => {
      event.preventDefault();
      trzszFilter
        .uploadFiles(event.dataTransfer.items)
        .then(() => console.log("upload success"))
        .catch((err) => console.log(err));
    });
  • TrzszAddon is a wrapper for TrzszFilter. If you are using xterm-addon-attach, just replace AttachAddon with TrzszAddon.

    import { Terminal } from "xterm";
    import { TrzszAddon } from "trzsz";
    
    const terminal = new Terminal();
    const trzszAddon = new TrzszAddon(webSocket);
    terminal.loadAddon(trzszAddon);

Examples

Screenshot

upload and download files in web browser

browser example

upload and download files in electron app

electron example

Contact

Feel free to email the author [email protected], or create an issue. Welcome to join the QQ group: 318578930.

Sponsor

❤️ Sponsor trzsz ❤️, buy the author a drink 🍺 ? Thank you for your support!

trzsz.js's People

Contributors

glennliao avatar lonnywong avatar zxdong262 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

trzsz.js's Issues

node12 is not supported?

I use npm install trzsz to install. it will report the error.

$ npm install trzsz
npm WARN saveError ENOENT: no such file or directory, open '/home/harriszh/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/harriszh/package.json'
npm WARN harriszh No description
npm WARN harriszh No repository field.
npm WARN harriszh No README data
npm WARN harriszh No license field.

+ [email protected]
added 1 package from 1 contributor and audited 1 package in 2.149s
found 0 vulnerabilities

chooseSaveDirectory is not a function

Traceback (most recent call last):
  File "/usr/local/lib/python3.6/site-packages/trzsz/svr/send.py", line 73, in main
    action = recv_action()
  File "/usr/local/lib/python3.6/site-packages/trzsz/libs/utils.py", line 318, in recv_action
    return recv_json('ACT')
  File "/usr/local/lib/python3.6/site-packages/trzsz/libs/utils.py", line 307, in recv_json
    dic = recv_string(typ, may_has_junk)
  File "/usr/local/lib/python3.6/site-packages/trzsz/libs/utils.py", line 233, in recv_string
    return decode_buffer(recv_check(typ, may_has_junk)).decode('utf8')
  File "/usr/local/lib/python3.6/site-packages/trzsz/libs/utils.py", line 213, in recv_check
    raise TrzszError(buf, typ)
trzsz.libs.utils.TrzszError: TypeError: this.chooseSaveDirectory is not a function
    at t2.<anonymous> (http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:2655:29)
    at http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:109:21
    at Object.next (http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:118:8)
    at http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:55:38
    at new Promise (<anonymous>)
    at e (http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:34:10)
    at t2.handleTrzszDownloadFiles (http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:2648:12)
    at t2.<anonymous> (http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:2621:131)
    at http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:109:21
    at Object.next (http://localhost:3000/node_modules/.vite/deps/trzsz.js?v=a7c740da:118:8)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.