前端使用webscoket

前端

<template><div class="wrap"><button @click="socketEmit">连接Socket</button><button @click="socketSendmsg">发送数据</button></div>
</template><script>
export default {data(){return {randomId:null,}},methods:{socketEmit(){// 开始连接 socketthis.$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(){// 关闭 Socketthis.sockets.unsubscribe('testCall');this.$socket.close();},
}
</script>

main.js

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）、WebSockettransports: ['polling'],// 附加请求头（在服务器端的 socket.handshake.headers 对象中找到）extraHeaders:{},},
}))