先讲一下简单的原理:前端和后端的通信,使用的是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
关于 Node.js 里 ES6 Modules 的一次更新说明,总结来说:CommonJS 与 ES6 Modules 之间的关键不同在于代码什么时候知道一个模块的结构和使用它。
在这个教程中,我们会开发一个命令行应用,它可以接收一个 CSV 格式的用户信息文件,教程的内容大纲:“Hello,World”,处理命令行参数,运行时的用户输入,异步网络会话,美化控制台的输出,封装成 shell 命令,JavaScript 之外
首先你需要生成https证书,可以去付费的网站购买或者找一些免费的网站,可能会是key或者crt或者pem结尾的。不同格式之间可以通过OpenSSL转换
nodej项目在微信环境开发,nodejs的异步特效,会导致请求没有完成就执行下面的代码,出现错误。经过多方查找,可以使用async模块来异步转同步,只有前一个function执行callback,下一个才会执行。
3G的大文件分1500个2M二进度文件,通post方法发送给node服务,服务器全部接收到文件后,进组装生成你上文件。
JavaScript比C的开发门槛要低,尽管服务器端JavaScript存在已经很多年了,但是后端部分一直没有市场,JavaScript在浏览器中有广泛的事件驱动方面的应用,考虑到高性能、符合事件驱动、没有历史包袱这3个主要原因,JavaScript成为了Node的实现语言。
node.js的第一个基本论点是I / O的性能消耗是很昂贵。因此,使用当前编程技术的最大浪费来自于等待I / O完成。有几种方法可以处理性能影响
在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行保护,那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢?
我们经常跟Node.js打交道,即使你是一名前端开发人员 -- npm脚本,webpack配置,gulp任务,程序打包 或 运行测试等。即使你真的不需要深入理解这些任务,但有时候你会感到困惑,会因为缺少Node.js的一些核心概念而以非常奇怪的方式来编码。
运行在 Node.js 之上的 Webpack 是单线程模型的,也就是说 Webpack 需要处理的任务需要一件件挨着做,不能多个事情一起做。happypack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!