页面修改

src/layouts/MainLayout.vue

@@ -83,9 +83,9 @@
   } from 'vuex'
   import userInfoBox from '../components/global/user-right-box'
   import notify from '../components/global/notify'
-  // import {
-  //   sendSock
-  // } from '../api/common/socket'
+  import {
+    sendSock
+  } from '../api/common/socket'
   export default {
     name: 'MainLayout',
     data() {
@@ -176,12 +176,73 @@
       getMsg() {
         var SendData = {
           AppId: "JiaHeJiaoYu",
-          ClientId: "2",
+          ClientId: "1",
         };
-        //sendSock(SendData,this.getDataFunc)
+        //sendSock(SendData, this.getDataFunc)
       },
       getDataFunc(e) {
-        console.log("getDataFunc", e.data)
+        if (e.data) {
+          var newData = JSON.parse(e.data)
+          console.log("getDataFunc", newData)
+          this.showNotification(newData[0].Title, newData[0].Content, newData.CoverImg)
+        }
+      },
+      /**
+       * 通过Html调用显示系统通知
+       * @param title
+       * @param msg
+       * @param imgUrl
+       */
+      showNotification(title, msg, imgUrl) {
+        console.log("title", title)
+        console.log("msg", msg)
+        console.log("imgUrl", imgUrl)
+        var Notification = window.Notification || window.mozNotification || window.webkitNotification;
+        // 判断浏览器是否支持桌面通知
+        if (Notification) {
+          Notification.requestPermission(function (result) {
+            //result 默认值'default'等同于拒绝 'denied' -用户选择了拒绝 'granted' -用户同意启用通知
+            if ("granted" != result) {
+              console.log('请授权浏览器能够进行通知!');
+              return false;
+            } else {
+              var tag = "sds" + Math.random();
+              var notify = new Notification(
+                title, {
+                  dir: 'auto',
+                  lang: 'zh-CN',
+                  tag: tag, //实例化的notification的id
+                  icon: imgUrl, //通知的缩略图,icon 支持ico、png、jpg、jpeg格式
+                  title: title, //通知的标题
+                  body: msg //通知的具体内容
+                }
+              );
+              // 定义通知窗口点击函数
+              notify.onclick = function () {
+                //如果通知消息被点击,通知窗口将被激活
+                window.focus();
+              };
+              // 定义通知错误事件
+              notify.onerror = function () {
+                // console.log("");
+              };
+              // 定义通知显示事件 可以设置多少秒之后关闭 也可以不设置关闭
+              notify.onshow = function () {
+                // 窗口显示3S后关闭
+                setTimeout(function () {
+                  notify.close();
+                }, 3000);
+              };
+              // 定义通知关闭事件
+              notify.onclose = function () {
+
+              };
+            }
+          });
+        } else {
+          // 提示不支持系统通知
+          console.log('您的浏览器不支持系统通知,建议使用Chrome浏览');
+        }
       },
       changeLeft() {
         this.IsShowLeft = !this.IsShowLeft;