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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
学习vue.js条件渲染
Dec 03 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
Bootstrap响应式表格详解
May 23 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
js通过canvas生成图片缩略图
Oct 02 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使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
BootStrap selectpicker
2016/06/20 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
轻松理解Python 中的 descriptor
2017/09/15 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
学Python 3的理由和必要性
2019/11/19 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
仓库理货员岗位职责
2013/12/18 职场文书
学习党章思想汇报
2014/01/07 职场文书
公司道歉信范文
2014/01/09 职场文书
财务管理专业求职信
2014/06/11 职场文书
班级文化建设标语
2014/06/23 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
商业计划书范文
2019/04/24 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript