02: tornado结合Websocket进行WebSSH的实现

1.1 WebSSH介绍

 　　1、什么是WebSSH?

　　　　　　1. webssh 泛指一种技术可以在网页上实现一个 SSH 终端。

　　　　　　2. 从而无需 Xshell 之类的模拟终端工具进行 SSH 连接，将 SSH 这一比较低层的操作也从 C/S 架构扭成了 B/S 架构

　　　　　　3. 这样的架构常用在运维制作开发一些堡垒机等系统中，或是目前比较新型的在线教育方式

　　　　　　4. 通过WebSSH 向学生提供一个可以直接使用浏览器进行相关 Linux 操作或代码编写的学习方式

　　　　　　5. WebSSh 主要是建立客户端与服务端的即时通信

 　　2、要实现WebSSH技术栈介绍

# 前端
vue
websocket
xterm.js

# 后端
tornado
dwebsocket
paramiko
threading

　　3、技术介绍

　　　　1）xterm

　　　　　　　　前端通过 xterm 插件进行 shell 黑窗口环境的搭建，

　　　　　　　　这个插件会自动解析由后台 paramiko 返回的带有标记样式的命令结果，并渲染到浏览器中，非常酷炫
　　　　　　
　　　　2）websocket

　　　　　　　　这里通过 websocket 进行浏览器与 tornado 的双向通信。

　　　　3）paramiko

　　　　　　　　paramiko 此时的角色用来承担 tornado与 Linux 环境的交互，

　　　　　　　　将前端发来的命令发送给后台，将后台发来的命令结果返回到前端的 xterm 组件中

1.2 前端实现

        参考代码：https://gitee.com/edushiyanlou/webssh

　　1、初始化vue项目

vue init webpack webssh
npm install  --save  xterm@3.1.0

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 引入xterm.css样式
import 'xterm/dist/xterm.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

src\main.js  文件中引入xterm.css文件