vue-socket.io接收不到数据问题的解决方法


Posted in Javascript onMay 13, 2020

最近公司的一个vue项目用到了vue-socket.io来处理socket数据传输,之前用过socket.io-client,现在知道vue-socket.io是基于socket.io-client的一层封装,将socket挂于全局从而更方便的书写。

于是把代码拉取下来运行:

vue-socket.io接收不到数据问题的解决方法

什么鬼,同样的代码为什么我的就接收不到数据,自己新建一个测试一下吧!

先用express和socket.io搭个小socket服务器:

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);

再搭个vue-cli3环境,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')

再去组件里监听一下:

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

结果:

vue-socket.io接收不到数据问题的解决方法

为什么,是socket数据没发送过来吗?我装个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接收不到数据问题的解决方法

没问题,数据传过来了,但vue-socket.io为啥不行,不管了,先向服务端发送一条信息看能不能收到:

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

vue-socket.io接收不到数据问题的解决方法

没问题,收到了,所以现在是socket已经连接上了,客户端可以向服务端正常发送数据,但服务端也向客户端发送数据了,上面用socket.io-client可以正常接收已经证明这一点了,问题是vue-socket.io没有正确写法去接收数据,似乎api上的写法出bug了。

打印一下this发现因为引入vue-socket.io的原因,this上面挂了一个sockets属性:

vue-socket.io接收不到数据问题的解决方法

this.sockets下有一个listener属性,看这个名字就感觉有戏,试一下:

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

vue-socket.io接收不到数据问题的解决方法

哇哦,可以用,好吧,就先这样用吧,虽然还是不知道sockets:{}这种的写法为什么不起作用。

到此这篇关于vue-socket.io接收不到数据问题的解决方法的文章就介绍到这了,更多相关vue-socket.io接收不到数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
Vue关于组件化开发知识点详解
May 13 #Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 #Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 #Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 #Javascript
JavaScript 接口原理与用法实例详解
May 12 #Javascript
ES5新增数组的实现方法
May 12 #Javascript
JavaScript内置对象之Array的使用小结
May 12 #Javascript
You might like
ajax实现无刷新分页(php)
2010/07/18 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python判断文本中消息重复次数的方法
2016/04/27 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
正规的求职信范文分享
2013/12/11 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
查摆剖析材料范文
2014/09/30 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis