记录vue项目中用vue-socket.io实现实时通讯

最新推荐文章于 2023-12-06 17:39:47 发布

岸芷汀兰§小慧

最新推荐文章于 2023-12-06 17:39:47 发布

阅读量1.2k

点赞数 1

分类专栏： vue-cli后台系统文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_44712405/article/details/106231306

版权

本文记录了在Vue项目中通过vue-socket.io进行实时通讯的实践过程，包括安装库、配置main.js、在组件中定义sockets。然而，在实际应用中遇到一个问题，即无法监听到后台发送的数据，作者对此现象感到困惑并寻求解决方案。

摘要由CSDN通过智能技术生成

1.安装： npm install vue-socket.io --save

2.引入main.js

import VueSocketIO from 'vue-socket.io'

let vueSocketIo = new VueSocketIO({
  debug: true,
  connection: 'http://106.75.105.96:18888'
})

// 监听connect事件，设置isSuccessConnect为true
vueSocketIo.io.on('connect', () => {
  console.log('socket connect from main.js')
  store.commit('CONNECT_SUCCESS', true)
})
Vue.use(vueSocketIo)

3.在组件中定义sockets,和methods同级

  sockets: {
    // socket自带事件
    connect () {
      // 监听socket连接
      console.log('socket 已经连接了！');
    },
    // 监听后台事件，方法是后台定义和提供
    newAlert (data) {
      console.log('执行服务端方法---------------', data);
    },
  },

但是亲测监听不到后台传过来的数据，暂时不清楚原因是什么

4.在app.vue的mounted中打印