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

再去组件里监听一下：

<script>
export default {
 sockets: {
  connect() {
   console.log('链接成功');
  },
  disconnect() {
   console.log('断开链接')
  },
  reconnect() {
   console.log('重新链接')
  },
  hi(res) {
   console.log('VueSocketIO', res)
  }
 }
}
</script>

结果：

为什么，是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接收不到数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue Socket.io源码解读

    Vue Socket.io源码解读

    背景 有一个项目,今年12月份开始重构,项目涉及到了socket.但是socket用的是以前一个开发人员封装的包(这个一直被当前的成员吐槽为什么不用已经千锤百炼的轮子).因此,趁着这个重构的机会,将vue-socket.io引入,后端就用socket.io.我也好奇看了看vue-socket.io的源码(我不会说是因为这个库的文档实在太简略了,我为了稳点去看源码了解该怎么用) 开始 文件架构 我们主要看src下的三个文件,可以看出该库是用了观察者模式 Main.js // 这里创建一个obser

  • vue + socket.io实现一个简易聊天室示例代码

    vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    项目简介 主要是通过做一个多人在线多房间群聊的小项目.来练手全栈技术的结合运用. 项目源码:chat-vue-node 主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置: 需安装配置好 node,mongodb环境(参考:http://www.jb51.net/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据. 编译运行: 1.开启MongoDB服务,新建命令行

  • Vue.js如何使用Socket.IO的示例代码

    在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转).订单语言提醒等,这些都是建立在两端实时通信的基础上的.对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能. 1.什么是 Socket.IO? Socket.IO 是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信.它包括:Node.js服务器库.浏览器的Javascript客户端库.它会

  • vue-socket.io跨域问题有效解决方法

    网友问题: 使用了vue-cli这个脚手架工具.在开发环境中如何配置跨域这个我懂.但是使用npm run build后,里面所有的ajax的跨域请求url都变成了根目录. 这样该如何解决部署的跨域问题? 报错信息: Access to XMLHttpRequest at 'http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling&t=N0oqNsW' from origin 'http://localhost:8080' h

  • Vue与Node.js通过socket.io通信的示例代码

    一.Node中socket.io基础 1.是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式: HTML5中的WebSocket通信 Flash中使用的WebSocket通信 XHR轮询 JSONP轮询 Forever Iframe 在通信时,客户端与服务器端可以使用相同的API 2.怎么用 原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器 服务器端引入 var http=require('http') var s

  • 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 =

  • java使用Socket类接收和发送数据

    网络应用分为客户端和服务端两部分,而Socket类是负责处理客户端通信的Java类.通过这个类可以连接到指定IP或域名的服务器上,并且可以和服务器互相发送和接受数据.在本文及后面的数篇文章中将详细讨论Socket类的使用,内容包括Socket类基础.各式各样的连接方式.get和set方法.连接过程中的超时以及关闭网络连接等. 在本文中,我们将讨论使用Socket类的基本步骤和方法.一般网络客户端程序在连接服务程序时要进行以下三步操作. 连接服务器 发送和接收数据 关闭网络连接 一.连接服务器 在

  • vue项目退出登录清除store数据的三种方法

    vue项目退出登录清除store数据的三种方法

    目录 方法一:(不友好,页面会白屏,不推荐使用) 方法二 : (不会出现白屏,推荐使用) 方法三 : vuex清除token (不会出现白屏,推荐使用) 总结 方法一:(不友好,页面会白屏,不推荐使用) 在退出登录的loginOut 方法里面: window.location.reload() 方法二 : (不会出现白屏,推荐使用) 利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if="is

  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • Vue动态生成el-checkbox点击无法赋值的解决方法

    Vue动态生成el-checkbox点击无法赋值的解决方法

    前言 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的 例如: 定义的 data 的 form 里面是空对象,需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList,这个就是动态生成的表单数据 v-for 循环 checkList,得到 key,然后直接 v

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

  • Vue中的v-for指令不起效果的解决方法

    我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }} </li> </ul> </div> 结果发现不好用,数据读入了但是没有显示 于是我后来看官网的例子才明白,原来是id和v-for不在一个层级上,官网的例子如下,我按照不在一个层级上改,果然好用了 <ul id=&quo

  • Bootstrap Table表格一直加载(load)不了数据的快速解决方法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load

随机推荐