效果图
1.工具介绍与安装
1.1 xterm.js
xterm 是一个使用 TypeScript 编写的前端终端组件,可以直接在浏览器中实现一个命令行终端应用。Xterm.js 适用于大多数终端应用程序,如 bash,vim 和 tmux,这包括对基于curses的应用程序和鼠标事件的支持。
1.2 安装
// 1、安装 xterm
npm install --save xterm
// 2、安装xterm-addon-fit
// xterm.js的插件,使终端的尺寸适合包含元素。
npm install --save xterm-addon-fit
// 3、安装xterm-addon-attach(这个你不用就可以不装)
// xterm.js的附加组件,用于附加到Web Socket
npm install --save xterm-addon-attach
安装完之后可以在package.json看到依赖
1.3 websocket
websocket主要用于将前端的指令传递到后端,后端做出响应在传回前端显示。
springboot中安装依赖
<!-- WebSocket 支持 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.前端实现
2.1 模板部分
//菜单中
<template>
<div class="console" id="terminal" style="min-height: cala(100vh)"></div>
</template>
//这种是直接vue里面
<template>
<section>
<div id="log" style="margin:10px auto;">
<div class="console" id="terminal"></div>
</div>
</section>
</template>
2.2 逻辑部分
这一部分是填写你后端连接的地址,注意不要弄错
const WebSocketUrl = "wss://localhost:8080/ws/ssh";
<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import { AttachAddon } from "xterm-addon-attach";
export default {
name: "Xterm",
props: {
socketURI: {
type: String,
default: ""
}
},
data () {
return {
term: null,
socket: null,
rows: 32,
cols: 20,
SetOut: false,
isKey: false,
};
},
mounted () {
this.initSocket();
},
beforeDestroy () {
this.socket.close();
// this.term.dispose();
},
methods: {
//Xterm主题
initTerm () {
const term = new Terminal({
rendererType: "canvas", //渲染类型
rows: this.rows, //行数
// cols: this.cols,// 设置之后会输入多行之后覆盖现象
convertEol: true, //启用时,光标将设置为下一行的开头
// scrollback: 10,//终端中的回滚量
fontSize: 14, //字体大小
disableStdin: false, //是否应禁用输入。
cursorStyle: "block", //光标样式
// cursorBlink: true, //光标闪烁
scrollback: 30,
tabStopWidth: 4,
theme: {
foreground: "yellow", //字体
background: "#060101", //背景色
cursor: "help" //设置光标
}
});
const attachAddon = new AttachAddon(this.socket);
const fitAddon = new FitAddon();
term.loadAddon(attachAddon);
term.loadAddon(fitAddon);
term.open(document.getElementById("terminal"));
term.focus();
let _this = this;
//限制和后端交互,只有输入回车键才显示结果
term.prompt = () => {
term.write("\r\n$ ");
};
term.prompt();
function runFakeTerminal (_this) {
if (term._initialized) {
return;
}
// 初始化
term._initialized = true;
term.writeln();//控制台初始化报错处
term.prompt();
// / **
// *添加事件监听器,用于按下键时的事件。事件值包含
// *将在data事件以及DOM事件中发送的字符串
// *触发了它。
// * @返回一个IDisposable停止监听。
// * /
// / ** 更新:xterm 4.x(新增)
// *为数据事件触发时添加事件侦听器。发生这种情况
// *用户输入或粘贴到终端时的示例。事件值
// *是`string`结果的结果,在典型的设置中,应该通过
// *到支持pty。
// * @返回一个IDisposable停止监听。
// * /
// 支持输入与粘贴方法
term.onData(function (key) {
let order = {
Data: key,
Op: "stdin"
};
_this.onSend(order);
});
_this.term = term;
}
runFakeTerminal(_this);
},
//webShell主题
initSocket () {
// const WebSocketUrl = "ws://localhost:8080/ws/ssh";
const WebSocketUrl = "wss://localhost:8080/ws/ssh";
this.socket = new WebSocket(
WebSocketUrl
);
this.socketOnClose(); //关闭
this.socketOnOpen(); //
this.socketOnError();
},
//webshell链接成功之后操作
socketOnOpen () {
this.socket.onopen = () => {
// 链接成功后
this.initTerm();
};
},
//webshell关闭之后操作
socketOnClose () {
this.socket.onclose = () => {
console.log("close socket");
};
},
//webshell错误信息
socketOnError () {
this.socket.onerror = () => {
console.log("socket 链接失败");
};
},
//特殊处理
onSend (data) {
data = this.base.isObject(data) ? JSON.stringify(data) : data;
data = this.base.isArray(data) ? data.toString() : data;
data = data.replace(/\\\\/, "\\");
this.shellWs.onSend(data);
},
//删除左右两端的空格
trim (str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
}
};
</script>
2.3 样式 以及自适应屏幕大小
这一部分是因为xterm.js的FitAddon 只会横向的去适应屏幕大小,纵向他会有留白。这里是覆盖了xterm的一个原来的样式,下面的scope里面的是对字体的一些修饰
<style>
.xterm-screen{
min-height: calc(100vh);
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.xterm-screen{
min-height: calc(100vh);
}
</style>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
3.后端实现
3.1 实体类部分
/**
*
* @Description SshModel实体类
*/
public class SshModel {
private String name;
private String host;
private Integer port;
private String user;
private String password;
/**
* 编码格式
*/
private String charset;
/**
* 文件目录
*/
private String fileDirs;
/**
* ssh 私钥
*/
private String privateKey;
private String connectType;
/**
* 不允许执行的命令
*/
private String notAllowedCommand;
/**
* 允许编辑的后缀文件
*/
private String allowEditSuffix;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getNotAllowedCommand() {
return notAllowedCommand;
}
public void setNotAllowedCommand(String notAllowedCommand) {
this.notAllowedCommand = notAllowedCommand;
}
public ConnectType connectType() {
return EnumUtil.fromString(ConnectType.class, this.connectType, ConnectType.PASS);
}
public String getConnectType() {
return connectType;
}
public void setConnectType(String connectType) {
this.connectType = connectType;
}
public String getPrivateKey() {
return privateKey;
}
public void setPrivateKey(String privateKey) {
this.privateKey = privateKey;
}
public String getFileDirs() {
return fileDirs;
}
public void setFileDirs(String fileDirs) {
this.fileDirs = fileDirs;
}
public List<String> fileDirs() {
return StringUtil.jsonConvertArray(this.fileDirs, String.class);
}
public void fileDirs(List<String> fileDirs) {
if (fileDirs != null) {
for (int i = fileDirs.size() - 1; i >= 0; i--) {
String s = fileDirs.get(i);
fileDirs.set(i, FileUtil.normalize(s));
}
this.fileDirs = JSONArray.toJSONString(fileDirs);
} else {
this.fileDirs = null;
}
}
public String getHost() {
return host;
}
public void setHost(String host) {
this.host = host;
}
public Integer getPort() {
return port;
}
public void setPort(Integer port) {
this.port = port;
}
public String getUser() {
return user;
}
public void setUser(String user) {
this.user = user;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getCharset() {
return charset;
}
public void setCharset(String charset) {
this.charset = charset;
}
public Charset getCharsetT() {
Charset charset;
try {
charset = Charset.forName(this.getCharset());
} catch (Exception e) {
charset = CharsetUtil.CHARSET_UTF_8;
}
return charset;
}
public List<String> allowEditSuffix() {
return StringUtil.jsonConvertArray(this.allowEditSuffix, String.class);
}
public void allowEditSuffix(List<String> allowEditSuffix) {
if (allowEditSuffix == null) {
this.allowEditSuffix = null;
} else {
this.allowEditSuffix = JSONArray.toJSONString(allowEditSuffix);
}
}
public String getAllowEditSuffix() {
return allowEditSuffix;
}
public void setAllowEditSuffix(String allowEditSuffix) {
this.allowEditSuffix = allowEditSuffix;
}
/**
* 检查是否包含禁止命令
*
* @param sshItem 实体
* @param inputItem 输入的命令
* @return false 存在禁止输入的命令
*/
public static boolean checkInputItem(SshModel sshItem, String inputItem) {
// 检查禁止执行的命令
String notAllowedCommand = StrUtil.emptyToDefault(sshItem.getNotAllowedCommand(), StrUtil.EMPTY).toLowerCase();
if (StrUtil.isEmpty(notAllowedCommand)) {
return true;
}
List<String> split = Arrays.asList(StrUtil.split(notAllowedCommand, StrUtil.COMMA));
inputItem = inputItem.toLowerCase();
List<String> commands = Arrays.asList(StrUtil.split(inputItem, StrUtil.CR));
commands.addAll(Arrays.asList(StrUtil.split(inputItem, "&")));
for (String s : split) {
//
boolean anyMatch = commands.stream().anyMatch(item -> StrUtil.startWithAny(item, s + StrUtil.SPACE, ("&" + s + StrUtil.SPACE), StrUtil.SPACE + s + StrUtil.SPACE));
if (anyMatch) {
return false;
}
//
anyMatch = commands.stream().anyMatch(item -> StrUtil.equals(item, s));
if (anyMatch) {
return false;
}
}
return true;
}
public enum ConnectType {
/**
* 账号密码
*/
PASS,
/**
* 密钥
*/
PUBKEY
}
}
3.1.1 先配置一个WebSocketConfig类
@Configuration
@ComponentScan
@EnableAutoConfiguration
public class WebSocketConfig implements ServletContextInitializer {
/**
* 给spring容器注入这个ServerEndpointExporter对象
* 相当于xml:
* <beans>
* <bean id="serverEndpointExporter" class="org.springframework.web.socket.server.standard.ServerEndpointExporter"/>
* </beans>
* <p>
* 检测所有带有@serverEndpoint注解的bean并注册他们。
*
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
servletContext.addListener(WebAppRootListener.class);
servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","52428800");
servletContext.setInitParameter("org.apache.tomcat.websocket.binaryBufferSize","52428800");
}
}
3.2 SshHander类
主要的实现是这两个核心类,这里是通过ssh去连接服务器的。
这里填写你的服务器用户名,密码等文章来源:https://www.toymoban.com/news/detail-409381.html
@OnOpen
public void onOpen(javax.websocket.Session session) throws Exception {
SessionSet.add(session);
SshModel sshItem = new SshModel();
sshItem.setHost("xxxx");
sshItem.setPort(xxxx);
sshItem.setUser("xxxx");
sshItem.setPassword("xxxxx");
int cnt = OnlineCount.incrementAndGet(); // 在线数加1
log.info("有连接加入,当前连接数为:{},sessionId={}", cnt,session.getId());
SendMessage(session, "连接成功,sessionId="+session.getId());
HandlerItem handlerItem = new HandlerItem(session, sshItem);
handlerItem.startRead();
HANDLER_ITEM_CONCURRENT_HASH_MAP.put(session.getId(), handlerItem);
}
@ServerEndpoint("/ws/ssh")
@Component
public class SshHandler {
private static final ConcurrentHashMap<String, HandlerItem> HANDLER_ITEM_CONCURRENT_HASH_MAP = new ConcurrentHashMap<>();
@PostConstruct
public void init() {
System.out.println("websocket 加载");
}
private static Logger log = LoggerFactory.getLogger(SshHandler.class);
private static final AtomicInteger OnlineCount = new AtomicInteger(0);
// concurrent包的线程安全Set,用来存放每个客户端对应的Session对象。
private static CopyOnWriteArraySet<javax.websocket.Session> SessionSet = new CopyOnWriteArraySet<javax.websocket.Session>();
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(javax.websocket.Session session) throws Exception {
SessionSet.add(session);
SshModel sshItem = new SshModel();
sshItem.setHost("xxxx");
sshItem.setPort(xxxx);
sshItem.setUser("xxxx");
sshItem.setPassword("xxxxx");
int cnt = OnlineCount.incrementAndGet(); // 在线数加1
log.info("有连接加入,当前连接数为:{},sessionId={}", cnt,session.getId());
SendMessage(session, "连接成功,sessionId="+session.getId());
HandlerItem handlerItem = new HandlerItem(session, sshItem);
handlerItem.startRead();
HANDLER_ITEM_CONCURRENT_HASH_MAP.put(session.getId(), handlerItem);
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(javax.websocket.Session session) {
SessionSet.remove(session);
int cnt = OnlineCount.decrementAndGet();
log.info("有连接关闭,当前连接数为:{}", cnt);
}
/**
* 收到客户端消息后调用的方法
* @param message
* 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, javax.websocket.Session session) throws Exception {
log.info("来自客户端的消息:{}",message);
// SendMessage(session, "收到消息,消息内容:"+message);
HandlerItem handlerItem = HANDLER_ITEM_CONCURRENT_HASH_MAP.get(session.getId());
this.sendCommand(handlerItem, message);
}
/**
* 出现错误
* @param session
* @param error
*/
@OnError
public void onError(javax.websocket.Session session, Throwable error) {
log.error("发生错误:{},Session ID: {}",error.getMessage(),session.getId());
error.printStackTrace();
}
private void sendCommand(HandlerItem handlerItem, String data) throws Exception {
if (handlerItem.checkInput(data)) {
handlerItem.outputStream.write(data.getBytes());
} else {
handlerItem.outputStream.write("没有执行相关命令权限".getBytes());
handlerItem.outputStream.flush();
handlerItem.outputStream.write(new byte[]{3});
}
handlerItem.outputStream.flush();
}
/**
* 发送消息,实践表明,每次浏览器刷新,session会发生变化。
* @param session
* @param message
*/
public static void SendMessage(javax.websocket.Session session, String message) {
try {
// session.getBasicRemote().sendText(String.format("%s (From Server,Session ID=%s)",message,session.getId()));
session.getBasicRemote().sendText(message);
session.getBasicRemote().sendText("dhhw>$");
} catch (IOException e) {
log.error("发送消息出错:{}", e.getMessage());
e.printStackTrace();
}
}
private class HandlerItem implements Runnable {
private final javax.websocket.Session session;
private final InputStream inputStream;
private final OutputStream outputStream;
private final Session openSession;
private final ChannelShell channel;
private final SshModel sshItem;
private final StringBuilder nowLineInput = new StringBuilder();
HandlerItem(javax.websocket.Session session, SshModel sshItem) throws IOException {
this.session = session;
this.sshItem = sshItem;
this.openSession = JschUtil.openSession(sshItem.getHost(), sshItem.getPort(), sshItem.getUser(), sshItem.getPassword());
this.channel = (ChannelShell) JschUtil.createChannel(openSession, ChannelType.SHELL);
this.inputStream = channel.getInputStream();
this.outputStream = channel.getOutputStream();
}
void startRead() throws JSchException {
this.channel.connect();
ThreadUtil.execute(this);
}
/**
* 添加到命令队列
*
* @param msg 输入
* @return 当前待确认待所有命令
*/
private String append(String msg) {
char[] x = msg.toCharArray();
if (x.length == 1 && x[0] == 127) {
// 退格键
int length = nowLineInput.length();
if (length > 0) {
nowLineInput.delete(length - 1, length);
}
} else {
nowLineInput.append(msg);
}
return nowLineInput.toString();
}
public boolean checkInput(String msg) {
String allCommand = this.append(msg);
boolean refuse;
if (StrUtil.equalsAny(msg, StrUtil.CR, StrUtil.TAB)) {
String join = nowLineInput.toString();
if (StrUtil.equals(msg, StrUtil.CR)) {
nowLineInput.setLength(0);
}
refuse = SshModel.checkInputItem(sshItem, join);
} else {
// 复制输出
refuse = SshModel.checkInputItem(sshItem, msg);
}
return refuse;
}
@Override
public void run() {
try {
byte[] buffer = new byte[1024];
int i;
//如果没有数据来,线程会一直阻塞在这个地方等待数据。
while ((i = inputStream.read(buffer)) != -1) {
sendBinary(session, new String(Arrays.copyOfRange(buffer, 0, i), sshItem.getCharsetT()));
}
} catch (Exception e) {
if (!this.openSession.isConnected()) {
return;
}
SshHandler.this.destroy(this.session);
}
}
}
public void destroy(javax.websocket.Session session) {
HandlerItem handlerItem = HANDLER_ITEM_CONCURRENT_HASH_MAP.get(session.getId());
if (handlerItem != null) {
IoUtil.close(handlerItem.inputStream);
IoUtil.close(handlerItem.outputStream);
JschUtil.close(handlerItem.channel);
JschUtil.close(handlerItem.openSession);
}
IoUtil.close(session);
HANDLER_ITEM_CONCURRENT_HASH_MAP.remove(session.getId());
}
private static void sendBinary(javax.websocket.Session session, String msg) {
// if (!session.isOpen()) {
// // 会话关闭不能发送消息
// return;
// }
// synchronized (session.getId()) {
// BinaryMessage byteBuffer = new BinaryMessage(msg.getBytes());
try {
// System.out.println("#####:"+msg);
session.getBasicRemote().sendText(msg);
} catch (IOException e) {
}
// }
}
}
3.3 StringUtil工具类
import cn.hutool.core.date.DateField;
import cn.hutool.core.date.DateTime;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.lang.Validator;
import cn.hutool.core.util.StrUtil;
import cn.hutool.system.SystemUtil;
import com.alibaba.fastjson.JSON;
import java.io.File;
import java.util.List;
/**
* @Description 方法运行参数工具
*
*/
public class StringUtil {
/**
* 支持的压缩包格式
*/
public static final String[] PACKAGE_EXT = new String[]{"tar.bz2", "tar.gz", "tar", "bz2", "zip", "gz"};
/**
* 获取启动参数
* @param args 所有参数
* @param name 参数名
* @return 值
*/
public static String getArgsValue(String[] args, String name) {
if (args == null) {
return null;
}
for (String item : args) {
item = StrUtil.trim(item);
if (item.startsWith("--" + name + "=")) {
return item.substring(name.length() + 3);
}
}
return null;
}
/**
* id输入规则
*
* @param value 值
* @param min 最短
* @param max 最长
* @return true
*/
public static boolean isGeneral(CharSequence value, int min, int max) {
String reg = "^[a-zA-Z0-9_-]{" + min + StrUtil.COMMA + max + "}$";
return Validator.isMatchRegex(reg, value);
}
/**
* 删除文件开始的路径
*
* @param file 要删除的文件
* @param startPath 开始的路径
* @param inName 是否返回文件名
* @return /test/a.txt /test/ a.txt
*/
public static String delStartPath(File file, String startPath, boolean inName) {
String newWhitePath;
if (inName) {
newWhitePath = FileUtil.getAbsolutePath(file.getAbsolutePath());
} else {
newWhitePath = FileUtil.getAbsolutePath(file.getParentFile());
}
String itemAbsPath = FileUtil.getAbsolutePath(new File(startPath));
itemAbsPath = FileUtil.normalize(itemAbsPath);
newWhitePath = FileUtil.normalize(newWhitePath);
String path = StrUtil.removePrefix(newWhitePath, itemAbsPath);
//newWhitePath.substring(newWhitePath.indexOf(itemAbsPath) + itemAbsPath.length());
path = FileUtil.normalize(path);
if (path.startsWith(StrUtil.SLASH)) {
path = path.substring(1);
}
return path;
}
/**
* 获取jdk 中的tools jar文件路径
*
* @return file
*/
public static File getToolsJar() {
File file = new File(SystemUtil.getJavaRuntimeInfo().getHomeDir());
return new File(file.getParentFile(), "lib/tools.jar");
}
/**
* 指定时间的下一个刻度
*
* @return String
*/
public static String getNextScaleTime(String time, Long millis) {
DateTime dateTime = DateUtil.parse(time);
if (millis == null) {
millis = 30 * 1000L;
}
DateTime newTime = dateTime.offsetNew(DateField.SECOND, (int) (millis / 1000));
return DateUtil.formatTime(newTime);
}
// /**
// * 删除 yml 文件内容注释
// *
// * @param content 配置内容
// * @return 移除后的内容
// */
// public static String deleteComment(String content) {
// List<String> split = StrUtil.split(content, StrUtil.LF);
// split = split.stream().filter(s -> {
// if (StrUtil.isEmpty(s)) {
// return false;
// }
// s = StrUtil.trim(s);
// return !StrUtil.startWith(s, "#");
// }).collect(Collectors.toList());
// return CollUtil.join(split, StrUtil.LF);
// }
/**
* json 字符串转 bean,兼容普通json和字符串包裹情况
*
* @param jsonStr json 字符串
* @param cls 要转为bean的类
* @param <T> 泛型
* @return data
*/
public static <T> T jsonConvert(String jsonStr, Class<T> cls) {
if (StrUtil.isEmpty(jsonStr)) {
return null;
}
try {
return JSON.parseObject(jsonStr, cls);
} catch (Exception e) {
return JSON.parseObject(JSON.parse(jsonStr).toString(), cls);
}
}
/**
* json 字符串转 bean,兼容普通json和字符串包裹情况
*
* @param jsonStr json 字符串
* @param cls 要转为bean的类
* @param <T> 泛型
* @return data
*/
public static <T> List<T> jsonConvertArray(String jsonStr, Class<T> cls) {
try {
if (StrUtil.isEmpty(jsonStr)) {
return null;
}
return JSON.parseArray(jsonStr, cls);
} catch (Exception e) {
Object parse = JSON.parse(jsonStr);
return JSON.parseArray(parse.toString(), cls);
}
}
}
以上就是终端的实现了,(有问题可以私信我
)希望能帮助到大家。文章来源地址https://www.toymoban.com/news/detail-409381.html
到了这里,关于WebSocket+xterm+springboot+vue 实现 xshell 操作linux终端功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!