vue中 使用socketIO实时通讯

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);
    // });
  }
}