import { ElMessage } from "element-plus";
let socket = "";
let lockReconnect = false; //是否真正建立连接
let timeout = 20 * 1000; //20秒一次心跳
let timeoutObj = null; //心跳心跳倒计时
let serverTimeoutObj = null; //心跳倒计时
let timeoutnum = null;
let global_callback = null;
let weburl = "";
export const sendWebsocket = function(agentData, callback) {
global_callback = callback;
socketOnSend(agentData);
}
/**
* 关闭websocket函数
*/
export const closeWebsocket = function() {
if (socket) {
socket.close();
}
clearTimeout(timeoutObj);
clearTimeout(serverTimeoutObj);
}
export const initWebSocket = function(url) {
weburl = url;
if (!window.WebSocket) {
ElMessage.error({
message: "您的浏览器不支持websocket,请升级或更换浏览器!",
type: "error",
center: true,
});
return;
}
if (!socket) {
socket = new WebSocket(weburl);
socketOnOpen();
socketOnClose();
socketOnError();
socketOnMessage();
}
}
function reconnect() {
if (lockReconnect) {
return;
}
lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
timeoutnum && clearTimeout(timeoutnum);
timeoutnum = setTimeout(function() {
//新连接
initWebSocket();
lockReconnect = false;
}, 5000);
}
//重置心跳
function reset() {
//清除时间
clearTimeout(timeoutObj);
clearTimeout(serverTimeoutObj);
//重启心跳
start();
}
//开启心跳
function start() {
timeoutObj && clearTimeout(timeoutObj);
serverTimeoutObj && clearTimeout(serverTimeoutObj);
timeoutObj = setTimeout(function() {
//这里发送一个心跳,后端收到后,返回一个心跳消息,
if (socket.readyState == 1) {
//如果连接正常
socket.send('{"toUserId":"hk"}');
console.log("发送消息");
} else {
//否则重连
reconnect();
}
serverTimeoutObj = setTimeout(function() {
//超时关闭
socket.close();
}, timeout);
}, timeout);
}
function socketOnOpen() {
socket.onopen = () => {
console.log("socket连接成功");
start();
};
}
function socketOnClose() {
socket.onclose = () => {
console.log("socket已经关闭");
};
}
function socketOnSend(data) {
//数据发送
socket.send(data);
}
function socketOnError() {
socket.onerror = () => {
reconnect();
console.log("socket 链接失败");
};
}
function socketOnMessage() {
socket.onmessage = (e) => {
global_callback(e.data);
reset();
};
}
Vue websocket方法封装
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1、element-plus 默认展示英文,如何进行国际化展示中文? 2、如何给vue添加全局方法或者属性? ap...
- 首先写一个公共方法socket.js functiongetSocket(url, params, callbac...
- 效果图: 状态有三种:1.支付超时(时间自己定义,超出规定时间没收到响应时,自动断开websocket连接); 2...
- 建议看我写的另外一篇文章 js封装一个websocket 以下原文,不太成熟,可以不用看了 第一次使用websoc...