【个人笔记】vue+xterm.js+novnc实现终端交互和远程桌面

介绍一个 VNC连接工具：iis7服务器管理工具
IIs7服务器管理工具可以批量连接并管理VNC服务器
作为服务器集成管理器，它最优秀的功能就是批量管理windows与linux系统服务器、vps。能极大的提高站长及服务器运维人员工作效率。同时iis7服务器管理工具还是vnc客户端，服务器真正实现了一站式管理，可谓是非常方便。
下载地址：http://fwqglgj.iis7.net/cp/vnc/?tscc

最近公司有一个项目需要实现页面终端交互，另一个是连接VNC，终端一开始是使用webshell实现的，如果直接用webshell的话，因为是前后端分离就避免不了要用iframe去嵌套，VNC同样，所以就把webshell更换成xterm.js，VNC更换成novnc，两个插件把iframe去掉了，此处做一个记录

由于xterm.js官方还是比较坑的，没什么比较完整的实例，在网上搜索的资料很多没有表明版本号导致浪费了很多的时间，此处先说使用版本xterm.js-------3.12.0 @novnc/novnc------1.1.0

#@novnc/novnc使用还是比较简单的，网上搜索基本问题不大
#html
<div id='shell'><div id="screen"></div>
</div>

#先引入
import RFB from '@novnc/novnc/core/rfb'
#data参数
rfb:null,
url: 'ws://'......', //链接的url
IsClean: false, //是否已断开并不可重新连接
connectNum:0, //重连次数,

#methods
// vnc连接断开的回调函数
disconnectedFromServer (msg) {if(msg.detail.clean){// 根据 断开信息的msg.detail.clean 来判断是否可以重新连接this.contentVnc()} else {//这里做不可重新连接的一些操作}
},
// 连接成功的回调函数
connectedToServer() {console.log('success')
},//连接vnc的函数connectVnc () {const PASSWORD = this.pwd;let rfb = new RFB(document.getElementById('screen'), this.url, {// 向vnc 传递的一些参数，比如说虚拟机的开机密码等credentials: {password: PASSWORD}});rfb.addEventListener('connect', this.connectedToServer);rfb.addEventListener('disconnect', this.disconnectedFromServer);// rfb.scaleViewport = true;  //scaleViewport指示是否应在本地扩展远程会话以使其适合其容器。禁用时，如果远程会话小于其容器，则它将居中，或者根据clipViewport它是否更大来处理。默认情况下禁用。// rfb.resizeSession = true; //是一个boolean指示是否每当容器改变尺寸应被发送到调整远程会话的请求。默认情况下禁用this.rfb = rfb;}
#再mounted中引用
this.connectVnc()
#自适应宽高
function changeMobsfIframe(){const mobsf = document.getElementById('screen');const deviceWidth = document.body.clientWidth;const deviceHeight = document.body.clientHeight;mobsf.style.width = 100 + '%'; //数字是页面布局宽度差值mobsf.style.height = (Number(deviceHeight)-109) + 'px'; //数字是页面布局高度差}changeMobsfIframe()window.onresize = function(){changeMobsfIframe()}

使用xterm.js特别小心版本，因为3.和4.版本区别还是比较大的，3.里面像fit、attach已经被拿出来了，xterm.on也更换了用法，具体的更新参考以下：https://github.com/xtermjs/xterm.js/releases/tag/4.0.0

我的配置也感谢下面这位小姐姐：
https://blog.csdn.net/weixin_38318244/article/details/103908129

#html
<divstyle="height: 100%;background: #002833;"
><div id="terminal" ref="terminal"></div>
</div>

#需要引入
import { Terminal } from "xterm";
import "xterm/dist/xterm.css";
import * as fit from "xterm/lib/addons/fit/fit";
import * as fullscreen from "xterm/lib/addons/fullscreen/fullscreen";            //全屏
import * as attach from "xterm/lib/addons/attach/attach";
Terminal.applyAddon(fit);
Terminal.applyAddon(attach);
Terminal.applyAddon(fullscreen); // Apply the `fullscreen` addon

#data参数
order: "",
urlParam: {fullTag: "",namespace: "",podName: ""
},
shellWs: "",         //ws实例
term: "", // 保存terminal实例
showOrder: "", // 保存服务端返回的命令
rows: 40,
cols: 100,

#mounted初始化配置
let _this = this;this.rows = document.body.offsetHeight / 16 - 9;this.cols = document.body.offsetWidth / 14;//this.cols = 400let term = new Terminal({rendererType: "canvas", //渲染类型rows: parseInt(_this.rows), //行数cols: parseInt(_this.cols), // 不指定行数，自动回车后光标从下一行开始convertEol: true, //启用时，光标将设置为下一行的开头scrollback: 800,  //终端中的回滚量disableStdin: false, //是否应禁用输入。cursorStyle: "underline", //光标样式cursorBlink: true, //光标闪烁theme: {foreground: "#ffffff", //字体background: "#002833", //背景色cursor: "help", //设置光标lineHeight: 16}});// 换行并输入起始符“$”term.prompt = () => {term.write("\r\n$ ");};// Load WebLinksAddon on terminal, this is all that's needed to get web links// working in the terminal.// term.loadAddon(new WebLinksAddon());term.open(this.$refs["terminal"]);term.toggleFullScreen(); //全屏window.onresize = function() {term.fit();term.toggleFullScreen(); //全屏term.prompt();}function runFakeTerminal(_this) {if (term._initialized) {return;}term._initialized = true;term.prompt = () => {term.write("\r\n ");};term.writeln("Welcome to use Superman. ");term.writeln(`This is Web Terminal of pod\x1B[1;3;31m ${_this.urlParam.podName}\x1B[0m in namespace\x1B[1;3;31m ${_this.urlParam.namespace}\x1B[0m`);term.prompt();//   console.log("term", term);// 监控键盘输入事件// / **//     *添加事件监听器，用于按下键时的事件。事件值包含//     *将在data事件以及DOM事件中发送的字符串//     *触发了它。//     * @返回一个IDisposable停止监听。//  * /term.on("key", function(key) {let order = {data: key,status: 0};            //重点是这里，主要还是要看清楚你的后台接收的数据是什么样的，不一定是{data:'',status:''}，这个坑踩得我很惨，要看后台的接收数据！！！_this.onSend(order);});term.on("paste", function(data) {_this.order = data;term.write(data);});term.on("resize", size => {let order = {Rows: parseInt(size.rows),Cols: parseInt(size.cols),Op: "resize"};_this.onSend(order);});_this.term = term;}runFakeTerminal(_this);

#methods
/*** **wsShell 创建页面级别的websocket,加载页面数据* ws 接口:/v1/task/deploy/detail/container* 参数:无* ws参数:* @deployId   任务id* @tagString  当前节点* 返回:无* **/wsShell() {            //记得在created中调用const _this = this;this.shellWs = new WebSocket('ws://.....')                     //建立websocket，因为xterm.js是用websocket做交互的     this.shellWs.onopen = function(){console.log('open')},this.shellWs.onmessage = function(e){let data = JSON.parse(e.data)if (data.message == "\n" || data.message == "\r\nexit\r\n") {_this.$message.error("连接已关闭");}_this.term.write(data.message);_this.showOrder = data.message;_this.order = "";}this.shellWs.onclose= function(){_this.$message.error({message: "ws 请求失败,请刷新重试~",duration: 5000});}},onSend(data) {const _this = this//   data = this.base.isObject(data) ? JSON.stringify(data) : data;          //这两个具体作用在本配置没什么作用了，具体看小姐姐的用处//   data = this.base.isArray(data) ? data.toString() : data;data = JSON.stringify(data)data = data.replace(/\\\\/, "\\");_this.shellWs.send(data);},//删除左右两端的空格trim(str) {return str.replace(/(^\s*)|(\s*$)/g, "");}

【个人笔记】vue+xterm.js+novnc实现终端交互和远程桌面相关推荐

CKS CKA CKAD 将终端更改为远程桌面
https://wuestkamp.medium.com/cks-cka-ckad-changed-terminal-to-remote-desktop-157a26c1d5e CKS.CKA.CKA ...
vue+xterm.js实现webssh踩坑之旅
最近在做的项目需要使用xterminal实现网页远程连接Linux终端,引了这个插件后发现问题很多,接下来一一记录问题所在. 一.如何在vue项目中使用xterm.js 安装xterm.js,博主使用 ...
vue+xterm.js 实现Linux command界面
首先安装 node 安装xterm npm i xterm --save 在 main.js 中加入: import 'xterm/dist/xterm.css' 创建 Console.vue < ...
注册表禁用远程桌面服务器,注册表配置远程桌面终端服务修改远程桌面端口号...
如何通过注册表来配置终端服务,一键修改远程桌面端口号,避免使用组策略配置远程桌面终端服务带来的繁琐操作? Terminal Server mstsc 注册表配置文件,附有注释,一看就懂的. 将以下全部 ...
以终端模式连接远程桌面
新建一个内容为以下的批处理(.bat)文件,运行,输入远程机器地址: @echo off c: cd c:\windows set /p ser=服务器地址: mstsc /v:%ser% /admi ...
前端终端组件Xterm.js使用方法
xterm 是一个使用 TypeScript 编写的前端终端组件,可以直接在浏览器中实现一个命令行终端应用. 主要特性: 终端应用程序正常工作:Xterm.js适用于大多数终端应用程序,如bash,v ...
Rapid7警告声明：远程桌面协议（RDP）暴露数百万 Windows 终端
本文讲的是Rapid7警告声明:远程桌面协议(RDP)暴露数百万 Windows 终端,去年6月,卡巴斯基实验室研究人员揭露,黑客利用远程桌面协议(RDP)窃取85,000台来自医院.学校.航空公司和 ...
树莓派怎么切换输入法_树莓派安装中文界面/输入法/远程桌面控制实测笔记教学...
之前逛某宝无意间发现世上最小的电脑(树莓派),由于本人比较喜欢电子产品尤其是电脑这,我就进去了,这一进不要紧MD我特么居然非得买.然后就买了安装系统我就不说了(这个比较简单只需要下载解压开机 ...
Proxmox VE（PVE）配置xterm.js终端
PVE创建虚拟机后默认只能noVNC方式连接虚拟机,该终端无法复制粘贴,非常不方便. PVE还提供了xterm.js终端,xterm.js终端是一种Web终端,简单配置后可满足复制粘贴命令的需求. 配 ...

【个人笔记】vue+xterm.js+novnc实现终端交互和远程桌面

由于xterm.js官方还是比较坑的，没什么比较完整的实例，在网上搜索的资料很多没有表明版本号导致浪费了很多的时间，此处先说使用版本xterm.js-------3.12.0 @novnc/novnc------1.1.0

使用xterm.js特别小心版本，因为3.和4.版本区别还是比较大的，3.里面像fit、attach已经被拿出来了，xterm.on也更换了用法，具体的更新参考以下：https://github.com/xtermjs/xterm.js/releases/tag/4.0.0

【个人笔记】vue+xterm.js+novnc实现终端交互和远程桌面相关推荐

最新文章

热门文章