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下弹出窗口的变通
Apr 18 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
JS函数本身的作用域实例分析
Mar 16 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初学者头痛的十四个问题
2006/07/12 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
详解python如何引用包package
2020/06/07 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
python如何调用php文件中的函数详解
2020/12/29 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
文明之星事迹材料
2014/05/09 职场文书
生活小常识广播稿
2015/08/19 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS