關于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
更新時間：2022年10月18日 14:47:16 作者：菑恩_
這篇文章主要介紹了關于vue-socket.io使用及版本原因消息無法監(jiān)聽bug，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
主要記錄vue-socket.io使用，以及使用版本不同導致消息無法監(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)聽打印數據
? 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)聽斷開連接，函數
? ?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版本及以下版本可以這樣使用，能連接并且有數據返回，但是vue-socket.io3.08，3.09有bug連接了但是接收不到數據。
二、版本導致消息無法監(jiān)聽問題
vue-socket.io3.07版本及以下版本可以這樣使用，能連接并且有數據返回，但是vue-socket.io3.08，3.09有bug連接了但是接收不到數據。
在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('數據監(jiān)聽msginfo',data)
})
this.sockets.listener.subscribe('msginfoTip', (data) => {
console.log('數據監(jiān)聽msginfoTip',data)
})
總結
vue-socket.io使用版本不同，監(jiān)聽數據方式不同。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在本文中我們給大家分享了關于vue環(huán)形進度條組件的使用方法以及實例代碼，需要的朋友們跟著測試下吧。2018-10-10
這篇文章主要介紹了如何使用router-link對象方式傳遞參數，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
最近用 Vue 做移動端頁面遇到一個問題,需要記住滾動條的位置,所以下面這篇文章主要給大家介紹了關于vue中記錄滾動條位置的兩種方法,文中給出了詳細的實例,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了如何去除element-ui中table的hover效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue 實現Web端的定位功能獲取經緯度，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue el-table 動態(tài)添加行與刪除行的實現
這篇文章主要介紹了vue el-table 動態(tài)添加行與刪除行的實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了Vue按時間段查詢數據組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02