一文详解websocket在vue2中的封装使用
作者：梓恒
这篇文章主要为大家介绍了一文详解websocket在vue2中的封装使用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
websocket在vue2中的封装使用
先说需求： 页面中有websocket连接，进入的时候发送参数到后端，后端发送消息， 离开页面时发送参数至后端，后端停止发送消息，不得断开连接， 下一次进入时页面时不用再次连接。
实现思路：
- 因为是全局连接一个websocket，所以这里采用单例模式
- 也是因为封装的原因，页面中肯定是直接拿不到onmessage中返回的数据， 所以这里采用发布订阅模式来做
完整代码在最后，不想看我废话的可以直接扒拉了
步骤
步骤就是： 连接，页面发送消息，接收消息，over ~
首先定义连接websocket的方法
export default class SocketService {
constructor(url){
this.url = url
},
connect() {
//判断浏览器是否支持websocket
if (!window.WebSocket) {
return console.log("您的浏览器不支持WebSocket");
}
url,
//连接websocket
this.ws = new WebSocket(this.url);
//监听websocket各种状态
this.ws.onopen = () => {};
this.ws.onclose = () => {};
this.ws.onerror = () => {};
this.ws.onmessage = (e) => {};
}
}
我们先让socket连接上叭
export default class SocketService {
constructor(url， againConnect = true){
this.url = url
this.againConnect = againConnect;
},
ws = null; // 和服务端连接的socket对象
url; //地址
againConnect; //标识断开是否重连
connected = false; // 标识是否连接成功
sendRetryCount = 0; // 记录重试的次数
connectRetryCount = 0; // 重新连接尝试的次数
connect() {
//判断浏览器是否支持websocket
if (!window.WebSocket) {
return console.log("您的浏览器不支持WebSocket");
}
url,
//连接websocket
this.ws = new WebSocket(this.url);
//监听websocket各种状态
this.ws.onopen = () => {
//连接上后所有标识清零
this.connected = true;
this.connectRetryCount = 0;
};
this.ws.onclose = () => {
//连接关闭
this.connected = false;
this.connectRetryCount++;
if (this.againConnect) {
//重连
setTimeout(() => {
this.connect();
}, 500 * this.connectRetryCount);
} else {
//不重连的操作
sessionStorage.clear();
localStorage.clear();
message.error("登录超时");
router.push("/");
}
};
this.ws.onerror = () => {
//连接失败
this.connected = false;
this.connectRetryCount++;
if (this.againConnect) {
setTimeout(() => {
this.connect();
}, 500 * this.connectRetryCount);
}
};
this.ws.onmessage = (e) => {
console.log(e)
};
},
unSubscribe() {}
send(){
//发送消息的方法
}
}
那么我们要怎么给后端发送消息呢,发送了消息之后我们又该怎样才能在页面中接收到消息呢?
在send方法中接收一个回调函数，
在message中调用，
subscribeList = {}; //记载回调函数
idList = [];
send(data, callback) {
//判断此时有没有ws
if (!this.ws) {
this.connect();
this.send(data, callback);
} else {
// 判断此时此刻有没有连接成功
if (this.connected) {
this.sendRetryCount = 0;
this.ws.send(JSON.stringify(data));
if (data.type === "sub") {
//存储id
this.idList.push(data.id);
//存储回调函数,
if (!this.subscribeList[data.id]) {
this.subscribeList[data.id] = [callback];
} else {
this.subscribeList[data.id].push(callback);
}
}
} else {
this.sendRetryCount++;
setTimeout(() => {
this.send(data, callback);
}, this.sendRetryCount * 500);
}
}
}
connect(){
......
this.ws.onmessage = (e) => {
let { payload, requestId, type } = JSON.parse(e.data);
if (type === "error") {
console.log("出错了");
}
if (this.subscribeList[requestId]) {
if (type === "complete") {
console.log("完成了");
} else if (type === "result") {
this.subscribeList[requestId].forEach((item) =>
item.call(this, payload)
);
}
}
};
}
//销毁回调函数
unSubscribe() {
//停止消息发送
this.idList.forEach((item) => {
this.send({ id: item, type: "unsub" });
delete this.subscribeList[item];
});
this.idList = [];
}
- sub标识发送消息， unsub标识停止发送消息
- id为事件的标识符
现在解决了页面中接收消息的问题，那么怎么保证离开页面，回到页面，使用的是同一个websocket呢，如果实例化这个类的话，那么每次进入都会实例化SocketService，
es6的class中有取值函数和存值函数， 具体使用请看这里：
Class 的基本语法 - ES6 教程 - 网道 (wangdoc.com)
instance = null;
static get Instance() {
if (!this.instance) {
this.instance = new SocketService(false);
}
return this.instance;
}
- 使用getter，来拿取class中的instance，拿取的时候设置拦截该行为，判断instance有没有值，没有值就实例化SocketService给instance，返回instance，
页面中使用方式
import SocketService from "@/websocket/websocket";
mounted() {
this.ws = SocketService.Instance;
this.ws.send(
{
id: "11111",
topic: "/xxx/xxx",
parameter: {},
type: "sub",
},
this.Callback
);
}
destroyed() {
this.ws.unSubscribe();
},
methods:{
Callback(data) {
console.log(data);
},
}
看到这里了，不妨给个小心心叭
在vue中的封装
export default class SocketService {
constructor(againConnect = true, url) {
this.url = url;
this.againConnect = againConnect;
}
instance = null; //页面中使用的SocketService实例
ws = null; // 和服务端连接的socket对象
url; //地址
againConnect; //断开是否重连
connected = false; // 标识是否连接成功
sendRetryCount = 0; // 记录重试的次数
connectRetryCount = 0; // 重新连接尝试的次数
//单例模式保证只有一个SocketService实例
static get Instance() {
if (!this.instance) {
this.url = '......'
this.instance = new SocketService(false, url);
}
return this.instance;
}
// 定义连接服务器的方法
connect() {
// 这里判断你的浏览器支不支持websocket
if (!window.WebSocket) {
return console.log("您的浏览器不支持WebSocket");
}
this.ws = new WebSocket(this.url);
//连接上了
this.ws.onopen = () => {
this.connected = true;
// 重置重新连接的次数
this.connectRetryCount = 0;
};
//连接关闭了，设置标识值为false，
this.ws.onclose = () => {
this.connected = false;
this.connectRetryCount++;
if (this.againConnect) {
setTimeout(() => {
this.connect();
}, 500 * this.connectRetryCount);
} else {
sessionStorage.clear();
localStorage.clear();
message.error("登录超时");
router.push("/");
}
};
this.ws.onerror = () => {
console.log("socket连接失败");
this.connected = false;
this.connectRetryCount++;
if (this.againConnect) {
setTimeout(() => {
this.connect();
}, 500 * this.connectRetryCount);
}
};
this.ws.onmessage = (e) => {
let { payload, requestId } = JSON.parse(e.data);
if (this.subscribeList[requestId]) {
this.subscribeList[requestId].forEach((item) =>
item.call(this, payload)
);
}
};
}
//销毁回调函数
unSubscribe() {
//停止消息发送
this.idList.forEach((item) => {
this.send({ id: item, type: "unsub" });
delete this.subscribeList[item];
});
this.idList = [];
}
subscribeList = {}; //记载回调函数
idList = [];
// 发送数据的方法
send(data, callback) {
//判断此时有没有ws
if (!this.ws) {
this.connect();
this.send(data, callback);
} else {
// 判断此时此刻有没有连接成功
if (this.connected) {
this.sendRetryCount = 0;
this.ws.send(JSON.stringify(data));
if (data.type === "sub") {
//存储id
this.idList.push(data.id);
//存储回调函数,
if (!this.subscribeList[data.id]) {
this.subscribeList[data.id] = [callback];
} else {
this.subscribeList[data.id].push(callback);
}
}
} else {
this.sendRetryCount++;
setTimeout(() => {
this.send(data, callback);
}, this.sendRetryCount * 500);
}
}
}
}以上就是一文详解websocket在vue2中的封装使用的详细内容，更多关于vue2封装websocket的资料请关注脚本之家其它相关文章！