最近项目要使用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,
connection: SocketIO("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);
}
},
避坑指南
- 使用 vue-socket 时,socket 会被自动挂载到vue的原型上,即
this.$socket为 vue-socket 。因此,需要避免其它内容被挂载为 $socket。 - 如果前后台 socket.io 版本不一致,请求时会出现 400。此时需要在后端引入 socket.io 时增加版本兼容。
let io = require('socket.io')(http,{
allowEIO3: true
})