前端
javascript
<template>
<div class="wrap">
<button @click="socketEmit">连接Socket</button>
<button @click="socketSendmsg">发送数据</button>
</div>
</template>
<script>
export default {
data(){
return {
randomId:null,
}
},
methods:{
socketEmit(){
// 开始连接 socket
this.$socket.open();
// 订阅事件,testCall 是与后端约定好的名称
this.sockets.subscribe('testCall', (res) => {
if(res.code == 200 && res.randomId === this.randomId){
console.log('召唤成功')
}
})
},
// 发送消息
socketSendmsg(){
this.randomId = Math.random();
// testCall 是与后端约定好的名称
this.$socket.emit('testCall', {
"randomId": this.randomId,
"deviceId": "123456"
});
},
},
sockets: {
connect: function () {
console.log('连接成功')
},
disconnect: function () {
console.log('断开连接')
},
reconnect: function () {
console.log('重新连接')
},
},
beforeDestroy(){
// 关闭 Socket
this.sockets.unsubscribe('testCall');
this.$socket.close();
},
}
</script>
main.js
javascript
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
// 生产环境建议关闭,开发环境打开(在控制台看到socket连接和事件监听的信息)
debug: true,
connection:'http://metinseylan.com:1992',
options:{
// 创建时是否自动连接 我们这里设定为false,在指定页面再开启
autoConnect: false,
// 路径(默认值:/socket.io/)
path: "/my-app/",
// 目前有两种传输方式:HTTP long-polling(可简称:polling)、WebSocket
transports: ['polling'],
// 附加请求头(在服务器端的 socket.handshake.headers 对象中找到)
extraHeaders:{},
},
}))