由于项目跟plc方面对接，前端需要实时获取数据进行展示
打印数据效果
后缀可以跟后端进行协商，我们项目用的是12345，通道值不能重复，如果重复的话会顶替上一个通道
websock = new WebSocket("ws://xxx.xxx.xxx.xxx:12345/ws");
socket.ts
// @ts-nocheck
import { ElNotification } from "element-plus";
let websock = null
let global_callback = null
function createWebSocket(callback: any) {
if (websock == null || typeof websock !== WebSocket) {
return initWebSocket(callback);
} else {
return new Promise((resolve, reject) => {
reject()
})
}
}
function initWebSocket(callback: any) {
return new Promise((resolve, reject) => {
global_callback = callback;
// 初始化websocket
websock = new WebSocket("");
websock.onmessage = function (e: any) {
websocketonmessage(e);
};
websock.onclose = function (e: any) {
websocketclose(e);
};
websock.onopen = function () {
websocketOpen();
resolve()
};
// 连接发生错误的回调方法
websock.onerror = function () {
ElNotification({
title: '链接错误',
message: 'WebSocket连接发生错误',
type: 'error',
})
console.log("WebSocket连接发生错误");
reject()
};
})
}
// 实际调用的方法
function sendSock(agentData : any) {
if (websock.readyState === websock.OPEN) {
// 若是ws开启状态
websocketsend(agentData);
} else if (websock.readyState === websock.CONNECTING) {
// 若是 正在开启状态，则等待1s后重新调用
setTimeout(function () {
sendSock(agentData);
}, 1000);
} else {
// 若未开启 ，则等待1s后重新调用
setTimeout(function () {
sendSock(agentData);
}, 1000);
}
}
function closeSock() {
websock.close();
}
// 数据接收
function websocketonmessage(msg: any) {
// console.log("收到数据:"+msg);
// global_callback(JSON.parse(msg.data));
// 收到信息为Blob类型时
let result = null;
// debugger
if (msg.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(msg.data, "UTF-8");
reader.onload = (e) => {
result = JSON.parse(reader.result);
//console.log("websocket收到", result);
global_callback(result);
};
} else {
result = JSON.parse(msg.data);
//console.log("websocket收到", result);
global_callback(result);
}
}
// 数据发送
function websocketsend(agentData: any) {
console.log("发送数据：" + agentData);
websock.send(agentData);
}
// 关闭
function websocketclose(e: any) {
console.log("connection closed (" + e.code + ")");
}
function websocketOpen() {
console.log("连接打开");
}
export { sendSock, createWebSocket, closeSock };
页面进行引用进行使用
<script lang="ts" setup>
import { createWebSocket, sendSock } from "@/api/socket";
const getData = () => {
//这个参数是用来开启通道用的，可以进行登录的时候拿用户id来用
var sendData = '1234567'
sendSock(sendData)
}
const onload = () => {
createWebSocket(global_callbackMixer).then(() => {
getData();
});
}
const global_callbackMixer = (msg) => {
//获取每秒执行的值
console.log(msg);
}
onMounted(()=>{
onload()
})
</script>
