这篇文章主要讲解了“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中如何封装使用”的内容了，经过本文的学习后，相信大家对websocket在vue2中如何封装使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
