xterm 是一个使用 TypeScript 编写的前端终端组件，可以直接在浏览器中实现一个命令行终端应用。Xterm.js 适用于大多数终端应用程序，如 bash，vim 和 tmux，这包括对基于curses的应用程序和鼠标事件的支持。
// 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看到依赖
websocket主要用于将前端的指令传递到后端，后端做出响应在传回前端显示。
springboot中安装依赖
<!-- WebSocket 支持 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<template>
<div class="console" id="terminal" style="min-height: cala(100vh)"></div>
</template>
这一部分是填写你后端连接的地址，注意不要弄错
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>
这一部分是因为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>
@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");
}
}
主要的实现是这两个核心类，这里是通过ssh去连接服务器的。
这里填写你的服务器用户名，密码等
@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) {
}
// }
}
}
以上就是终端的实现了，（有问题可以私信我）希望能帮助到大家。
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？