Vue WebSocket简单应用 ws

webSocket应用

<template><div></div>
</template><script>
import { getToken } from "@/utils/auth";
export default {data() {return {url: "",Socket: null, //socket对象lockReconnect: false, //锁定拒绝重连close: false, //是否关闭timer: null, //定时器//   reconnectNum: 3, //重连次数};},created() {this.connect();},beforeDestroy() {// 页面销毁时关闭连接this.lockReconnect = true;this.close = true;if (this.Socket) {this.Socket.close(); //关闭链接this.Socket = null;}},methods: {// 消息推送WebSocketconnect() {try {if ("WebSocket" in window) {let isPro = process.env.NODE_ENV === "production"; // 正式环境let urlHead = "ws://";if (location.protocol === "https:") {urlHead = "wss://";}this.url = isPro? urlHead +location.host +"/websocket/alarm/": "ws://10.19.11.111:11111/websocket/alarm/";// process.env.VUE_APP_WEVSOCKET_PATH;this.Socket = new WebSocket(this.url + getToken());}console.log("正在连接...");this.initEventHandle();} catch (err) {console.log(err, "失败");}},// 监听连接状态+取数据initEventHandle() {this.Socket.onclose = (e) => {this.clearTimer(); //清除定时器this.reconnect(); //定时重连console.log(e.target, "连接关闭!" + new Date().toLocaleString());};this.Socket.onerror = (e) => {this.reconnect(); //定时重连console.log(e.target, "连接错误!");};this.Socket.onopen = (e) => {this.heartCheck(); //心跳检测重置console.log(e.target, "连接成功!" + new Date().toLocaleString());};// 接收数据this.Socket.onmessage = (e) => {if (e.data != "pong") {let data = JSON.parse(e.data);console.log("数据转换", data);}};},// 清除定时器clearTimer() {clearInterval(this.timer);this.timer = null;},// 断开然后定时重连reconnect() {if (this.lockReconnect || this.close) return;//   if (this.reconnectNum >= 3) return; //最多重连三次this.lockReconnect = true;setTimeout(() => {//没连接上会一直重连，设置延迟避免请求过多// this.reconnectNum++;this.connect();this.lockReconnect = false;}, 500);},// 发送心跳检测heartCheck() {this.clearTimer();this.timer = setInterval(() => {// 三十秒钟发一次心跳包this.Socket.send("ping");// console.log("--ping--");}, 30000);},},
};
</script>
<style scoped></style>