1. 封装的websocket.js文件内容:
var websock = null;
var global_callback = null;
let isConnect = false; //连接标识 避免重复连接
let rec; //断线重连后,延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let soketparams = {
pageKey: -1
}
var serverPort = "/ws"; // webSocket连接端口
var wsuri = "ws://" + '123.0.0.1' + ":" + serverPort;
function createWebSocket(callback) {
if (websock == null || typeof websock !== WebSocket) {
initWebSocket(callback);
}
}
function initWebSocket(callback) {
global_callback = callback;
// 初始化websocket
websock = new WebSocket(wsuri);
websock.onmessage = function (e) {
websocketonmessage(e);
};
websock.onclose = function (e) {
websocketclose(e);
};
websock.onopen = function () {
websocketOpen();
};
// 连接发生错误的回调方法
websock.onerror = function () {
console.log("WebSocket连接发生错误");
};
}
//心跳设置
var heartCheck = {
timeout: 20000, //每段时间发送一次心跳包 这里设置为20s
timeoutObj: null, //延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象)
start: function () {
this.timeoutObj = setInterval(function () {
if (isConnect) websock.send(JSON.stringify(soketparams));
}, this.timeout);
},
reset: function () {
clearTimeout(this.timeoutObj);
this.start();
}
};
//定义重连函数
let reConnect = () => {
console.log("尝试重新连接");
if (isConnect) return; //如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () { // 延迟5秒重连 避免过多次过频繁请求重连
initWebSocket();
}, 5000);
};
// 实际调用的方法
function sendSock(agentData ) {
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() {
console.log('关闭了')
websock.close();
}
// 数据接收
function websocketonmessage(msg) {
// console.log("收到数据:"+JSON.parse(e.data));
// console.log("收到数据:"+msg);
// global_callback(JSON.parse(msg.data));
// 收到信息为Blob类型时
let result = null;
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) {
// console.log("发送数据:" + agentData);
websock.send(agentData);
}
// 关闭
function websocketclose(e) {
console.log("connection closed (" + e.code + ")");
}
function websocketOpen(e) {
console.log("连接打开");
isConnect = true
heartCheck.start(); //发送心跳 看个人项目需求
}
export { sendSock, createWebSocket, closeSock };
封装的websocke暴露三个接口
- sendSock用于发送数据
- createWebSocket用于创建连接、对收到的数据进行处理
- closeSock 用于关闭连接
使用方法
1.建立连接
import { sendSock, createWebSocket, closeSock } from "@/util/websocket";
created() {
this.init();
},
methods: {
init() {
createWebSocket(this.global_callback);
},
// websocket的回调函数,msg表示收到的消息
global_callback(msg) {
console.log("websocket的回调函数收到服务器信息:" + JSON.stringify(msg));
// console.log("收到服务器信息:" + msg);
},
}
2.发送数据
import { sendSock } from "@/util/websocket";
var sendData = {
pageKey: 1
};
sendSock(JSON.stringify(sendData));
3.关闭连接
第一步:导入文件
import { closeSock} from "@/util/websocket";
第二步:关闭连接
closeSock();