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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 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
PHP高级OOP技术演示
2009/08/27 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Php多进程实现代码
2018/05/07 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python迭代器常见用法实例分析
2019/11/22 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
农村婚礼证婚词
2014/01/10 职场文书
科技之星事迹材料
2014/06/02 职场文书
安全生产宣传标语
2014/06/06 职场文书
金融专业求职信
2014/08/05 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
python glom模块的使用简介
2021/04/13 Python
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python