<template>
|
<BaseCard>
|
<template #content>
|
<div>
|
<el-input type="text" v-model="inputVal" />
|
<button @click="handleSend">send</button>
|
<button @click="handleLink">link</button>
|
</div>
|
<div>业务状态中控</div>
|
<el-scrollbar ref="scrollbarRef" :height="height">
|
<div ref="scrollContentRef">
|
<div v-for="(item, index) in streams" :key="index">
|
<el-text type="primary">[{{ item }}]: </el-text>
|
</div>
|
</div>
|
</el-scrollbar>
|
</template>
|
</BaseCard>
|
</template>
|
<script setup>
|
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
|
import { ws } from '@/api/index';
|
|
const height = `60vh`;
|
|
const scrollContentRef = ref();
|
const scrollbarRef = ref();
|
|
function scrollToBottom() {
|
const h1 = scrollContentRef.value.clientHeight + 100;
|
setTimeout(() => {
|
scrollbarRef.value.setScrollTop(h1);
|
}, 100);
|
}
|
|
const streams = reactive([]);
|
|
let socket;
|
|
const inputVal = ref('');
|
const handleSend = () => {
|
if (socket) {
|
socket.send(inputVal.value);
|
}
|
};
|
|
const handleLink = () => {
|
if (socket) {
|
socket.close();
|
}
|
const url = 'ws://' + ws + '/ws';
|
// socket = new WebSocket(`ws://192.168.0.138:8080/workstream`)
|
socket = new WebSocket(url);
|
// 与服务器建立连接：发送消息到服务器
|
socket.onopen = () => {
|
console.log('connect: ');
|
};
|
// 收到服务器发送的消息：event处理服务器返回的数据
|
socket.onmessage = (event) => {
|
console.log('receive: ', event.data);
|
putWorkStream(event.data);
|
};
|
// 连接或通信过程中发生错误
|
socket.onerror = (event) => {
|
console.log('errror: ', event);
|
};
|
// 与服务器断开连接
|
socket.onclose = (event) => {
|
console.log('close: ', event.code);
|
};
|
};
|
|
/**
|
* 添加一条工作流信息
|
* @param {*} data
|
*/
|
function putWorkStream(data) {
|
const obj = JSON.parse(data);
|
streams.push(obj);
|
scrollToBottom();
|
}
|
</script>
|
