前端终端组件Xterm.js使用方法

xterm 是一个使用 TypeScript 编写的前端终端组件，可以直接在浏览器中实现一个命令行终端应用。

主要特性：

终端应用程序正常工作：Xterm.js适用于大多数终端应用程序，如bash，vim和tmux，这包括对基于curses的应用程序和鼠标事件支持的支持
Performant：Xterm.js 非常快，它甚至还包括一个GPU加速的渲染器。

丰富的 unicode 支持：支持CJK，表情符号和IME。

自包含：零依赖性。

可访问：可以使用screenReaderMode选项打开屏幕阅读器支持。

还有更多：链接，主题，插件，记录良好的API等。

使用方法：

一、安装：

cnpm i xterm@4.6.0 -S
cnpm i xterm-addon-fit@0.4.0 -S

二、组件中使用：

import React from 'react';
import { Terminal } from 'xterm';
import 'xterm/css/xterm.css';class WebSSH extends React.Component {constructor(props) {super(props);this.socket = null;this.term = new Terminal();this.container = null;this.input = null;this.state = {visible: false,uploading: false,managerDisabled: true,host: {},percent: 0}}componentDidMount() {//alert(document.getElementById("terminal").offsetHeight);var term = new Terminal({rendererType: "canvas", //渲染类型rows: Math.ceil((document.getElementById("terminal").clientHeight-100)/14), //行数convertEol: true, //启用时，光标将设置为下一行的开头scrollback: 10,//终端中的回滚量disableStdin: false, //是否应禁用输入。cursorStyle: 'underline', //光标样式cursorBlink: true, //光标闪烁theme: {foreground: 'yellow', //字体background: '#060101', //背景色cursor: 'help',//设置光标}});term.open(document.getElementById('terminal'));term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');if (term._initialized) {return}term._initialized = trueterm.prompt = () => {term.write('\r\n$ ')}term.writeln('Welcome to xterm.js')term.writeln('This is a local terminal emulation, without a real terminal in the back-end.')term.writeln('Type some keys and commands to play around.')term.writeln('')term.prompt()const webSocket = new WebSocket('ws://localhost:9000');//建立通道  // xterm.4.x 输入term.onKey(e => {const ev = e.domEventconst printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKeyif (ev.keyCode === 13) {term.prompt()} else if (ev.keyCode === 8) {// Do not delete the promptif (term._core.buffer.x > 2) {term.write('\b \b')}} else if (printable) {term.write(e.key);webSocket.send(e.key);}})//返回webSocket.onmessage = function (evt) {term.write(evt.data);};// xterm3.x// function runFakeTerminal() {//     if (term._initialized) {//       return;//     }//     term._initialized = true;//     term.prompt = () => {//       term.write('\r\n$ ');//     };//     term.writeln('Welcome to xterm.js');//     term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');//     term.writeln('Type some keys and commands to play around.');//     term.writeln('');//     term.prompt();//     term.on('key', function (key, ev) {//       const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;//       console.log(key,ev.keyCode);//       console.log(term._core.buffer.x);//       if (ev.keyCode === 13) {//         term.prompt();//       } else if (ev.keyCode === 8) {//         // Do not delete the prompt//         if (term._core.buffer.x > 2) {//           term.write('\b \b');//         }//       } else if (printable) {//         term.write(key);//       }//     });//     term.on('paste', function (data) {//       term.write(data);//     });//   }//   runFakeTerminal();}render() {return (<div id="terminal" style={{height: "100%"}}></div> //terminal容器)}
}export default WebSSH

import React from 'react';
import { Button } from 'antd';
import { AuthDiv } from 'components';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import FileManager from './FileManager';
import { http, X_TOKEN } from 'libs';
import 'xterm/css/xterm.css';
import styles from './index.module.css';class WebSSH extends React.Component {constructor(props) {super(props);this.id = props.match.params.id;this.socket = null;this.term = new Terminal();this.container = null;this.input = null;this.state = {visible: false,uploading: false,managerDisabled: true,host: {},percent: 0}}componentDidMount() {this._fetch();const fitPlugin = new FitAddon();this.term.loadAddon(fitPlugin);const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';this.socket = new WebSocket(`${protocol}//${window.location.host}/api/ws/ssh/${this.id}/?x-token=${X_TOKEN}`);this.socket.onmessage = e => this._read_as_text(e.data);this.socket.onopen = () => {this.term.open(this.container);this.term.focus();fitPlugin.fit();};this.socket.onclose = e => {if (e.code === 3333) {window.location.href = "about:blank";window.close()} else {setTimeout(() => this.term.write('\r\nConnection is closed.\r\n'), 200)}};this.term.onData(data => this.socket.send(JSON.stringify({data})));this.term.onResize(({cols, rows}) => {this.socket.send(JSON.stringify({resize: [cols, rows]}))});window.onresize = () => fitPlugin.fit()}_read_as_text = (data) => {const reader = new window.FileReader();reader.onload = () => this.term.write(reader.result);reader.readAsText(data, 'utf-8')};handleShow = () => {this.setState({visible: !this.state.visible})};_fetch = () => {http.get(`/api/host/?id=${this.id}`).then(res => {document.title = res.name;this.setState({host: res, managerDisabled: false})})};render() {const {host, visible, managerDisabled} = this.state;return (<div className={styles.container}><div className={styles.header}><div>{host.name} | {host.username}@{host.hostname}:{host.port}</div><AuthDiv auth="host.console.manager"><Button disabled={managerDisabled} type="primary" icon="folder-open"onClick={this.handleShow}>文件管理器</Button></AuthDiv></div><div className={styles.terminal}><div ref={ref => this.container = ref}/></div><FileManager id={this.id} visible={visible} onClose={this.handleShow}/></div>)}
}export default WebSSH

前端终端组件Xterm.js使用方法相关推荐

前端终端组件xterm.js的使用（转）
官网链接 https://xtermjs.org/ 安装 npm install xterm 使用 import 'xterm/css/xterm.css'import { Terminal } fr ...
Neo4j前端可视化组件Neovis.js使用说明
一.说明 Neovis.js将JavaScript可视化和Neo4j无缝集成.与Neo4j的连接非常简单明了,并且由于它是在Neo4j的属性图模型的基础上构建的,因此 Neovis 的数据格式与数据库 ...
Proxmox VE（PVE）配置xterm.js终端
PVE创建虚拟机后默认只能noVNC方式连接虚拟机,该终端无法复制粘贴,非常不方便. PVE还提供了xterm.js终端,xterm.js终端是一种Web终端,简单配置后可满足复制粘贴命令的需求. 配 ...
node.js require 自动执行脚本并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太 ...
前端利用jsencrypt.min.js进行RSA加密(常用在登录密码加密)全局方法封装
步骤: 项目中下载 npm install jsencrypt untils文件下新建js文件,封装公共方法 import JSEncrypt from 'jsencrypt/bin/jsencryp ...
php_js,举例说明JS调用PHP和PHP调用JS的方法_WEB前端开发
HTML5 嵌入钉钉教程_WEB前端开发这篇文章主要介绍了Html5嵌入钉钉的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习 ...
【个人笔记】vue+xterm.js+novnc实现终端交互和远程桌面
介绍一个 VNC连接工具:iis7服务器管理工具 IIs7服务器管理工具可以批量连接并管理VNC服务器作为服务器集成管理器,它最优秀的功能就是批量管理windows与linux系统服务器.vps.能 ...
vuejs 传参向子组件父组件_VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
vue+xterm.js实现webssh踩坑之旅
最近在做的项目需要使用xterminal实现网页远程连接Linux终端,引了这个插件后发现问题很多,接下来一一记录问题所在. 一.如何在vue项目中使用xterm.js 安装xterm.js,博主使用 ...

前端终端组件Xterm.js使用方法

前端终端组件Xterm.js使用方法相关推荐

最新文章

热门文章