vue+ element Notification消息推送

vue+ element Notification消息推送

业务需求： 登录后进入页面，将后端推送过来的【待审批】的消息，用$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通信协议");
          }
        });
    },
    messageGoPath() {
      
     
    },
    websockonmessage() {
      console.log("数据接收");
    }
  },
};
</script>

<style>
#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("./assets/bg2.png");
  background-size: 100% 100%;
  /*禁止滚动*/
  /*overflow: hidden;*/
}
</style>

因为要在点击的时候根据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相等，
// 就绑定数据，且显示弹窗
    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;
    }
  },