热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这篇文章主要介绍了解决vue-socket.io接收不到数据问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

先用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')

再去组件里监听一下:


结果:

为什么,是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为啥不行,不管了,先向服务端发送一条信息看能不能收到:

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


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

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


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

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


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

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


推荐阅读
  • Golang与微服务架构:构建高效微服务
    本文探讨了Golang在微服务架构中的应用,包括Golang的基本概念、微服务开发的优势、常用开发工具以及具体实践案例。 ... [详细]
  • 本文探讨了六项Java特性,它们虽然强大,但在不当使用时可能会给应用程序带来严重问题。文章基于作者Nikita Salnikov Tarnovski多年的应用性能调优经验,提供了对这些特性的深入分析。 ... [详细]
  • 集群与负载均衡技术解析
    本文探讨了集群(Cluster)的概念,即通过网络连接的一组计算机系统,它们作为一个整体提供服务,实现分布式计算。文章还详细介绍了负载均衡技术,旨在提高网络服务的效率和可靠性。 ... [详细]
  • 深入浅出:Hadoop架构详解
    Hadoop作为大数据处理的核心技术,包含了一系列组件如HDFS(分布式文件系统)、YARN(资源管理框架)和MapReduce(并行计算模型)。本文将通过实例解析Hadoop的工作原理及其优势。 ... [详细]
  • 对于初次购买阿里云服务器的新手用户来说,如何高效地利用服务器资源并成功部署网站是一个重要的课题。本文将详细指导您完成从购买服务器到网站上线的六个关键步骤。 ... [详细]
  • 本文详细解析了Java中流的概念,特别是OutputStream和InputStream的区别,并通过实际案例介绍了如何实现Java对象的序列化。文章不仅解释了流的基本概念,还探讨了序列化的重要性和具体实现步骤。 ... [详细]
  • 本书《Pro Git》深入探讨了 Git 版本控制系统的核心概念与高级功能,旨在帮助开发者和团队有效管理代码变更。通过实例和最佳实践,读者将学习如何利用 Git 提升工作效率。 ... [详细]
  • 探讨了生成时间敏感的一次性伪随机密码的方法,旨在通过加入时间因素防止重放攻击。 ... [详细]
  • 惠普战86 Pro G2:新一代商用台式机的性能与设计解析
    惠普战86 Pro G2台式机以其卓越的性能和紧凑的设计,满足了现代商务环境的需求。本文将详细介绍这款商用台式机的各项特点,包括其强大的硬件配置、精美的外观设计以及出色的稳定性和安全性。 ... [详细]
  • Redis中的字符串对象解析
    Redis中字符串对象的编码方式包括int、raw和embstr。当字符串对象存储的是可由long类型表示的整数时,该值会被直接存储在对象的ptr属性中,此时对象的编码被设为int。 ... [详细]
  • 本文详细介绍了在 Windows 7 上安装和配置 PHP 5.4 的 Memcached 分布式缓存系统的方法,旨在减少数据库的频繁访问,提高应用程序的响应速度。 ... [详细]
  • 深入解析轻量级数据库 SQL Server Express LocalDB
    本文详细介绍了 SQL Server Express LocalDB,这是一种轻量级的本地 T-SQL 数据库解决方案,特别适合开发环境使用。文章还探讨了 LocalDB 与其他轻量级数据库的对比,并提供了安装和连接 LocalDB 的步骤。 ... [详细]
  • 本文介绍了如何使用C# Winform开发局域网内的文件传输功能,详细描述了从用户界面到后端网络通信的具体实现。 ... [详细]
  • 本文探讨了Java中有效停止线程的多种方法,包括使用标志位、中断机制及处理阻塞I/O操作等,旨在帮助开发者避免使用已废弃的危险方法,确保线程安全和程序稳定性。 ... [详细]
  • 尤洋:夸父AI系统——大规模并行训练的深度学习解决方案
    自从AlexNet等模型在计算机视觉领域取得突破以来,深度学习技术迅速发展。近年来,随着BERT等大型模型的广泛应用,AI模型的规模持续扩大,对硬件提出了更高的要求。本文介绍了新加坡国立大学尤洋教授团队开发的夸父AI系统,旨在解决大规模模型训练中的并行计算挑战。 ... [详细]
author-avatar
yfx94132囧
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有