前端WebSocket 封装
前言
我封装的这是需要启动项目就立即连接，所以我在封装的js中自调用了连接函数，在main.js中引入该js文件，看你们需求再自己稍微变动一下吧
一、WebSocket是什么？
WebSocket是一种在单个TCP连接上进行全双工通信的协议。只要记住用它可以前后端进行实时通信就行。
二、封装WebSoket.js及使用
1.封装WebSoket.js文件
代码如下：文章来源：https://www.toymoban.com/news/detail-421673.html
var websock = null;
let rec; //断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let isConnect = false; //连接标识 避免重复连接
let checkMsg = "heartbeat"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理
var globalCallback = function () { };
let createWebSocket = () => {
try {
initWebSocket(); //初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
};
//定义重连函数
let reConnect = () => {
console.log("尝试重新连接");
if (isConnect) return; //如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () { // 延迟5秒重连 避免过多次过频繁请求重连
createWebSocket();
}, 5000);
};
//设置关闭连接
let closeWebSocket = () => {
websock.close();
};
//心跳设置
var heartCheck = {
timeout: 20000, //每段时间发送一次心跳包 这里设置为20s
timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
start: function () {
this.timeoutObj = setTimeout(function () {
if (isConnect) websock.send(checkMsg);
}, this.timeout);
},
reset: function () {
clearTimeout(this.timeoutObj);
this.start();
}
};
// 初始化websocket
function initWebSocket() {
// ws地址 -->这里是你的请求路径
var ws = "ws://api.dczn.com.cn:8098/ws/client?req=dczn"
websock = new WebSocket(ws)
websock.onmessage = function (e) {
websocketonmessage(e)
}
websock.onclose = function (e) {
websocketclose(e)
}
websock.onopen = function () {
websocketOpen()
// heartCheck.start();
}
// 连接发生错误的回调方法
websock.onerror = function () {
console.log('WebSocket连接发生错误')
isConnect = false; //连接断开修改标识
reConnect(); //连接错误 需要重连
}
}
// 实际调用的方法
function sendSock(agentData, callback) {
globalCallback = callback
// console.log(globalCallback)
if (websock.readyState === websock.OPEN) {
// 若是ws开启状态
websocketsend(agentData)
} else if (websock.readyState === websock.CONNECTING) {
// 若是 正在开启状态，则等待1s后重新调用
setTimeout(function () {
sendSock(agentData, callback)
}, 1000)
} else {
// 若未开启 ，则等待1s后重新调用
setTimeout(function () {
sendSock(agentData, callback)
}, 1000)
}
}
function getSock(callback) {
globalCallback = callback
}
// 数据接收
function websocketonmessage(e) {
// console.log(e.data)
let O_o = JSON.parse(decodeUnicode(e.data))
if (!O_o) {
heartCheck.reset();
} else {
if (O_o.msg == "open success") {
sessionStorage.setItem("wid", O_o.wid);
} else {
// console.log(O_o);
globalCallback(O_o);
}
}
// globalCallback(JSON.parse(e.data))
function decodeUnicode(str) {
str = str.replace(/\\/g, "%");
//转换中文
str = unescape(str);
//将其他受影响的转换回原来
str = str.replace(/%/g, "\\");
//对网址的链接进行处理
str = str.replace(/\\/g, "");
return str;
}
}
// 数据发送
function websocketsend(agentData) {
console.log(JSON.stringify(agentData))
websock.send(JSON.stringify(agentData))
}
// 关闭
function websocketclose(e) {
console.log(e)
isConnect = false; //断开后修改标识
console.log('connection closed (' + e.code + ')')
}
// 创建 websocket 连接
function websocketOpen(e) {
console.log('连接成功')
}
initWebSocket()
// 将方法暴露出去
export {
sendSock,
getSock,
createWebSocket,
closeWebSocket
}
2.使用
提示：使用前必须在main中注入js文件
1.使用前必须在main中注入js文件
代码如下：
// WebSocket封装方法
import * as socketApi from './libs/socket'
Vue.prototype.socketApi = socketApi
- 使用
created() {
this.socketApi.sendSock({ cmd: "startReport" }); //发送指令，指令是跟后端人员协定的
this.socketApi.getSock(this.getConfigResult); //接收后端大佬推送过来的数据
},
getConfigResult(res) {
//sock接收到的数据
console.log(res);
},
总结
以上就是webSocket封装过程，不对的地方不用多多指教，对了我这也是二次封装，忘了之前大佬是谁了，哈哈哈哈。文章来源地址https://www.toymoban.com/news/detail-421673.html
到了这里，关于前端WebSocket 封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
