WebSocket 模塊實現(xiàn)與應(yīng)用

WebSocket 技術(shù)是一種在 Web 開發(fā)中常用的實時通信方式，它允許客戶端和服務(wù)器之間建立持久性的雙向連接，以便實時地傳輸數(shù)據(jù)。在 Vue.js 項目中，使用 WebSocket 可以輕松實現(xiàn)實時消息推送、即時通訊等功能。在這篇博客中，我們將介紹一個基于 Vue.js 的 WebSocket 模塊的實現(xiàn)，并討論其功能、作用以及應(yīng)用方式。

廢話不多說，先提供代碼

// 在 store 中創(chuàng)建一個模塊（WebSocket 模塊）
import {Notification} from 'element-ui';
import {getToken} from "@/utils/auth";

const state = {
  ws: null,
  heartCheckTimer: null,
};

const mutations = {
  SET_WS(state, ws) {
    state.ws = ws;
    console.log("SET_WS", state.ws);
  },
  CLEAR_WS(state) {
    state.ws = null;
  },
  SET_HEART_CHECK_TIMER(state, timer) {
    state.heartCheckTimer = timer;
  },
};

const actions = {
  startWebSocket({commit, dispatch, state}) {
    if (getToken() && (!state.ws || state.ws.readyState !== WebSocket.OPEN)) {
      console.log("SOCKET_PATH:", process.env);
      const socketUrl = `${process.env.VUE_APP_SOCKET_PATH}/ws?token=${getToken()}`;
      const ws = new WebSocket(socketUrl);

      ws.onmessage = function (e) {
        console.log(`${new Date().toLocaleString()} >>>>> 收到消息 ${e.data}`, state.ws);
        if (e.data !== "pong") {
          Notification({
            type: "info",
            title: '新消息',
            message: e.data,
            position: "top-right",
            duration: 3000,
            showClose: true
          });
        }
      };

      ws.onclose = function () {
        console.log(`${new Date().toLocaleString()} >>>>> 連接已關(guān)閉`);
        // 嘗試重新連接
        dispatch('reconnectWebSocket');
      };

      ws.onopen = function () {
        console.log(`${new Date().toLocaleString()} >>>>> 連接成功`, ws);
        Notification({
          type: "success",
          title: '成功',
          message: '會話連接成功',
          position: "top-right",
          duration: 3000,
          showClose: true
        });
        // 保存 WebSocket 連接信息
        commit('SET_WS', ws);
        // // 在這里調(diào)用 sendWebSocketMessage，確保 state.ws 已經(jīng)被正確設(shè)置
        // 開始心跳檢測
        dispatch('startHeartCheck');
      };

      ws.onerror = function (e) {
        console.log(`${new Date().toLocaleString()} >>>>> 數(shù)據(jù)傳輸發(fā)生異常`, e);
        Notification({
          type: "error",
          title: '錯誤',
          message: '會話連接異常，服務(wù)已斷開',
          position: "top-right",
          duration: 3000,
          showClose: true
        });
      };
    }
  },

  sendWebSocketMessage({state}, msg) {
    console.log(`${new Date().toLocaleString()} >>>>> 發(fā)送消息：${msg}`, state.ws);
    state.ws.send(msg);
  },

  reconnectWebSocket({dispatch}) {
    dispatch('clearWebSocket');
    // 遞歸調(diào)用，一直嘗試重連
    setTimeout(() => {
      dispatch('startWebSocket');
    }, 6000);
  },

  clearWebSocket({commit, state}) {
    if (state.ws) {
      state.ws.close();
      commit('CLEAR_WS');
    }
  },

  startHeartCheck({commit, dispatch, state}) {
    console.log(`${new Date().toLocaleString()} >>>>> 開始心跳檢測`, state.ws);
    // 清除之前的計時器
    dispatch('clearHeartCheckTimer');

    // 創(chuàng)建新的計時器
    dispatch('sendWebSocketMessage', 'ping');
    const timer = setInterval(() => {
      if (!state.ws || state.ws.readyState !== WebSocket.OPEN) {
        console.log(`${new Date().toLocaleString()} >>>>> 心跳檢測失敗,觸發(fā)重連`, state.ws);
        dispatch('reconnectWebSocket');
      } else {
        console.log(`${new Date().toLocaleString()} >>>>> 心跳正常,繼續(xù)下一次心跳檢測`, state.ws);
        dispatch('sendWebSocketMessage', 'ping');
      }
    }, 1000 * 29);
    commit('SET_HEART_CHECK_TIMER', timer);
  },

  clearHeartCheckTimer({commit, state}) {
    const timer = state.heartCheckTimer;
    timer && clearInterval(timer);
    commit('SET_HEART_CHECK_TIMER', null);
  },
};

export default {
  state,
  mutations,
  actions,
};

1. 功能概述

