Vue2和Vue3中如何使用WebSocker封裝詳解

更新時(shí)間：2024年07月30日 11:08:53 作者：JackieDYH

如果項(xiàng)目中多個(gè)組件都使用到WebSocket請(qǐng)求,那么我們需要對(duì)WebSocket進(jìn)行封裝,方便我們使用,下面這篇文章主要給大家介紹了關(guān)于Vue2和Vue3中如何使用WebSocker封裝的相關(guān)資料,需要的朋友可以參考下

前言

在Vue.js中實(shí)現(xiàn)WebSocket的封裝通常需要?jiǎng)?chuàng)建一個(gè)單獨(dú)的模塊或插件，以便在整個(gè)應(yīng)用中使用WebSocket。下面是一個(gè)簡(jiǎn)單的例子，演示如何在Vue.js中封裝WebSocket：

首先，你可以創(chuàng)建一個(gè)名為WebSocketPlugin.js的文件，其中包含WebSocket的封裝代碼：

// WebSocketPlugin.js

const WebSocketPlugin = {
  install(Vue) {
    const socket = new WebSocket('ws://your-socket-server-url');

    socket.onopen = () => {
      console.log('WebSocket連接已打開(kāi)');
    };

    socket.onmessage = event => {
      console.log('收到消息:', event.data);
      Vue.prototype.$socket.$emit('message', event.data);
    };

    socket.onclose = () => {
      console.log('WebSocket連接已關(guān)閉');
      // 可以在此處理連接關(guān)閉的邏輯，例如嘗試重新連接
    };

    Vue.prototype.$socket = socket;
  },
};

export default WebSocketPlugin;

例子中，我們創(chuàng)建了一個(gè)WebSocket實(shí)例，并在Vue插件中定義了一些生命周期事件的處理程序。我們使用Vue的$emit方法將收到的消息傳遞給Vue組件。

然后，在Vue應(yīng)用的入口文件（通常是main.js）中使用該插件：

// main.js

import Vue from 'vue';
import App from './App.vue';
import WebSocketPlugin from './WebSocketPlugin';

