Skip to content

T
tokcos-socket-web-ts-user
提交 49e463f3 作者: Hao
操作

网站修改基础设置的接口

父级 16de3dbb
正在显示 包含 120 行增加 和 95 行删除
index.html
......@@ -6,10 +6,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>userSide</title>
<script >
<!-- <script>
this.resizeTo(800,600);
this.focus();
</script>
</script> -->
</head>
<body>
......
src/assets/css/reset.css
......@@ -147,7 +147,7 @@ table {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box !important;
display: -webkit-box;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
......
src/utils/websocket.ts
import { ElMessage } from "element-plus";
import { useUserStore } from "../store/modules/user";
let HeartbeatTime:any = null;
import {
useRoute
} from 'vue-router';
const route = useRoute() || {}
const routeParams = route.query || {}
let HeartbeatTime: any = null;
let websocket: WebSocket | null = null; // 用于存储实例化后websocket
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
// 创建websocket
let callBack: any = null;
const connectMsg = (fun) => {
callBack = fun
console.log(callBack)
const useUser = useUserStore()
useUser.setUserInfo({
username: routeParams.loginId || '1721217621001',
})
const wsUrl = `${import.meta.env.VITE_USER_APP_WS_API_URL}?type=yk&code=${useUser.userInfo.username
}&kf=${useUser.customerInfo.username}`
console.log(wsUrl)
initWebSocket(wsUrl)
}
function creatWebSocket(wsUrl: string) {
// 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket");
} else {
console.log("当前浏览器不支持 WebSocket");
}
try {
initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
// 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket");
} else {
console.log("当前浏览器不支持 WebSocket");
}
try {
initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
}
// 初始化websocket
function initWebSocket(wsUrl: string) {
if (!websocket) websocket = new WebSocket(wsUrl);
websocket.onopen = function (eee) {
websocketOpen();
};
// // 接收
websocket.onmessage = function (e: MessageEvent<any>) {
websocketonmessage(e);
};
// 连接发生错误
websocket.onerror = function () {
// isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连
};
websocket.onclose = function (e) {
websocketclose(e);
};
if (!websocket) websocket = new WebSocket(wsUrl);
websocket.onopen = function(eee) {
websocketOpen();
};
// // 接收
websocket.onmessage = function(e: MessageEvent<any>) {
websocketonmessage(e);
};
// 连接发生错误
websocket.onerror = function() {
// isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连
};
websocket.onclose = function(e) {
websocketclose(e);
};
}
//调取心跳
function websocketHeartbeat(){
clearInterval(HeartbeatTime)
HeartbeatTime = setInterval(()=>{
console.log('调取心跳')
websocketsend({
cmd:13
});
},10000)
function websocketHeartbeat() {
clearInterval(HeartbeatTime)
HeartbeatTime = setInterval(() => {
console.log('调取心跳')
websocketsend({
cmd: 13
});
}, 10000)
}
// 定义重连函数
const reConnect = (wsUrl: string) => {
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () {
// 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl);
}, 5000);
if (useUserStore().isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function() {
// 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl);
}, 5000);
};
// 创建连接
function websocketOpen() {
useUserStore().connect();
websocketHeartbeat()
useUserStore().connect();
websocketHeartbeat()
}
// 数据接收
function websocketonmessage(e: MessageEvent<any>) {
const res = JSON.parse(e.data); // 解析JSON格式的数据
if (res.command == 11) {
//将数据放在store中
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定
setTimeout(() => {
useUserStore().setUserListMessages(res.data).then();
}, 10);
}
const res = JSON.parse(e.data); // 解析JSON格式的数据
console.log(res,'res')
if (res.command == 11) {
console.log('收到')
//将数据放在store中
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定
setTimeout(() => {
console.log(callBack,'callBack')
callBack()
// useUserStore().setUserListMessages(res.data).then();
}, 10);
}
}
// 关闭
function websocketclose(e: any) {
console.log('关闭')
clearInterval(HeartbeatTime)
useUserStore().disconnect(); // 修改连接状态
console.log('关闭')
clearInterval(HeartbeatTime)
useUserStore().disconnect(); // 修改连接状态
}
// 数据发送
function websocketsend(res: any) {
if (websocket && useUserStore().isConnected) {
// 检查连接状态
console.log("发送的数据", JSON.stringify(res));
websocket.send(JSON.stringify(res));
} else {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
}
if (websocket && useUserStore().isConnected) {
// 检查连接状态
websocket.send(JSON.stringify(res));
} else {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
}
}
// 实际调用的方法==============
// 发送
function sendWebSocket(data: any) {
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!useUserStore().isConnected) {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
// websocketsend(data);
} else {
websocketsend(data);
console.log("------------------");
}
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!useUserStore().isConnected) {
ElMessage({
showClose: true,
message: "请选择设备连接",
type: "error",
});
// websocketsend(data);
} else {
websocketsend(data);
console.log("------------------");
}
}
// 关闭
const closeWebSocket = () => {
if (websocket) {
websocket.close();
ElMessage({
showClose: true,
message: "设备已关闭",
type: "success",
});
}
if (websocket) {
websocket.close();
ElMessage({
showClose: true,
message: "设备已关闭",
type: "success",
});
}
};
export { initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };
export { connectMsg, initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };
yonghu.zip
No preview for this file type
yonghu/assets/homeView.e2f33bfb.js → yonghu/assets/homeView.5ea54932.js
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/homeView.0a17771e.css → yonghu/assets/homeView.eb1e7277.css
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/index.4140441c.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/assets/index.9bcc9311.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
yonghu/favicon.ico
No preview for this file type
yonghu/index.html
......@@ -6,9 +6,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>userSide</title>
<script type="module" crossorigin src="/assets/index.ef2e387f.js"></script>
<!-- <script>
this.resizeTo(800,600);
this.focus();
</script> -->
<script type="module" crossorigin src="/assets/index.aa30d5b2.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor.d471d1e7.js">
<link rel="stylesheet" href="/assets/index.4140441c.css">
<link rel="stylesheet" href="/assets/index.9bcc9311.css">
</head>
<body>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论