node.js+react.js+xterm.js构建webssh

时间: 2019-01-10阅读: 79标签: node

概述

先讲一下简单的原理:前端和后端的通信,使用的是socket.js,后端连接服务器,使用的是ssh2.js,页面显示出控制台这个操作页面,使用的是xterm.js。整个工作流程就是:前端在xterm.js里面输入文字,通过socket和后端通信,后端把前端传过来的命令,通过ssh2连接服务器,得到服务器返回的数据,通过socket传给前端,前端再显示出socket返回的内容。所以这里贴一下几个官网,可以先了解一下。
https://socket.io/
https://github.com/staltz/xst...
https://github.com/mscdex/ssh2
再讲一下需求:我这里要创建一个服务端,能够支持从前端得到要连接的服务器信息,再去创建ssh2连接,并且在页面上能够同时存在多个xterm窗口,这些窗口不存在信息的相互影响。


服务端代码

在收到前端的createNewServer信息时,会创建一个新的ssh连接。为了区分不同的服务器窗口,前端必须传递一个msgId,用于给后端发送消息。然后前端就能够监听不同的msgId,将socket传递过来的信息显示到不同的xterm窗口上。

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var utf8 = require('utf8');
var SSHClient = require('ssh2').Client;

function createNewServer(machineConfig, socket) {
    var ssh = new SSHClient();
    let {msgId, ip, username, password} = machineConfig;
    ssh.on('ready', function () {
        socket.emit(msgId, '\r\n***' + ip + ' SSH CONNECTION ESTABLISHED ***\r\n');
        ssh.shell(function(err, stream) {
            if(err) {
                return socket.emit(msgId, '\r\n*** SSH SHELL ERROR: ' + err.message + ' ***\r\n');
            }
            socket.on(msgId, function (data) {
                stream.write(data);
            });
            stream.on('data', function (d) {
                socket.emit(msgId, utf8.decode(d.toString('binary')));
            }).on('close', function () {
                ssh.end();
            });
        })
    }).on('close', function () {
        socket.emit(msgId, '\r\n*** SSH CONNECTION CLOSED ***\r\n');
    }).on('error', function (err) {
        console.log(err);
        socket.emit(msgId, '\r\n*** SSH CONNECTION ERROR: ' + err.message + ' ***\r\n');
    }).connect({
        host: ip,
        port: 22,
        username: username,
        password: password
    });
}


io.on('connection', function(socket) {
    socket.on('createNewServer', function(machineConfig) {//新建一个ssh连接
        console.log("createNewServer")
        createNewServer(machineConfig, socket);
    })

    socket.on('disconnect', function(){
        console.log('user disconnected');
      });
})

http.listen(8000, function() {
    console.log('listening on * 8000');
})


前端代码

前端主要是先打开socket.io连接,在点击创建按钮的时候,把服务器的信息和msgId传递给后台,让后台能够创建一个新的ssh连接,然后在xterm窗口输入数据的时候,把数据发送给服务端,并且监听服务器返回的消息显示到界面上来。
App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NetWorkConfig from "./NetWorkConfig"
import "../node_modules/xterm/dist/xterm.css"
import 'antd/dist/antd.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <NetWorkConfig/>
      </div>
    );
  }
}

export default App;

NetWorkConfig.jsx

import React from "react"
import openSocket from 'socket.io-client';
import {Button} from "antd"
import XtermTest from "./XtermTest"

const socket = openSocket('http://localhost:8000');

class NetWorkConfig extends React.Component {
    constructor(props) {
        super(props);
        this.createServer1 = this.createServer1.bind(this);
        this.createServer2 = this.createServer2.bind(this);
        this.term1 = null;
        this.term2 = null;
    }

    createServer1() {
        socket.emit("createNewServer", {msgId: 'net1', ip: "192.168.79.100", username: "lss", password: "PassW0rd"});
        let term = this.term1.getTerm();
        term.on("data", function(data) {
            socket.emit('net1', data);
        })
        socket.on("net1", function (data) {
            console.log(data)
            term.write(data)
        })
    }

    createServer2() {
        socket.emit("createNewServer", {msgId: 'net2', ip: "192.168.79.100", username: "lss", password: "PassW0rd"});
        let term = this.term2.getTerm();
        term.on("data", function(data) {
            socket.emit('net2', data);
        })
        socket.on("net2", function (data) {
            term.write(data)
        })
    }

    render() {
        return <div>
                    <Button onClick={this.createServer1}>按钮1</Button>
                    <Button onClick={this.createServer2}>按钮2</Button>
                    <XtermTest ref={(term1) => {this.term1 = term1}} id="net1"/>
                    <XtermTest ref={(term2) => {this.term2 = term2}} id="net2"/>
                </div>

    }
    
}

export default NetWorkConfig

XtermTest.jsx

import React from "react"
import { Terminal } from 'xterm';
import * as fit from '../node_modules/xterm/dist/addons/fit/fit';



class XtermTest extends React.Component {
    constructor(props) {
        super(props)
        this.getTerm = this.getTerm.bind(this);
    }

    render() {
        return <div id={this.props.id}></div>
    }

    getTerm() {
        return this.term;
    }

    componentDidMount() {
        Terminal.applyAddon(fit);
        let {id} = this.props;
        let terminalContainer = document.getElementById(id);
        this.term = new Terminal({cursorBlink: true});
        this.term.open(terminalContainer);
        this.term.fit();
    }

}

export default XtermTest


启动说明

先node启动server.js,然后再正常启动react工程。目前还是一个比较粗糙的版本。效果如图:点击按钮1的时候初始化第一个窗口,点击按钮2的时候初始化第二个窗口。因为传递了不同的msgId,两个窗口不会有信息的干扰。


来自:https://segmentfault.com/a/1190000017835511


安装nvm管理不同的node版本

在工作或者学习中,偶尔会遇到需要切换不同node版本的需求,幸好有神器nvm可以帮我们解决问题。下面我们就来讲解如何在window系统上安装nvm! 第一步,当然要下载nvm啦,传送门,目前最新的版本是1.17,注意,笔者下载的是nvm-noinstall.zip的压缩文件

node.js中net网络模块TCP服务端与客户端的使用

node.js中net模块为我们提供了TCP服务器和客户端通信的各种接口。创建服务器并监听端口,net.Socket是一个socket端口对象,是一个全双工的可读可写流,创建一个tcp客户端

Nodejs ORM框架Sequelize快速入门

什么是ORM?简单的讲就是对SQL查询语句的封装,让我们可以用OOP的方式操作数据库,优雅的生成安全、可维护的SQL代码。什么是Sequelize?Sequelize是一款基于Nodejs功能强大的异步ORM框架。

Ubuntu 上 Node.js 安装和卸载

Ubuntu 安装 Node.Js:执行检查可更新的软件,先用普通的apt工具安装低版本的node,然后再升级最新。更换淘宝的镜像,这个是必须的,用过的node的人都知道。安装更新版本的工具N

使用pkg打包Node.js应用的方法步骤

Node.js应用不需要经过编译过程,可以直接把源代码拷贝到部署机上执行,确实比C++、Java这类编译型应用部署方便。然而,Node.js应用执行需要有运行环境,意味着你需要先在部署机器上安装Node.js

当node升级后导致webpack打包出错,node-saas出问题的解决办法

node-saas就需要python环境了,所以很多人又不知道,就升级了node,导致node-saas无法使用了,结果导致node-saas出错,解决办法如下:npm install -g node-gyp ,npm install --global --production windows-build-tools

Node.js定时邮件的那些事儿

近开发一个项目,需要在Node.js程序里实现定期给管理员发邮件的功能。笔者平时只会在Web界面收发邮件。对邮件的原理完全不懂(可能大学教过,然而全忘了),直到要解决这个问题。

nodejs 文本逐行读写功能的实现

利用nodejs实现:逐行读写(从一个文件逐行复制到另外一个文件);逐行读取、处理和写入(读取一行,处理后,写入另一个文件)1.所需要的模块: fs,os,readline。功能的实现:readWriteFileByLine.js,功能的调用:index.js

虎牙直播弹幕转换字幕格式 基于Node.js 的 huya-danmu

首先安装nodejs运行环境, 从 http://nodejs.cn/download/ 下载对应的版本, 安装 huya-danmu 模块, https://github.com/BacooTang/huya-danmu 有详细的安装方法,参照 huya-danmu 模块中 test.js 编写 huya.js 新文件,录视频的同时运行 huyaDanmu 批处理命令, 就不用在调整时间轴;

NodeJS沙盒逃逸研究

在这篇文章中,我们将探讨如何使用解释器的内部结构来逃离NodeJS沙箱。Node.js不是一个JavaScript框架,不同于CakePHP、Django、Rails。Node.js更不是浏览器端的库,不能与jQuery、ExtJS相提并论。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