關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
更新時間：2022年10月18日 14:47:16 作者：菑恩_
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
主要記錄vue-socket.io使用，以及使用版本不同導(dǎo)致消息無法監(jiān)聽問題。
一、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 // 是否開啟控制臺監(jiān)聽打印數(shù)據(jù)
? if (wesocket.connection != '') {
? ? Vue.use(new VueSocketIO(wesocket))
? }
}
getSocket();
//掛在在全局prototype上
Vue.prototype.$getSocket = getSocket
export default testA3.在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====連接');
? },
? ?// 監(jiān)聽斷開連接，函數(shù)
? ?disconnect() {
? ? ? ?console.log('disconnect====監(jiān)聽斷開連接')
? ?},
? ?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版本及以下版本可以這樣使用，能連接并且有數(shù)據(jù)返回，但是vue-socket.io3.08，3.09有bug連接了但是接收不到數(shù)據(jù)。
二、版本導(dǎo)致消息無法監(jiān)聽問題
vue-socket.io3.07版本及以下版本可以這樣使用，能連接并且有數(shù)據(jù)返回，但是vue-socket.io3.08，3.09有bug連接了但是接收不到數(shù)據(jù)。
在3.0.8和3.0.9下這樣寫無效
3.0.8和3.0.9要像下面一樣寫 利用listener來監(jiān)聽
代碼如下（示例）：
this.sockets.listener.subscribe('connect', (data) => {
console.log('connect連接成功')
})
this.sockets.listener.subscribe('msginfo', (data) => {
console.log('數(shù)據(jù)監(jiān)聽msginfo',data)
})
this.sockets.listener.subscribe('msginfoTip', (data) => {
console.log('數(shù)據(jù)監(jiān)聽msginfoTip',data)
})
總結(jié)
vue-socket.io使用版本不同，監(jiān)聽數(shù)據(jù)方式不同。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 中filter的多種用法,本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼)
這篇文章主要介紹了Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼),需要的朋友可以參考下2018-02-02
在前端項目中,Token用于用戶認(rèn)證和權(quán)限管理,文章介紹了在Vue項目中實現(xiàn)Token的無感刷新,包括Token刷新的原理、攔截器的應(yīng)用和處理Token過期的方法,感興趣的可以了解一下2024-11-11
這篇文章主要為大家介紹了vue原生input輸入框原理剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
mitt又稱事務(wù)總線,是第三方插件,這篇文章主要為大家詳細(xì)介紹了Vue3中事件總線mitt的使用方式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
vue中echarts的用法及與elementui-select的協(xié)同綁定操作
這篇文章主要介紹了vue中echarts的用法及與elementui-select的協(xié)同綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
前端低代碼form-generator實現(xiàn)及新增自定義組件詳解
這篇文章主要給大家介紹了關(guān)于前端低代碼form-generator實現(xiàn)及新增自定義組件的相關(guān)資料,form-generator是一個開源的表單生成器,可以幫助我們快速構(gòu)建各種表單頁面,需要的朋友可以參考下2023-11-11
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價值，感興趣的小伙伴們可以參考一2017-10-10
下面小編就為大家分享一篇在vue項目中引入highcharts圖表的方法(詳解)，具有很好的參考價值，希望對大家有所幫助2018-03-03
這篇文章主要為大家介紹了vue3容器布局和導(dǎo)航路由實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06