react express实现webssh demo解析

 更新时间:2023年04月04日 12:37:39   作者:黄娟  
这篇文章主要为大家介绍了详解react express实现webssh demo解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

 下面是一个简单的 WebSSH Demo,实现了通过浏览器连接 SSH 服务器并进行交互的功能。

实现 WebSSH 的基本思路

WebSSH 可以分成以下几个模块:

  • 前端界面:使用 xterm.js 实现一个基于浏览器的终端界面。
  • WebSocket 连接:使用 WebSocket 连接连接 WebSSH 服务器后端。
  • SSH 连接:使用 ssh2.js 库连接 SSH 服务器,然后在 WebSocket 和 SSH 之间建立一个双向通讯。

实现 Demo 的代码

服务器端代码

服务器端代码使用 Node.js 和 WebSocket 模块实现,主要用于连接到远程 SSH 服务器并与前端建立 WebSocket 连接。

const SSHClient = require('ssh2').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 应用中使用 WebSSH 组件

你需要在你的 React的index.js 文件中引入 WebSSH 组件,并在你的应用中渲染它:

import WebSSH from './components/WebSSH';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
  <WebSSH />,
  document.getElementById('root')
);

效果

编辑

总结

在本篇博客中,我们学习了如何使用 xterm.js、WebSocket 和 ssh2.js 库构建一个 WebSSH 应用程序。我们创建了一个简单的 Demo 来演示该过程。

完整代码参考

GitHub - judithhuang/webssh-demo

以上就是react express实现webssh demo解析的详细内容,更多关于react express实现webssh的资料请关注脚本之家其它相关文章!

相关文章

  • 每天一个hooks学习之useUnmount

    每天一个hooks学习之useUnmount

    这篇文章主要为大家介绍了每天一个hooks学习之useUnmount,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React Native自定义组件与输出方法详解

    React Native自定义组件与输出方法详解

    这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • React全局状态管理的三种底层机制探究

    React全局状态管理的三种底层机制探究

    近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营,由前端渲染页面的单页应用占比也越来越高,这篇文章主要给大家介绍了关于React全局状态管理的三种底层机制,需要的朋友可以参考下
    2021-09-09
  • react装饰器与高阶组件及简单样式修改的操作详解

    react装饰器与高阶组件及简单样式修改的操作详解

    这篇文章主要介绍了react装饰器与高阶组件及简单样式修改的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • React中父子组件通信详解

    React中父子组件通信详解

    这篇文章主要介绍了React中父子组件通信详解,在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • React Context详解使用过程

    React Context详解使用过程

    在Reactor中提供了Context来替代ThreadLocal,可以实现一个跨线程的共享变量的透明方式。本文主要为大家介绍了Context的用法的用法,感兴趣的可以了解一下
    2023-03-03
  • React组件设计过程之仿抖音订单组件

    React组件设计过程之仿抖音订单组件

    这篇文章主要介绍了React组件设计过程之仿抖音订单组件的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 如何解决React官方脚手架不支持Less的问题(小结)

    如何解决React官方脚手架不支持Less的问题(小结)

    这篇文章主要介绍了如何解决React官方脚手架不支持Less的问题(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React中使用Echarts无法显示title、tooltip等组件的解决方案

    React中使用Echarts无法显示title、tooltip等组件的解决方案

    这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React经典面试题之倒计时组件详解

    React经典面试题之倒计时组件详解

    这些天也都在面试,面试的内容也大多千篇一律,无外乎vue、react这些框架的一些原理,和使用方法,但是也遇到些有趣的题目,这篇文章主要给大家介绍了关于React经典面试题之倒计时组件的相关资料,需要的朋友可以参考下
    2022-03-03

最新评论