Vue.use(WebSocketPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');

現(xiàn)在，在Vue組件中，你可以通過(guò)this.$socket來(lái)訪問(wèn)WebSocket實(shí)例。例如，在一個(gè)組件中，你可以使用以下方式：

// YourComponent.vue

export default {
  mounted() {
    // 發(fā)送消息
    this.$socket.send('Hello WebSocket!');

    // 監(jiān)聽(tīng)消息
    this.$socket.addEventListener('message', event => {
      console.log('收到消息:', event.data);
    });
  },
};

完善

Vue 2 中封裝 WebSocket 時(shí)，同樣可以考慮加入斷線重連、錯(cuò)誤處理和自定義事件等功能。以下是一個(gè)相應(yīng)的例子：

// WebSocketPlugin.js

const WebSocketPlugin = {
  install(Vue, options = {}) {
    const socketUrl = options.url || 'ws://your-socket-server-url';
    const reconnectInterval = options.reconnectInterval || 3000; // 重連間隔時(shí)間，單位毫秒
    const maxReconnectAttempts = options.maxReconnectAttempts || null; // 最大重連嘗試次數(shù)，null 表示無(wú)限嘗試

    let socket;
    let isConnected = false;
    let reconnectAttempts = 0;

    const connect = () => {
      socket = new WebSocket(socketUrl);

      socket.onopen = () => {
        console.log('WebSocket連接已打開(kāi)');
        isConnected = true;
        reconnectAttempts = 0;
      };

      socket.onmessage = (event) => {
        console.log('收到消息:', event.data);
        Vue.prototype.$socket.$emit('message', event.data);
      };

      socket.onclose = (event) => {
        console.log('WebSocket連接已關(guān)閉', event);
        isConnected = false;

        if (
          maxReconnectAttempts === null ||
          reconnectAttempts < maxReconnectAttempts
        ) {
          setTimeout(() => {
            console.log('嘗試重連...');
            reconnectAttempts++;
            connect();
          }, reconnectInterval);
        }
      };

      socket.onerror = (error) => {
        console.error('WebSocket發(fā)生錯(cuò)誤', error);
        Vue.prototype.$socket.$emit('error', error);
      };
    };

    Vue.prototype.$socket = {
      send(message) {
        if (socket && socket.readyState === WebSocket.OPEN) {
          socket.send(message);
        }
      },
      isConnected() {
        return isConnected;
      },
    };

    connect();
  },
};

export default WebSocketPlugin;

在這個(gè)例子中，與 Vue 3 不同，Vue 2 使用 Vue.prototype 來(lái)添加全局屬性。同樣，我添加了斷線重連、錯(cuò)誤處理和自定義事件的功能。

在你的 Vue 2 應(yīng)用中，你可以像下面這樣使用這個(gè)插件：

// main.js

import Vue from 'vue';
import App from './App.vue';
import WebSocketPlugin from './WebSocketPlugin';

Vue.use(WebSocketPlugin, {
  url: 'ws://your-socket-server-url',
  reconnectInterval: 3000,
  maxReconnectAttempts: 5,
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

然后，你可以在你的組件中通過(guò) this.$socket 來(lái)使用 WebSocket 功能：

// YourComponent.vue

export default {
  mounted() {
    // 發(fā)送消息
    this.$socket.send('Hello WebSocket!');

    // 監(jiān)聽(tīng)消息
    this.$socket.addEventListener('message', (data) => {
      console.log('收到消息:', data);
    });

    // 監(jiān)聽(tīng)自定義事件
    // this.$socket.addEventListener('customMessage', (data) => {
    //   console.log('自定義事件 - 收到消息:', data);
    // });

    // 監(jiān)聽(tīng)錯(cuò)誤事件
    // this.$socket.addEventListener('error', (error) => {
    //   console.error('WebSocket錯(cuò)誤事件:', error);
    // });
  },
};

在Vue 3 中，封裝 WebSocket 的方式與 Vue 2 有些許不同。Vue 3 使用了 Composition API，你可以使用 ref 和 watch 等功能來(lái)創(chuàng)建 WebSocket 的封裝。以下是一個(gè)簡(jiǎn)單的例子：

首先，創(chuàng)建一個(gè)名為 useWebSocket.js 的文件：

// useWebSocket.js
import { ref, onMounted, onBeforeUnmount } from 'vue';

const useWebSocket = (url) => {
  const socket = ref(null);

  const connect = () => {
    socket.value = new WebSocket(url);

    socket.value.addEventListener('open', () => {
      console.log('WebSocket連接已打開(kāi)');
    });

    socket.value.addEventListener('message', (event) => {
      console.log('收到消息:', event.data);
    });

    socket.value.addEventListener('close', () => {
      console.log('WebSocket連接已關(guān)閉');
      // 可以在此處理連接關(guān)閉的邏輯，例如嘗試重新連接
    });
  };

  const sendMessage = (message) => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(message);
    }
  };

  onMounted(() => {
    connect();
  });

  onBeforeUnmount(() => {
    if (socket.value) {
      socket.value.close();
    }
  });

  return {
    socket,
    sendMessage,
  };
};

export default useWebSocket;

然后，在你的 Vue 組件中使用這個(gè)封裝：

// YourComponent.vue
import { ref, onMounted } from 'vue';
import useWebSocket from './useWebSocket';

export default {
  setup() {
    const message = ref('');
    const { socket, sendMessage } = useWebSocket('ws://your-socket-server-url');

    onMounted(() => {
      // 發(fā)送消息
      sendMessage('Hello WebSocket!');
    });

    return {
      message,
      socket,
    };
  },
};

在這個(gè)例子中，我們創(chuàng)建了一個(gè) useWebSocket 的函數(shù)，它返回一個(gè)包含 WebSocket 連接和發(fā)送消息功能的對(duì)象。在組件中，我們使用 setup 函數(shù)來(lái)調(diào)用 useWebSocket 函數(shù)，并在 onMounted 生命周期鉤子中發(fā)送了一條消息。

完善

封裝 WebSocket 時(shí)，可以考慮加入斷線重連、錯(cuò)誤處理和自定義事件等功能。以下是一個(gè)更完善的例子：

// useWebSocket.js
import { ref, onMounted, onBeforeUnmount, watchEffect, computed } from 'vue';

const useWebSocket = (url, options = {}) => {
  const socket = ref(null);
  const isConnected = ref(false);

  const reconnectInterval = options.reconnectInterval || 3000; // 重連間隔時(shí)間，單位毫秒
  const maxReconnectAttempts = options.maxReconnectAttempts || null; // 最大重連嘗試次數(shù)，null 表示無(wú)限嘗試

  let reconnectAttempts = 0;

  const connect = () => {
    socket.value = new WebSocket(url);

    socket.value.addEventListener('open', () => {
      console.log('WebSocket連接已打開(kāi)');
      isConnected.value = true;
      reconnectAttempts = 0;
    });

    socket.value.addEventListener('message', (event) => {
      console.log('收到消息:', event.data);
      // 可以觸發(fā)自定義事件
      // emit('customMessage', event.data);
    });

    socket.value.addEventListener('close', (event) => {
      console.log('WebSocket連接已關(guān)閉', event);
      isConnected.value = false;

      if (
        maxReconnectAttempts === null ||
        reconnectAttempts < maxReconnectAttempts
      ) {
        setTimeout(() => {
          console.log('嘗試重連...');
          reconnectAttempts++;
          connect();
        }, reconnectInterval);
      }
    });

    socket.value.addEventListener('error', (error) => {
      console.error('WebSocket發(fā)生錯(cuò)誤', error);
      // 可以觸發(fā)自定義錯(cuò)誤事件
      // emit('customError', error);
    });
  };

  const sendMessage = (message) => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(message);
    }
  };

  onMounted(() => {
    connect();
  });

  onBeforeUnmount(() => {
    if (socket.value) {
      socket.value.close();
    }
  });

  return {
    socket,
    isConnected,
    sendMessage,
  };
};

