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与DropDownList 区别分析
Jan 01 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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下几种删除目录的方法总结
2007/08/19 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP数组函数知识汇总
2016/05/12 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Django中Forms的使用代码解析
2018/02/10 Python
python发送告警邮件脚本
2018/09/17 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python中p-value的实现方式
2019/12/16 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
中学生学雷锋活动心得体会
2014/03/10 职场文书
交通事故协议书
2014/04/15 职场文书
计生工作先进事迹
2014/08/15 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
长城导游词300字
2015/01/30 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python