本篇内容介绍了“react express怎么实现webssh demo解析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
WebSSH 可以分成以下几个模块:
前端界面:使用 xterm.js 实现一个基于浏览器的终端界面。
WebSocket 连接:使用 WebSocket 连接连接 WebSSH 服务器后端。
SSH 连接:使用 ssh3.js 库连接 SSH 服务器,然后在 WebSocket 和 SSH 之间建立一个双向通讯。
服务器端代码使用 Node.js 和 WebSocket 模块实现,主要用于连接到远程 SSH 服务器并与前端建立 WebSocket 连接。
const SSHClient = require('ssh3').Client;
const utf8 = require('utf8');
export const createNewServer = (machineConfig: any, socket: any) => {
const ssh = new SSHClient();
const { host, username, password } = machineConfig;
// 连接成功
ssh.on('ready', function () {
socket.send('\r\n*** SSH CONNECTION SUCCESS ***\r\n');
ssh.shell(function (err: any, stream: any) {
// 出错
if (err) {
return socket.send('\r\n*** SSH SHELL ERROR: ' + err.message + ' ***\r\n');
}
// 前端发送消息
socket.on('message', function (data: any) {
stream.write(data);
});
// 通过sh发送消息给前端
stream.on('data', function (d: any) {
socket.send(utf8.decode(d.toString('binary')));
// 关闭连接
}).on('close', function () {
ssh.end();
});
})
// 关闭连接
}).on('close', function () {
socket.send('\r\n*** SSH CONNECTION CLOSED ***\r\n');
// 连接错误
}).on('error', function (err: any) {
socket.send('\r\n*** SSH CONNECTION ERROR: ' + err.message + ' ***\r\n');
// 连接
}).connect({
port: 22,
host,
username,
password
});
}
前端代码主要包括一个包装 xterm.js 的 React 组件和一些 WebSockets 相关的代码。
import React, { useEffect, useRef } from 'react';
import { Terminal } from 'xterm';
import { WebLinksAddon } from 'xterm-addon-web-links';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';
const FontSize = 14;
const Col = 80;
const WebTerminal = () => {
const webTerminal = useRef(null);
const ws = useRef(null);
useEffect(() => {
// 初始化终端
const ele = document.getElementById('terminal');
if (ele && !webTerminal.current) {
const height = ele.clientHeight;
// 初始化
const terminal = new Terminal({
cursorBlink: true,
cols: Col,
rows: Math.ceil(height / FontSize),
});
// 辅助
const fitAddon = new FitAddon();
terminal.loadAddon(new WebLinksAddon());
terminal.loadAddon(fitAddon);
terminal.open(ele);
terminal.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
fitAddon.fit();
webTerminal.current = terminal;
}
// 初始化ws连接
if (ws.current) ws.current.close();
const socket = new WebSocket('ws://localhost:3001');
socket.onopen = () => {
socket.send('connect success');
};
ws.current = socket;
}, []);
useEffect(() => {
// 新增监听事件
const terminal = webTerminal.current;
const socket = ws.current;
if (terminal && socket) {
// 监听
terminal.onKey(e => {
const { key } = e;
socket.send(key);
});
// ws监听
socket.onmessage = e => {
console.log(e);
if (typeof e.data === 'string') {
terminal.write(e.data);
} else {
console.error('格式错误');
}
};
}
}, []);
return <div id="terminal" style={{ backgroundColor: '#000', width: '100vw', height: '100vh' }}/>;
};
export default WebTerminal;
WebSSH 组件借助 Hooks 特性进行 WebSocket 和 xterm.js 的初始化。具体来说,这个组件使用了 useEffect Hook 在组件挂载时完成以下工作:
初始化 Terminal 组件。
初始化 WebSocket 连接。
为 Terminal 组件绑定输入事件和 WebSocket 发送数据的逻辑。
你需要在你的 React的index.js 文件中引入 WebSSH 组件,并在你的应用中渲染它:
import WebSSH from './components/WebSSH';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<WebSSH />,
document.getElementById('root')
);
“react express怎么实现webssh demo解析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://juejin.cn/post/7217657943607574565