使用vue-socket小记

315 阅读1分钟

最近项目要使用socket.io通讯,由于初次使用很多不熟悉的地方,记录一下,以供大家避坑

vue-socket 安装

npm install vue-socket.io --save

引用

在 main.js 中引入


import SocketIO from "socket.io-client";

import VueSocketIO from "vue-socket.io";

vue 使用 socket

Vue.use(new VueSocketIO({

  debug: true,

  connectionSocketIO("http://localhost:8080"), // 连接地址

  vuex: {

    store,

    actionPrefix"SOCKET_"//为vuex设置的两个前缀

    mutationPrefix"SOCKET_"

  },

  options: {

    transports: ["websocket"//仅当通过websocket传输时(默认的),长轮询连接会被首次创建,随后升级到更好的传输方式(比如WebSocket)。

  }
}));

在页面中使用,与 methods 同级

sockets: {

    connect() {

      console.log("连接成功----------");

    },

    push() { //监听push事件,方法是后台定义和提供的

      this.sendCallCar(true);

    }

  },

避坑指南

  1. 使用 vue-socket 时,socket 会被自动挂载到vue的原型上,即 this.$socket为 vue-socket 。因此,需要避免其它内容被挂载为 $socket。
  2. 如果前后台 socket.io 版本不一致,请求时会出现 400。此时需要在后端引入 socket.io 时增加版本兼容。
let io = require('socket.io')(http,{
  allowEIO3true
})