//app.vue
<template>
<div id="app">
<div class="fr cursor">
<!-- 工單提醒 start-->
<el-badge :is-dot="showMsg" class="item">
<i class="el-icon-bell colorW" size="20" @click="handleCommandGoWoker"></i>
</el-badge>
<!-- 工單提醒 end-->
</div>
</el-menu>
<router-view />
</div>
</template>
<script>
let wsTime = null
let wsSend = null
export default {
name: "app",
data() {
return {
showMsg:false,
}
},
methods: {
handleCommandGoWoker(){
this.showMsg = false
},
websocket(){
// WebSocket start
if ('WebSocket' in window) {
let id = JSON.parse(localStorage.getItem('userInfo'))?JSON.parse(localStorage.getItem('userInfo')).employeeId:''
let ws = new WebSocket('wss://suifang-xxxx.com.cn/websocket/'+id)
ws.onopen = (event) => {
console.log('open',event)
};
ws.onmessage = (event) => {
// console.log('mesage',event)
if(event.data != '連接成功' && event.data != '心跳'){
this.showMsg = true
let notify = this.$notify.info({
title: '消息',
message: event.data,
duration: 0,
onClick:()=>{
notify.close()
this.showMsg = false
}
});
}
};
ws.onerror = (event) => {
console.log('error',event)
if(wsTime){
window.clearTimeout(wsTime)
wsTime = null
}
wsTime = window.setTimeout(() => {
this.websocket()
},3000)
};
ws.onclose = (event) => {
console.log('close',event)
if(wsTime){
window.clearTimeout(wsTime)
wsTime = null
}
wsTime = window.setTimeout(() => {
this.websocket()
},3000)
};
//維持心跳連接,處理60秒自動斷開
if(wsSend){
window.clearInterval(wsSend)
wsSend = null
}
wsSend = window.setInterval(()=>{
if(ws.readyState == 1){
ws.send('心跳')
}
},10000)
}else{
console.log('瀏覽器不支持 WebSocket..')
}
// WebSocket end
}
},
created() {
this.websocket()
// Server-Sent Events (sse) start
// if ('EventSource' in window) {
// let source = new EventSource('https://xxx.com.cn/websocket/6', { withCredentials: false })
// source.onconnecting = function (event) {
// console.log('connecting',event)
// };
// source.onopen = function (event) {
// console.log('open',event)
// };
// source.onmessage = function (event) {
// console.log('mesage',event)
// };
// source.onerror = function (event) {
// console.log('error',event)
// };
// // source.close()
// }else{
// console.log('瀏覽器不支持 Server-Sent..')
// }
// Server-Sent Events (sse) end
},
};
</script>
vue+element WebSocket
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.