vue項(xiàng)目中如何使用websocket

這篇文章將為大家詳細(xì)講解有關(guān)vue項(xiàng)目中如何使用websocket，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是websocket？

“WebSocket 是 HTML5 開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
WebSocket 使得客戶(hù)端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單，允許服務(wù)端主動(dòng)向客戶(hù)端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送?！?/p>

1. 在utils下新建websocket.js文件

// import { showInfoMsg, showErrorMsg } from '@/utils/popInfo'
import ElementUI from 'element-ui';
function initWebSocket(e) {
    console.log(e)
    const wsUri = WS_API + "/webSocket/" + e;
    this.socket = new WebSocket(wsUri)//這里面的this都指向vue
    this.socket.onerror = webSocketOnError;
    this.socket.onmessage = webSocketOnMessage;
    this.socket.onclose = closeWebsocket;
}
function webSocketOnError(e) {
    ElementUI.Notification({
        title: '',
        message: "WebSocket連接發(fā)生錯(cuò)誤" + e,
        type: 'error',
        duration: 0,
    });
}
function webSocketOnMessage(e) {
    const data = JSON.parse(e.data);
    console.log(data.msgType === "INFO", data.msgType === "INFO")
    if (data.msgType === "INFO") {
        ElementUI.Notification({
            title: '',
            message: data.msg,
            type: 'success',
            duration: 3000,
        });

    } else if (data.msgType === "ERROR") {
        ElementUI.Notification({
            title: '',
            message: data.msg,
            type: 'error',
            duration: 0,
        });
    }
}
// 關(guān)閉websiocket
function closeWebsocket() {
    console.log('連接已關(guān)閉...')
}
function close() {
    this.socket.close() // 關(guān)閉 websocket
    this.socket.onclose = function (e) {
        console.log(e)//監(jiān)聽(tīng)關(guān)閉事件
        console.log('關(guān)閉')
    }
}
function webSocketSend(agentData) {
    this.socket.send(agentData);
}
export default {
    initWebSocket, close
}

如果想刷新重新鏈接websocket 可以在App.vue頁(yè)面里添加個(gè)鉤子函數(shù)

  mounted() {
    //當(dāng)在任一路由頁(yè)面被刷新時(shí),便是根組件app被從新建立,此時(shí)能夠進(jìn)行webSocket重連
    //從localStorage中獲取用戶(hù)信息,是登陸狀態(tài)則能夠進(jìn)行webSocket重連
    let token = localStorage.getItem("token");
    if (token) {
      // userMessage = JSON.parse(userMessage);
      this.$websocket.initWebSocket(token);
    }
  },

客戶(hù)端主動(dòng)關(guān)閉websocket 在關(guān)閉的地方觸發(fā)函數(shù)就可以

 logout() {
      // localStorage.clear();
      localStorage.removeItem("token");
      this.$websocket.close();
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    },

注：$webSocket 是在main.js中全局注冊(cè)了websocket.js文件

關(guān)于“vue項(xiàng)目中如何使用websocket”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。