該 WebSocket 模塊提供了以下核心功能：

WebSocket 連接管理： 通過封裝 WebSocket 的創(chuàng)建、連接、關(guān)閉等操作，實現(xiàn)了 WebSocket 連接的簡便管理。
消息收發(fā)： 可以方便地發(fā)送和接收 WebSocket 消息，并在收到消息時進行相應(yīng)的處理。
自動重連： 當(dāng) WebSocket 連接斷開時，模塊會自動嘗試重新連接，確保持續(xù)的通信。
心跳檢測： 集成了心跳檢測機制，定期向服務(wù)器發(fā)送心跳消息，以確保連接的穩(wěn)定性。

2. 代碼結(jié)構(gòu)

該模塊的代碼結(jié)構(gòu)如下：

State： 維護了 WebSocket 連接對象（ws）和心跳檢測定時器（heartCheckTimer）的狀態(tài)。
Mutations： 提供了用于修改狀態(tài)的同步方法，包括設(shè)置 WebSocket 對象、清除 WebSocket 對象以及設(shè)置心跳檢測定時器。
Actions： 包含了異步的業(yè)務(wù)邏輯，如啟動 WebSocket 連接、發(fā)送消息、重新連接、清除連接、啟動心跳檢測等。

3. 應(yīng)用方式

3.1 安裝模塊

首先，確保你的項目中已經(jīng)安裝了 element-ui，因為在收到新消息時，會使用 element-ui 的 Notification 組件進行通知。

npm install element-ui

3.2 引入模塊

在你的 Vuex store 中引入 WebSocket 模塊：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import webSocketModule from './modules/webSocket';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    webSocket: webSocketModule,
    // other modules...
  },
  // other configurations...
});

3.3 啟動 WebSocket 連接

在需要使用 WebSocket 的地方，通過 Vuex 的 Action 啟動 WebSocket 連接：

export default {
  mounted() {
    this.$store.dispatch('startWebSocket');
  },
}

3.4 發(fā)送和接收消息

通過 Vuex Action 可以方便地發(fā)送消息，同時通過監(jiān)聽 WebSocket 模塊的狀態(tài)來處理接收到的消息：

// YourComponent.vue
export default {
  methods: {
    sendMessage(message) {
      this.$store.dispatch('sendWebSocketMessage', message);
    },
  },
  computed: {
    websocket() {
      return this.$store.state.webSocket.ws;
    },
  },
  watch: {
    websocket(newVal) {
      if (newVal) {
        newVal.onmessage = (event) => {
          // 處理接收到的消息
          console.log('Received message:', event.data);
        };
      }
    },
  },
}

4. 使用過程中遇到的一些問題

4.1 頁面刷新后socket連接斷開，且不再重連

通常，在頁面刷新時，WebSocket 連接會被斷開，因為整個應(yīng)用重新加載。為了解決這個問題，你可以考慮以下方案：

監(jiān)聽頁面刷新事件： 在頁面即將刷新或關(guān)閉時，可以通過監(jiān)聽 beforeunload 事件來執(zhí)行一些清理操作，例如關(guān)閉 WebSocket 連接。這樣可以確保在頁面刷新或關(guān)閉時，WebSocket 連接得到正常關(guān)閉。

 mounted() {
    this.$nextTick(() => {
      // 初始化 WebSocket 連接
      this.$store.dispatch('startWebSocket');

      // 在這里保存 this.$store 到一個變量
      const store = this.$store;

      // 在 beforeunload 事件中使用 store
      window.addEventListener('beforeunload', function (event) {
        store.dispatch('clearWebSocket');
        // 在這里執(zhí)行你的操作，例如保存數(shù)據(jù)
        // const confirmationMessage = '確定要離開頁面嗎？';
        // event.returnValue = confirmationMessage; // Standard for most browsers
        // return confirmationMessage; // For some older browsers
      });
    })
  }

代碼放在App.vue下面的mouted即可

5. 總結(jié)

通過使用該 WebSocket 模塊，我們可以輕松地在 Vue.js 項目中集成 WebSocket 功能，實現(xiàn)實時通信、消息推送等功能。模塊的自動重連和心跳檢測機制確保了連接的穩(wěn)定性，而清晰的代碼結(jié)構(gòu)使得模塊易于維護和擴展。在實際應(yīng)用中，可以根據(jù)具體業(yè)務(wù)需求，結(jié)合 Vuex 狀態(tài)管理和組件生命周期，靈活使用該模塊，為項目提供更加強大的實時通信能力。

實際效果可查在線網(wǎng)站：https://web.yujky.cn文章來源地址http://www.zghlxwxcb.cn/news/detail-780552.html

到了這里，關(guān)于Vue 2 中 WebSocket 模塊實現(xiàn)與應(yīng)用(包含心跳檢測、自動重連)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！