溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

發(fā)布時(shí)間:2020-07-27 15:39:45 來源:億速云 閱讀:519 作者:小豬 欄目:web開發(fā)

這篇文章主要講解了vue-socket.io接收不到數(shù)據(jù)問題怎么辦,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。

最近公司的一個(gè)vue項(xiàng)目用到了vue-socket.io來處理socket數(shù)據(jù)傳輸,之前用過socket.io-client,現(xiàn)在知道vue-socket.io是基于socket.io-client的一層封裝,將socket掛于全局從而更方便的書寫。

于是把代碼拉取下來運(yùn)行:

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

什么鬼,同樣的代碼為什么我的就接收不到數(shù)據(jù),自己新建一個(gè)測試一下吧!

先用express和socket.io搭個(gè)小socket服務(wù)器

let express = require('express');
let app = express();

let server= require('http').Server(app);
let io = require('socket.io')(server);

io.on('connect', (socket) => {
  setInterval(() => {
    socket.emit('hi','hello')
  },2000)
  socket.on('hello', (data) => {
    console.log('hello',data)
    socket.emit('hi','get it')
  })
  socket.on('disconnect', (data) => {
    console.log('斷開', data)
  })
})

server.listen(8080);

再搭個(gè)vue-cli3環(huán)境,main.js里use一下socket:

import Vue from 'vue'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'

Vue.config.productionTip = false

Vue.use(new VueSocketIO({
 debug: true,
 connection: 'http://127.0.0.1:8080',
}))

new Vue({
 render: h => h(App),
}).$mount('#app')

再去組件里監(jiān)聽一下:

<script>
export default {
 sockets: {
  connect() {
   console.log('鏈接成功');
  },
  disconnect() {
   console.log('斷開鏈接')
  },
  reconnect() {
   console.log('重新鏈接')
  },
  hi(res) {
   console.log('VueSocketIO', res)
  }
 }
}
</script>

結(jié)果:

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

為什么,是socket數(shù)據(jù)沒發(fā)送過來嗎?我裝個(gè)socket.io-client試試:

import io from 'socket.io-client'
export default {
 mounted() {
  io('http://127.0.0.1:8080').on('hi', (res) => {
   console.log('socket.io-client', res)
  })
 },
}

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

沒問題,數(shù)據(jù)傳過來了,但vue-socket.io為啥不行,不管了,先向服務(wù)端發(fā)送一條信息看能不能收到:

this.$socket.emit('hello','i am wk')

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

沒問題,收到了,所以現(xiàn)在是socket已經(jīng)連接上了,客戶端可以向服務(wù)端正常發(fā)送數(shù)據(jù),但服務(wù)端也向客戶端發(fā)送數(shù)據(jù)了,上面用socket.io-client可以正常接收已經(jīng)證明這一點(diǎn)了,問題是vue-socket.io沒有正確寫法去接收數(shù)據(jù),似乎api上的寫法出bug了。

打印一下this發(fā)現(xiàn)因?yàn)橐雟ue-socket.io的原因,this上面掛了一個(gè)sockets屬性:

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

this.sockets下有一個(gè)listener屬性,看這個(gè)名字就感覺有戲,試一下:

this.sockets.listener.subscribe('hi', (data) => {
   console.log('++++++++++',data)
  })

vue-socket.io接收不到數(shù)據(jù)問題怎么辦

看完上述內(nèi)容,是不是對vue-socket.io接收不到數(shù)據(jù)問題怎么辦有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI