关于vue-socket.io使用及版本原因消息无法监听bug

目录前言一、vue-socket.io使用1.npm下载2.在src文件夹里面新建lib文件夹3.在main.js引入4.在组件中的用法二、版本导致消息无法监听问题在3.0.8和3.0.9下这样写无效...

目录

前言

主要记录vue-socket.io使用，以及使用版本不同导致消息无法监听问题。

一、vue-socket.io使用

1.npm下载

npm install vue-socket.io --save-dev

2.在src文件夹里面新建lib文件夹

在lib文件夹里面新建socket.js

代码如下（示例）：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import { getToken } from "../../libs/util";
let testA;
let wesocket = {
 debug: true,
 connection: ''
}
function getSocket (t) {
 console.log('地址',process.env.VUE_APP_SOCKET)
 var socketIp = process.env.VUE_APP_SOCKET// socket地址\
 wesocket.connection = socketIp
 if (getToken() || t) { // 判断是否有token tokenId sessid
  let tk = getToken() ? getToken() : t
  wesocket.connection = socketIp + '?sessid=' + tk
 }
 wesocket.debug = true // 是否开启控制台监听打印数据
 if (wesocket.connection != '') {
  Vue.use(new VueSocketIO(wesocket))
 }
}
getSocket();
//挂在在全局prototype上
Vue.prototype.$getSocket = getSocket

export default testA

3.在main.js引入

代码如下（示例）：

import VueSocketIO from './lib/socket' 
new Vue({ 
 el: '#app', 
 VueSocketIO, 
 components: { 
 App 
}, 
template: '<App/>' 10. })

4.在组件中的用法

代码如下（示例）：

//跟methods同级
sockets: {
 connect: function () {
   console.log('connect====连接');
 },
 // 监听断开连接，函数
 disconnect() {
   console.log('disconnect====监听断开连接')
 },
 reconnect () {
   console.log('reconnect====再连接')
 },
 msginfo: function (data) {
   let jsonObj = JSON.parse(data) ;
   console.log('jsonObj++++++++++',jsonObj)
 },
 msginfoTip: function (data) { // socket获取冒泡信息
   let data1 = JSON.parse(data);
   let _this = this
   // console.log('data1获取冒泡信息',data1)
 }
}

注意: vue-socket.io3.07版本及以下版本可以这样使用，能连接并且有数据返回，但是vue-socket.io3.08，3.09有bug连接了但是接收不到数据。

二、版本导致消息无法监听问题 

vue-socket.io3.07版本及以下版本可以这样使用，能连接并且有数据返回，但是vue-socket.io3.08，3.09有bug连接了但是接收不到数据。

在3.0.8和3.0.9下这样写无效

3.0.8和3.0.9要像下面一样写 利用listener来监听

代码如下（示例）：

this.sockets.listener.subscribe('connect', (data) => {
  console.log('connect连接成功')
})

this.sockets.listener.subscribe('msginfo', (data) => {
  console.log('数据监听msginfo',data)
})

this.sockets.listener.subscribe('msginfoTip', (data) => {
  console.log('数据监听msginfoTip',data)
})

总结

vue-socket.io使用版本不同，监听数据方式不同。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。