export default useWebSocket;

在這個(gè)例子中，我添加了以下改進(jìn)：

使用 isConnected ref 來(lái)追蹤 WebSocket 的連接狀態(tài)。
添加了斷線重連功能，通過(guò)設(shè)置 reconnectInterval 和 maxReconnectAttempts 參數(shù)來(lái)控制重連的間隔和嘗試次數(shù)。
添加了錯(cuò)誤處理功能，可以觸發(fā)自定義的錯(cuò)誤事件。
可以通過(guò)自定義事件觸發(fā)消息的處理，具體可以根據(jù)需求進(jìn)一步擴(kuò)展。

在你的組件中，你可以這樣使用：

// YourComponent.vue
import { ref, onMounted } from 'vue';
import useWebSocket from './useWebSocket';

export default {
  setup() {
    const message = ref('');
    const { socket, isConnected, sendMessage } = useWebSocket(
      'ws://your-socket-server-url',
      {
        reconnectInterval: 3000,
        maxReconnectAttempts: 5,
      }
    );

    // 監(jiān)聽(tīng)自定義事件
    // watchEffect(() => {
    //   socket.value?.addEventListener('customMessage', (data) => {
    //     console.log('自定義事件 - 收到消息:', data);
    //   });
    // });

    // 監(jiān)聽(tīng)自定義錯(cuò)誤事件
    // watchEffect(() => {
    //   socket.value?.addEventListener('customError', (error) => {
    //     console.error('自定義錯(cuò)誤事件:', error);
    //   });
    // });

    onMounted(() => {
      // 發(fā)送消息
      sendMessage('Hello WebSocket!');
    });

    return {
      message,
      isConnected,
      socket,
    };
  },
};