websocket在vue2中的封裝使用方式

更新時間：2024年08月09日 10:17:14 作者：子恒吃西瓜

這篇文章主要介紹了websocket在vue2中的封裝使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

websocket在vue2中的封裝使用

先說需求：頁面中有websocket連接，進入的時候發(fā)送參數(shù)到后端，后端發(fā)送消息，離開頁面時發(fā)送參數(shù)至后端，后端停止發(fā)送消息，不得斷開連接，下一次進入時頁面時不用再次連接。

實現(xiàn)思路

因為是全局連接一個websocket，所以這里采用單例模式
也是因為封裝的原因，頁面中肯定是直接拿不到onmessage中返回的數(shù)據(jù)，所以這里采用發(fā)布訂閱模式來做

完整代碼在最后，不想看我廢話的可以直接扒拉了

步驟

步驟就是：連接，頁面發(fā)送消息，接收消息，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);
        //監(jiān)聽websocket各種狀態(tài)
        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;         // 和服務(wù)端連接的socket對象
      url;               //地址
      againConnect;      //標(biāo)識斷開是否重連
      connected = false; // 標(biāo)識是否連接成功
      sendRetryCount = 0; // 記錄重試的次數(shù)
      connectRetryCount = 0; // 重新連接嘗試的次數(shù)
    connect() {
        //判斷瀏覽器是否支持websocket
        if (!window.WebSocket) {
          return console.log("您的瀏覽器不支持WebSocket");
        }
        url,
	   //連接websocket
        this.ws = new WebSocket(this.url);
        //監(jiān)聽websocket各種狀態(tài)
        this.ws.onopen = () => {
            //連接上后所有標(biāo)識清零
            this.connected = true;
            this.connectRetryCount = 0;
        };
        this.ws.onclose = () => {
            //連接關(guān)閉
            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(){
        //發(fā)送消息的方法
    }
}

那么我們要怎么給后端發(fā)送消息呢,發(fā)送了消息之后我們又該怎樣才能在頁面中接收到消息呢?

subscribeList = {}; //記載回調(diào)函數(shù)
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);
          //存儲回調(diào)函數(shù),
          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)
          );
        }
      }
    };
}
//銷毀回調(diào)函數(shù)
  unSubscribe() {
    //停止消息發(fā)送
    this.idList.forEach((item) => {
      this.send({ id: item, type: "unsub" });
      delete this.subscribeList[item];
    });
    this.idList = [];
 }

1.在send方法中接收一個回調(diào)函數(shù)

sub標(biāo)識發(fā)送消息， unsub標(biāo)識停止發(fā)送消息
id為事件的標(biāo)識符

2.在message中調(diào)用

現(xiàn)在解決了頁面中接收消息的問題，那么怎么保證離開頁面，回到頁面，使用的是同一個websocket呢，如果實例化這個類的話，那么每次進入都會實例化SocketService，

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

1.es6的class中有取值函數(shù)和存值函數(shù)，具體使用請看這里：

2.Class 的基本語法 - ES6 教程 - 網(wǎng)道

使用getter，來拿取class中的instance，拿取的時候設(shè)置攔截該行為，判斷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; // 和服務(wù)端連接的socket對象
  url; //地址
  againConnect;     //斷開是否重連
  connected = false; // 標(biāo)識是否連接成功
  sendRetryCount = 0; // 記錄重試的次數(shù)
  connectRetryCount = 0; // 重新連接嘗試的次數(shù)
    
  //單例模式保證只有一個SocketService實例
  static get Instance() {
    if (!this.instance) {
        this.url = '......'
      this.instance = new SocketService(false, url);
    }
    return this.instance;
  }
  //  定義連接服務(wù)器的方法
  connect() {
    // 這里判斷你的瀏覽器支不支持websocket
    if (!window.WebSocket) {
      return console.log("您的瀏覽器不支持WebSocket");
    }
    this.ws = new WebSocket(this.url);
    //連接上了
    this.ws.onopen = () => {
      this.connected = true;
      // 重置重新連接的次數(shù)
      this.connectRetryCount = 0;
    };
      //連接關(guān)閉了，設(shè)置標(biāo)識值為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)
          );
        }
    };
  }

  //銷毀回調(diào)函數(shù)
  unSubscribe() {
    //停止消息發(fā)送
    this.idList.forEach((item) => {
      this.send({ id: item, type: "unsub" });
      delete this.subscribeList[item];
    });
    this.idList = [];
  }
  subscribeList = {}; //記載回調(diào)函數(shù)
  idList = [];
  // 發(fā)送數(shù)據(jù)的方法
  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);
          //存儲回調(diào)函數(shù),
          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);
      }
    }
  }
}