vue中使用 vue-socket.io

源码地址 文档

安装,配置跟随文档走。主要讲一下在组件中如何使用:

1.事件的注册与监听

如果你想在组件中监听socket事件,你需要在.vue组件中添加 sockets对象,里面的每一个函数都会监听事件,这取决于对象的键值。

export default {
      sockets: {
       connect: function () {
           console.log('socket connected')
       },
       customEmit: function (data) {
           console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
       }
   },
   methods: {
       clickButton: function (data) {
           // $socket is socket.io-client instance
           this.$socket.emit('emit_method', data)
       }
   }
   }

以上来自官方的翻译,听起来很别扭是不是?让我们来试验一下
我们在sockets对象中注册上面两个方法后,在后端调用一下:

PS:后端配置看文档

io.on('connection', function(socket) {
    console.log("vue
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值