vue-socketio-manager

Vue2/Vue3 通用的 Socket.IO 连接管理包，核心特性：

• 同 URL+配置 复用连接（避免重复创建）
• 引用计数：所有引用退出后自动关闭连接
• 自动重连、心跳检测、超时控制（默认配置可覆盖）
• 兼容 Vue2/Vue3，使用无差异 — ☆一般用1.0.4版本。vue较新的版本用1.0.0也可以

安装

1. 安装包本身

npm install ysy01-socketio --save
# 或 yarn
yarn add ysy01-socketio

配合导出组件,在全局组局中使用
javascript
// 在需要触发的地方触发websocket
getExportProcess(taskId) {
  this.$bus.$emit('websocketNotice:begin', taskId)
}

// 在项目的全局vue文件中处理
mounted() {
  this.$bus.$on('websocketNotice:begin', (data) => {
      this.startWebsocket(data)
  })
},

// 具体的处理逻辑
startWebsocket(data) {
    this.$downloadNotify.show({
        taskId: data,
        fileName: 'dsddsd',
    })
    this.wsInstance = WebSocketConnectionManager.getInstance(socketIOAddress)
    this.wsInstance.on('connect', () => {
        this.wsInstance.emit('join-room', data)
    })
    this.wsInstance.on('export-progress', (data) => {
        console.log(data, 'sss')
        this.$downloadNotify.update(data)
        if (typeof data === 'string') data = JSON.parse(data)
        if (data.isEnd === true) this.offWebSocket() // ☆处理完一定要关闭连接,否则下一个连接就不生效了
    })
},

// 关闭
offWebSocket() {
  if (this.wsInstance) {
    this.wsInstance.closeSelf()
  }
}

// 实例销毁时关闭
beforeDestroy() {
    this.$bus.$off('websocketNotice:begin', this.startWebsocket)
    this.offWebSocket()
}

使用方法
1. 导入包
javascript
运行
// ES 模块导入（Vue2/Vue3 通用）
import WebSocketConnectionManager from 'ysy01-socketio';

// 或 CommonJS 导入（如 Node 环境）
const WebSocketConnectionManager = require('ysy01-socketio');
2. Vue2 组件内使用
vue
<script>
import WebSocketConnectionManager from 'ysy01-socketio';

export default {
  data() {
    return { wsInstance: null };
  },
  created() {
    // 使用方式和原生的socketio一模一样
    // 获取连接实例（URL 替换为你的 Socket.IO 服务地址）
    this.wsInstance = WebSocketConnectionManager.getInstance('ws://127.0.0.1:9501/');

    // 监听连接成功
    this.wsInstance.on('connect', () => {
      console.log('连接成功');
      this.wsInstance.emit('join-room', 'abc');
    });

    // 监听服务端消息
    this.wsInstance.on('join-room', (data) => {
      console.log('收到消息：', data);
    });
  },
  beforeDestroy() {
    if (this.wsInstance) {
      // 退出当前引用（计数-1）
      this.wsInstance.closeSelf();
    }
  }
};
</script>
3. Vue3 组件内使用（仅生命周期差异）
vue
<script setup>
import { onUnmounted } from 'vue';
import WebSocketConnectionManager from 'vue-socketio-manager';

let wsInstance = null;

// 获取连接实例
wsInstance = WebSocketConnectionManager.getInstance('ws://127.0.0.1:9501/');

// 监听事件
wsInstance.on('connect', () => {
  console.log('连接成功');
  wsInstance.emit('join-room', 'abc');
});

wsInstance.on('join-room', (data) => {
  console.log('收到消息：', data);
});

// 组件卸载时清理
onUnmounted(() => {
  if (wsInstance) {
    wsInstance.closeSelf();
  }
});
</script>
4. 自定义配置（覆盖默认值）
javascript
运行
const wsInstance = WebSocketConnectionManager.getInstance(
  'ws://127.0.0.1:9501/',
  {
    reconnection: false, // 关闭自动重连
    timeout: 30000,      // 超时时间改为 30 秒
    pingInterval: 15000  // 心跳间隔改为 15 秒
  }
);
API 文档
方法名	作用	参数说明
static getInstance(url, [options])	获取连接实例（唯一入口）	url：Socket.IO 服务地址；options：配置对象
on(event, callback)	绑定事件监听	event：事件名；callback：回调函数
emit(event, data)	发送消息到服务端	event：事件名；data：发送的数据
closeSelf()	退出当前引用（计数 - 1）	无
isConnected()	获取连接状态	返回 boolean（true = 已连接）
getRefCount()	获取当前引用计数（调试用）	返回 number
注意事项
必须通过 getInstance 获取实例，不能直接 new；
组件销毁时必须调用 closeSelf()，否则会导致引用计数不准；
意外断开（断网 / 服务端下线）会自动清理缓存，无需手动处理；
支持 URL 带参数，同 URL + 同配置才会复用连接。
plaintext