uniapp 中封装|使用 socket.io-client

要在uniapp中封装websocket，您可以使用uni-app插件市场中的socket.io-client插件。此插件可以使您轻松地在uniapp应用程序中添加websocket支持，并具有心跳特性及重连功能。

以下是使用示例：

1. 安装socket.io-client插件

您可以在HBuilderX中的插件市场中找到此插件并安装。或者您可以在工程中的package.json文件中添加以下依赖：

 "dependencies": {
    "socket.io-client": "^2.4.0"
 }

2. 封装websocket

在您的uniapp工程中创建一个websocket.js文件，并在其中编写以下代码：

import io from 'socket.io-client';

let socket = null;
const CONNECT_EVENT = 'connect';
const DISCONNECT_EVENT = 'disconnect';
const RECONNECT_EVENT = 'reconnect';
const HEARTBEAT_EVENT = 'heartbeat';

// 封装websocket连接对象，包含重连和心跳功能
function createSocket(url, options) {
  if (!socket) {
    socket = io(url, options);
    socket.on(CONNECT_EVENT, () => {
      console.log('WebSocket connected');
    });
    socket.on(DISCONNECT_EVENT, () => {
      console.warn('WebSocket disconnected');
    });
    socket.on(RECONNECT_EVENT, () => {
      console.log('WebSocket reconnected');
    });
    socket.on(HEARTBEAT_EVENT, () => {
      console.log('WebSocket heartbeat received');
    });
  }
  return socket;
}

export default createSocket;

3. 全局使用websocket

在您的main.js文件中，将此websocket.js文件导入，并将其挂载到Vue实例上，以便在应用程序中全局使用websocket：

import Vue from 'vue';
import App from './App.vue';
import createSocket from './websocket';

Vue.config.productionTip = false;

const socket = createSocket('ws://localhost:3000', {
  reconnection: true, // 启用重连
  reconnectionDelay: 1000, // 重连间隔时间
  reconnectionAttempts: Infinity, // 重连次数
  transports: ['websocket'], // 仅使用WebSocket传输
});

Vue.prototype.$socket = socket; // 将socket挂载到Vue实例上

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

现在，您可以在整个应用程序中使用this.$socket对象来访问您的websocket连接，并使用其公开的方法和事件监听器。