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(){ //发送消息的方法 } }
那么我们要怎么给后端发送消息呢,发送了消息之后我们又该怎样才能在页面中接收到消息呢?
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 = []; }
1.在send方法中接收一个回调函数
- sub标识发送消息, unsub标识停止发送消息
- id为事件的标识符
2.在message中调用
现在解决了页面中接收消息的问题,那么怎么保证离开页面,回到页面,使用的是同一个websocket呢,如果实例化这个类的话,那么每次进入都会实例化SocketService,
instance = null; static get Instance() { if (!this.instance) { this.instance = new SocketService(false); } return this.instance; }
1.es6的class中有取值函数和存值函数, 具体使用请看这里:
- 使用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); } } } }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。