vue+ element Notification消息推送
業(yè)務需求：
登錄后進入頁面，將后端推送過來的【待審批】的消息软瞎，用$notify彈出涤浇，并且魔慷，此推送消息的彈窗可以點擊院尔，跳轉到審批頁面，且展示這條【待審批】的詳情彈窗源梭，以供用戶審批
首先：登錄進入頁面后，消息可以顯示在任何頁面裹驰，所以，這個消息推送的【通知】寫在了App.vue頁面中
然后：既然是消息推送片挂，我們用到的是websocket幻林，實時接收消息
再然后：消息推送的【通知】使用的是element的Notification
再然后~~ 上代碼
// App.vue
<template>
<div id="app">
<transition name="fade" mode="out-in">
<router-view/>
</transition>
</div>
</template>
<script>
import Cookie from "js-cookie";
export default {
name: "App",
data() {
return {
socUrl: "localhost:8080"
};
},
created() {
this.initWebSocket();
},
methods: {
initWebSocket() {
this.$http
.service({
method: "get",
url: "/user/current",
data: {
user: Cookie.get("user")
}
})
.then(res => {
const resData = res.data.data;
// ws是一定要寫的，this.socUrl ：是后端的IP
// "/imserver/" + resData.pkId 是后端給的接口和要傳的Id
let socUrl = "ws:" + this.socUrl + "/imserver/" + resData.pkId;
this.webSocket = new WebSocket(socUrl);
this.webSocket.onopen = event => {
console.log("event", event.data);
};
//建立連接成功音念，就可以推送消息沪饺，通知用戶了
this.webSocket.onmessage = event => {
if (str != '連接成功') {
const h = this.$createElement;
this.$notify({
title: "審批任務",
message: h("i", { style: "color: teal" }, event.data),
onClick:()=> {
console.log("點擊事件");
this.messageGoPath();
}
});
} else {
console.log("無待辦審批任務");
}
};
this.webSocket.onclose = event => {
console.log("關閉連接");
};
// this.webSocket.send
if (typeof WebSocket != "function") {
alert("您的瀏覽器不支持websocket");
}
if (typeof WebSocket != "undefined") {
console.log("您的瀏覽器支持websocket通信協(xié)議");
}
});
},
messageGoPath() {
},
websockonmessage() {
console.log("數(shù)據(jù)接收");
}
},
};
</script>
<style>
#app {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("./assets/bg2.png");
background-size: 100% 100%;
/*禁止?jié)L動*/
/*overflow: hidden;*/
}
</style>
因為要在點擊的時候根據(jù)Id打開這條待審批消息的詳情彈窗，并且跳轉到這個審批頁面
所以~~ 上代碼
// App.vue
methods:{
messageGoPath() {
let _this = this;
_this.$router.push({
path: `/demo2/mySp`,
query: {
afterStrId: this.afterStr,
},
});
this.reload(); //在這里加一個刷新闷愤，解決彈窗重復顯示的問題
console.log("走這里嗎", this.$router);
},
}
//審批頁面.vue
created() {
// 頁面加載時整葡，如果攜帶了推送消息的id就調用接口 兩個id相等，
// 就綁定數(shù)據(jù)讥脐，且顯示彈窗
if (this.$route.query.afterStrId ) {
this.$http
.service({
method: "get",
url: "/task/getTaskTableById/" + this.$route.query.afterStrId
})
.then(res => {
if (this.$route.query.afterStrId == res.data.data.id) {
this.addDataSp = res.data.data
this.addRowsSp = true;
}
});
}else{
this.addRowsSp = false;
}
},
