vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > websocket在vue2中封装使用

websocket在vue2中的封装使用方式

作者:子恒吃西瓜

这篇文章主要介绍了websocket在vue2中的封装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

websocket在vue2中的封装使用

先说需求: 页面中有websocket连接,进入的时候发送参数到后端,后端发送消息, 离开页面时发送参数至后端,后端停止发送消息,不得断开连接, 下一次进入时页面时不用再次连接。

实现思路

完整代码在最后,不想看我废话的可以直接扒拉了

步骤

步骤就是: 连接,页面发送消息,接收消息,over ~

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) => {};
    }
}
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方法中接收一个回调函数

2.在message中调用

现在解决了页面中接收消息的问题,那么怎么保证离开页面,回到页面,使用的是同一个websocket呢,如果实例化这个类的话,那么每次进入都会实例化SocketService,

instance = null;
static get Instance() {
    if (!this.instance) {
      this.instance = new SocketService(false);
    }
    return this.instance;
 }

1.es6的class中有取值函数和存值函数, 具体使用请看这里:

2.Class 的基本语法 - ES6 教程 - 网道

页面中使用方式

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);
      }
    }
  }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文