Web-SSH访问服务器,取代Xshell、putty。
以前访问自己的云服务器都需要用Xshell等工具,着实不够方便,于是打算动手写一个web-ssh的工具来随时访问服务器。
- 在实现之前,让我们先看一下web和服务器之间的通信过程:
- 因为Vue写的前端并不能直接发起SSH通信,所以我们还需写一个后台来接收命令并发起SSH通信。
- Vue前端为了实现Shell的交互界面,我使用了Xterm
来达到效果。 - 后台采用的是SpringBoot,当然,最重要的还是有一台自己的云服务器。
话不多说,马上开始。
-
Vue前端样式。
首先 在自己的vue项目下引入Xterms
npm install --save xterm
一个最基本的xterm用法内容如下,可直接复制使用
<template> <div id="terminal" style="margin:30px 0 0 0;height:300px;width:auto"></div> </div> </template> <script> import { Terminal } from "xterm"; import "xterm/css/xterm.css"; import "xterm/lib/xterm.js"; var term = new Terminal({ cursorBlink: true, // 光标闪烁 cursorStyle: "block"