111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<template>
|
||
<div>
|
||
<div id="log-box" v-html="content"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import request from '@/utils/request2';
|
||
|
||
var _this;
|
||
var socket;
|
||
var sit;
|
||
export default {
|
||
name: "log",
|
||
data() {
|
||
return {
|
||
modelId: '',
|
||
type: '',
|
||
content: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
_this = this;
|
||
},
|
||
methods: {
|
||
close() {
|
||
if (sit) {
|
||
clearInterval(sit);
|
||
}
|
||
_this.content = "";
|
||
if (socket) {
|
||
socket.close();
|
||
}
|
||
},
|
||
init({modelId, type}) {
|
||
_this.content = "";
|
||
_this.modelId = modelId;
|
||
_this.type = type;
|
||
console.log(`当前modelId为${modelId},type为${type}`);
|
||
socket = new WebSocket(`ws://47.103.128.32:10050/socket/file-tail?modelId=${modelId}&type=${type}`);
|
||
//连接打开事件
|
||
socket.onopen = function () {
|
||
console.log("Socket 已打开");
|
||
};
|
||
//收到消息事件
|
||
socket.onmessage = function (msg) {
|
||
if (msg.data.indexOf('连接成功，sessionId=') != -1) {
|
||
var sessionId = msg.data.slice(15);
|
||
console.log(sessionId)
|
||
} else {
|
||
// console.log(msg);
|
||
_this.content += '<p>' + msg.data + "</p>";
|
||
_this.$nextTick(() => {
|
||
document.getElementById("log-box").scrollTop = 100000;
|
||
});
|
||
}
|
||
};
|
||
//连接关闭事件
|
||
socket.onclose = function () {
|
||
console.log("Socket已关闭");
|
||
};
|
||
//发生了错误事件
|
||
socket.onerror = function () {
|
||
alert("Socket发生了错误");
|
||
}
|
||
|
||
|
||
//创建心跳，防止掉线
|
||
sit = setInterval(() => {
|
||
let op = {
|
||
data: "heart",
|
||
};
|
||
sendJson(op);
|
||
}, 5000);
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
function sendJson(data) {
|
||
// 0 CONNECTING 连接尚未建立
|
||
// 1 OPEN WebSocket的链接已经建立
|
||
// 2 CLOSING 连接正在关闭
|
||
// 3 CLOSED 连接已经关闭或不可用
|
||
if (socket.readyState == 2 || socket.readyState == 3) {
|
||
clearInterval(sit);
|
||
sit = null;
|
||
} else {
|
||
socket.send(JSON.stringify(data));
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
#log-box {
|
||
height: 800px;
|
||
overflow-y: auto;
|
||
background-color: #c2c2c2;
|
||
border-radius: 5px;
|
||
padding: 0 25px;
|
||
}
|
||
|
||
#log-box p {
|
||
line-height: 30px;
|
||
font-size: 16px;
|
||
text-indent: 2em;
|
||
color: #313131;
|
||
}
|
||
</style>
|