vue中使用socketIO实时通讯

原创已于 2022-04-22 09:04:42 修改 · 5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-03-29 10:35:41 首次发布

Vue 专栏收录该内容

198 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和配置vue-socket.io库，以实现与后台的实时通信。通过在main.js中引入并注册vue-socket.io，设置socket连接地址，并在App.vue中监听socket的连接、断开、重连及接收到的数据，从而展示如何进行消息的发送和接收。同时，文章展示了如何将接收到的数据进行处理并存储到Vuex状态管理中。

1.安装 vue-socket.io

npm install vue-socket.io --save

2.注册和使用

// 引入 socket.io
import VueSocketIO from 'vue-socket.io';
// 使用 socket.io
Vue.use(new VueSocketIO({
  debug: true,
  connection: ``, //xxx填后台给的socket地址，端口号根据实际后台端口写
  vuex: {
    store,
    mutationPrefix: "SOCKET_",
    actionPrefix: "SOCKET_"
  }
}));

3.App.vue

export default {
    // socket.io
  sockets: {
    //查看socket是否连接成功
    connect() {
      console.log("socket.io链接成功");
      // 向服务端发消息
      // this.sockets.emit("ClientReceive", "socket.io连接成功后向后台发送消息");
    },
    disconnect() {
      console.log("socket.io断开链接");
    }, //检测socket断开链接
    reconnect() {
      console.log("socket.io重新链接");
    },
    //客户端接收后台传输的socket事件
    ClientReceive(data) {
      const messageData =
        data.message == "hello client" ? "" : JSON.parse(data);
      if (messageData) {
        this.$elementMessage(messageData.content);
        // 格式化消息时间戳
        messageData.createTime = this.$utils.formatDateAll(
          messageData.createTime
        );
        this.$store.dispatch("SOCKET_CONTENT_CHANGE", messageData);
      }
      console.log("--messageData", messageData); //接收的消息
    }
    // 调用 io,接收服务端发来的推送
    // this.sockets.subscribe("ClientReceive", data => {
    //   console.log("ClientReceive", data);
    // });
  }
}