vue 全局插件对 socket.io-client 进行的封装

• 支持创建多消息通道与管理

import socketIo, {
  createSocket,
  getSocket,
  closeSocket,
} from 'v-socket-io-plugins';
Vue.use(socketIo);

//创建socket实例【socketKey标记字段必传，更多参数可以查看socket官网】
createSocket(
  'http://......',
  {
    socketKey: 'testSocket',
    // ......
  },
  function () {
    console.log('testSocket链接成功');
  }
);
// 附属：如果多页面或者多组件需要监听链接成功事件时
// 注意：需要在页面或者组件都加载完成后链接成功事件才能接收。

//获取socket实例【得到实例后可做更多的操作，更多操作可以查看socket官网】
getSocket('testSocket');

//主动关闭socket实例
closeSocket('testSocket');

//推送消息【更多消息类型以及参数可以查看socket官网】
getSocket('testSocket').send('消息内容');

// 添加自定义事件
getSocket('testSocket').on('push_event', function (msg) {
  console.log(msg);
});

//更多使用方法查看官网......

export default {
  /***
   * socket可以是对象，也可以是数组，如果同时要连接多个连接时就用数组包含多个对象的形式
   */
  socket: {
    /**
     * 支持组件或者页面配置形式创建socket,配置形式只支持挂载是创建一个通道，并且在注销是会关闭通道
     */
    //链接地址
    connection: 'http://......',
    //参数
    options: {
      socketKey: 'testSocket',
      // ......
    },
    // 任何页面或组件监听消息数据接收
    message(msg) {
      console.log(msg);
    },
    // 任何页面或组件监听通道链接成功
    connect() {
      console.log('链接成功回调');
    },
    // 任何页面或组件监听通道关闭
    disconnect() {
      console.log('链接关闭回调');
    },
    // 任何页面或组件监听自定义事件
    events: {
      define_events(msg) {
        console.log(msg);
      },
    },
  },
};

原作者

• levy

创建时间

• 2020-12-22