<template>
<div>
<span style="display
: flex; justify
-content
: center; margin
-bottom
: 8px">
<img alt="Vue logo" src="../assets/logo.png" style="width
: 90px;">
</span>
<span style="display
: flex; justify
-content
: center; margin
-bottom
: 8px">
当前登录用户：
<input v
-model="userId" placeholder="请输入p13" @keyup.enter="connectWebSocket" >
<button @click="connectWebSocket" style="margin
-left
: 10px; ">登录</button>
</span>
<span style="display
: flex; justify
-content
: center">
<input
v
-model="currentCommand"
style="width
: 600px"
placeholder="输入任意命令（如：ipconfig / dir）"
@keyup.enter="sendCommand"
>
<button @click="sendCommand" style="margin
-left
: 10px; ">执行命令</button>
<button
@click="abortCommand"
style="margin
-left
: 10px; background
: #ff4d4f"
>
中止命令
</button>
</span>
<div style="display
: flex">
<div style="margin
-top
: 20px; width
: 30%;">
<h3 style="text
-align
: center">已执行命令</h3>
<div style="height
: 482px; overflow
-y
: auto; background
: #f8f8f8;" >
<div
v
-for="(msg, index) in messages"
:key="index"
style="margin
-top
: 8px; margin
-left
: 8px; border
-radius
: 4px; overflow
-y
: auto;"
>
{{ msg }}
</div>
</div>
</div>
<div style="padding
: 20px; width
: 70%">
<h3 style="text
-align
: center">实时命令输出</h3>
<
pre
ref="output
Pre"
style="background
: #282c34; color
: #fff; padding
: 15px; border
-radius
: 4px; height
: 450px; overflow
-y
: auto"
>
{{ currentOutput }}
</
pre>
</div>
</div>
</div>
</template>
<script>
import websocket from '@/utils/websocket'
export default {
name
: 'HelloWorld',
props
: {
msg
: String
},
data() {
return {
currentCommand
: '',
messages
: [],
currentOutput
: '',
stompClient
: null,
index
: 1,
userId
: '' // 改为从登录信息获取
};
},
// mounted() {
// this.connectWebSocket(); //
页面加载时连接 WebSocket
// },
methods
: {
async connectWebSocket() {
alert("登录成功");
try {
this.stompClient = await websocket.connect(this.userId);
// 订阅命令输出通道
const subscription = this.stompClient.subscribe(`/topic/commandOutput/${this.userId}`, (message) => {
const output = message.body;
if (output.startsWith("⏹")) {
this.currentOutput = '';
this.messages.push(output);
return;
}
console.log(this.currentOutput)
this.currentOutput += output.trim() + '\n';
this.$nextTick(() => {
if (this.$refs.output
Pre) {
this.$refs.output
Pre.scrollTop = this.$refs.output
Pre.scrollHeight;
}
});
});
// 在断开连接时取消订阅
this.stompClient.onDisconnect = () => {
subscription.unsubscribe();
};
} catch (error) {
console.error('WebSocket连接失败
:', error);
}
},
sendCommand() {
if (this.userId === '') {
alert("请输入当前登录用户");
return;
}
if (this.currentCommand.trim() && this.stompClient) {
// 删除 currentOutput 的最后一个非
空行
if (this.currentOutput) {
let lastNew
LineIndex = this.currentOutput.lastIndexOf('\n');
let lastNonEmptyIndex =
-1;
// 从后往前遍历，找到最后一个非
空行的起始位置
for (let i = this.currentOutput.length
- 1; i >= 0; i
--) {
if (this.currentOutput[i] === '\n') {
// 如果当前字符是换行符，并且之前的字符不是空白字符，则记录位置
if (lastNew
LineIndex !==
-1 && i < lastNew
LineIndex) {
lastNonEmptyIndex = lastNew
LineIndex;
break;
}
lastNew
LineIndex = i;
} else if (this.currentOutput[i].trim() !== '') {
// 找到非空字符，更新 lastNew
LineIndex
lastNew
LineIndex = i;
}
}
// 如果找到了非
空行，则删除它
if (lastNonEmptyIndex !==
-1) {
const nextNew
LineIndex = this.currentOutput.indexOf('\n', lastNonEmptyIndex);
if (nextNew
LineIndex ===
-1) {
this.currentOutput = this.currentOutput.substring(0, lastNonEmptyIndex);
} else {
this.currentOutput = this.currentOutput.substring(0, lastNonEmptyIndex) + this.currentOutput.substring(nextNew
LineIndex);
}
}
// 删除最后一个
空行
if (this.currentOutput.endsWith('\n')) {
this.currentOutput = this.currentOutput.substring(0, this.currentOutput.length
- 1);
}
}
// 发送命令
this.stompClient.publish({
destination
: '/app/executeCommand',
body
: JSON.stringify({
command
: this.currentCommand.trim(),
//todo 之后改为动态
executeHost
: '10.228.73.15',
userId
: this.userId
}),
});
this.messages.push(this.index + '. ' + this.currentCommand);
this.index += 1;
this.currentCommand = '';
}
},
abortCommand() {
if (this.stompClient) {
this.stompClient.publish({
destination
: '/app/abortCommand',
body
: JSON.stringify({ // 改为JSON格式
command
: "ABORT",
userId
: this.userId
})
});
this.messages.push("已发送中止命令");
}
},
onTabChange(key, type) {
this[type] = key;
},
},
beforeDestroy() {
if (this.stompClient) {
this.stompClient.deactivate();
}
}
}
</script>
<style scoped>
pre {
white-space: pre-line; /* 合并连续的空格，但保留换行符 */
background
-color
: #f4f4f4;
padding
: 10px;
border
: 1px solid #ddd;
}
</style>
只有后端返回“该命令执行已结束”的时候，用户才能继续输入命令
探讨了因软件格式插件处理导致HTML标签内出现多余空行的问题及解决方法。当使用pre-line样式时，即使标签间无文字，也会显示为空行。解决此问题的方法是去除不必要的格式。
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
