您好,登錄后才能下訂單哦!
這篇文章主要講解了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)行:
什么鬼,同樣的代碼為什么我的就接收不到數(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é)果:
為什么,是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) }) }, }
沒問題,數(shù)據(jù)傳過來了,但vue-socket.io為啥不行,不管了,先向服務(wù)端發(fā)送一條信息看能不能收到:
this.$socket.emit('hello','i am wk')
沒問題,收到了,所以現(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屬性:
this.sockets下有一個(gè)listener屬性,看這個(gè)名字就感覺有戲,試一下:
this.sockets.listener.subscribe('hi', (data) => { console.log('++++++++++',data) })
看完上述內(nèi)容,是不是對vue-socket.io接收不到數(shù)據(jù)問題怎么辦有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(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)容。