import { randomString } from '@/utils/index.js';
import router from '@/router/index.js';
// ws配置信息
export const webSocket = {
ws: null, // ws实例
recTime: 5 * 1000, // 重连刷新时间
webSocketTime: null, // 定时请求发送心跳包id
reconnentTime: null, // 唱失败从重连id
param: '', // 请求参数
url: ``, // ws url
wsData: {},// ws 抛出来的数据
// 获取ws成功后的数据
getWsData () {
return this.wsData;
},
// ws 关闭连接
close () {
clearInterval(this.webSocketTime);
clearTimeout(this.reconnentTime);
this.ws && this.ws.close();
console.log('-----执行webSocket关闭操作----');
},
// ws重联
wsReconnent () {
clearInterval(this.webSocketTime);
clearTimeout(this.reconnentTime);
this.reconnentTime = setTimeout(() => {
console.log('-----执行webSocket重联操作----');
this.ws && this.ws.close(); // 先关闭然后再重联
// this.param = '';
this.wsInt(this.url, this.param); // 断开5s后重联
}, this.recTime);
},
// ws发送心跳包
startHeartBeat () {
this.webSocketTime = setInterval(() => {
if (this.ws.readyState == 1) {
this.ws.send('心跳包');
} else {
console.log('心跳断开,服务端断开,执行ws.close()触发重连!');
this.wsReconnent(); // 断开重连
}
}, this.recTime);
},
// 初始化ws方法
wsInt(url, param) {
if (typeof window.WebSocket === 'undefined') {
console.error('浏览器不支持WebSocket');
return;
}
this.url = url;
this.param = param;
const ws = new WebSocket(`${this.url}${this.param}_${randomString()}`);
this.ws = ws;
ws.onopen = function(evt) {
console.log('------告警推送连接打开------');
webSocket.startHeartBeat();
};
ws.onmessage = function(evt) {
if (evt.data !== '连接成功' && evt.data !== '心跳包') {
console.log('------告警推送数据------', JSON.parse(evt.data));
webSocket.wsData = JSON.parse(evt.data);
}
};
ws.onclose = function(evt) {
console.log('------告警推送连接关闭------');
if (router.app.$route.name !== 'login') {
// webSocket.wsReconnent(); // 断开重连
}
};
ws.onerror = function(evt) {
console.error('-------告警推送websocket连接失败--------');
webSocket.wsReconnent(); // 断开重连
};
},
};
<template>
<div :class="['wanringMsgBox', isActive ? '' : 'active']">
<p style="">你有新的告警信息!<i class="el-icon-circle-close close-btn" @click="close"></i></p>
<div class="content" @click="wanringToggle">
<ul>
<li v-for="(item, index) in tableData" :key="index">
<span class="prj-name" style="font-size:15px;">项目:{{item.orgPath || '-'}}</span>
<span class="content" :title="item.content">告警内容:{{item.content}}</span>
<span class="btn">日期:{{item.createTime}}</span>
</li>
</ul>
<span class="more">前往确认>></span>
</div>
</div>
</template>
<script>
import {webSocket} from '@/utils/webSocket.js';
import {mapState} from 'vuex';
import {DEV_WS_API} from '@/axios/index.js';
export default {
name: 'warningNotice',
data () {
return {
webSocket,
timId: null,
tableData: []
};
},
computed: mapState({
isActive: state => state.warningState
}),
watch: {
'webSocket.wsData': {
handler (newv, oval) {
if (newv.id) {
this.tableData = [newv];
this.$store.commit('setWarningState', true);
}
},
immediate: true
}
},
created () {},
beforeDestroy () {
webSocket.close();
},
mounted () {
if (this.$route.name !== 'login') {
const user = JSON.parse(window.sessionStorage.getItem('user'));
webSocket.wsInt(`${DEV_WS_API}device-manager/ws/`, user.id);
}
},
methods: {
// 点击跳转到告警列表
wanringToggle () {
this.$store.commit('setWarningState', false);
this.$router.push({name: 'warningList'});
},
close () {
this.$store.commit('setWarningState', false);
},
sureBtn () {
this.$store.commit('setWarningState', true);
}
}
};
</script>
<style lang="less" scoped>
.wanringMsgBox.active{
right:-350px;
}
.wanringMsgBox{
position: fixed;
right:0;
bottom:0;
z-index:99999999;
height:150px;
width:350px;
background:#fff;
transition: all 1s;
.more{
color:red;
position:absolute;
bottom:5px;
right:20px;
}
p {
position:relative;
height:30px;
line-height:30px;
background:#00014c;
color:#fff;
font-size:14px;
text-align:left;
padding-left:10px;
.close-btn{
position: absolute;
right:10px;
top: 8px;
cursor: pointer;
}
}
.content{
height:270px;
padding-top:10px;
cursor:pointer;
li{
height:30px;
line-height:30px;
padding:0 20px;
>span{
height:30px;
line-height:30px;
padding-top:0;
}
&::after{
content: '';
display:block;
clear: both;
}
.prj-name{
display:block;
width:200px;
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.content{
display:block;
color:red;
width:320px;
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.btn{
display:block;
height:20px;
margin-top:5px;
line-height:20px;
color:#333;
cursor:pointer;
}
}
}
}
</style>
// 生成随机字符串
export function randomString (len = 32) {
let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return 'chart-' + pwd;
}
项目过程中使用根据自己情况修改对应的url 和去掉不需要的逻辑和方法即可。