<script>
export default {
data() {
return {
websock: null
};
},
methods: {
initWebSocket() {
var backUrlarr = this.$store.state.baseUrl.split("/"),
socketUrl = `${backUrlarr[2]}/${backUrlarr[3]}/websocket`;
if (this.$store.state.baseUrl.indexOf("https") >= 0) {
socketUrl = "wss://" + socketUrl;
} else {
socketUrl = "ws://" + socketUrl;
}
this.websock = new WebSocket(socketUrl);
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onmessage = this.websocketonmessage;
this.websock.onclose = this.websocketclose;
},
websocketonopen() {
console.log("WebSocket连接成功", new Date());
let self = this;
setInterval(() => {
console.log("发送心跳");
let ping = { websocketType: "ping" };
self.websocketsend(JSON.stringify(ping));
}, 30000);
},
websocketonerror(e) {
console.log("WebSocket连接发生错误");
},
websocketonmessage(e) {
//处理数据
const socketData = JSON.parse(e.data);
},
websocketsend(agentData) {
this.websock.send(agentData);
},
websocketclose(e) {
console.log("WebSocket连接关闭");
setTimeout(() => {
this.initWebSocket();
console.log("socket正在重连...");
}, 500);
}
},
created() {
this.initWebSocket();
},
destroyed() {
this.websocketclose();
}
};
</script>
基础代码如上 :
但是我们本地需要调试咋办呢
当然是通过 webpack 代理了
'/websocket/**': {
target: 'ws://192.168.2.51:8380',
ws: true,
secure: false,
logLevel: 'debug'
}
baseurl 还是如需要配置
scoketUrl: 'ws://192.168.2.51:8380/websocket/' // 测试环境