feat: use window.notification api

src/main.js

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2020-09-09 16:50:59
  * @LastEditors: astar
- * @LastEditTime: 2021-02-25 15:26:20
+ * @LastEditTime: 2021-04-14 13:44:58
  * @Description: 文件描述
  * @FilePath: \vue-chat\src\main.js
  */
@@ -12,6 +12,7 @@ import "@/assets/styles/reset.css";
 import "@/assets/styles/common.scss";
 import store from '@/store';
 import setRem from '@/utils/setRem';
+import notify from '@/utils/notify';
 import { installComponent, installPlugin } from '@/components';
 import installRouter from '@/router';
 import * as directives from '@/directives';
@@ -35,7 +36,14 @@ const router = installRouter(Vue);
 
 Vue.config.productionTip = false;
 
+if (
+  window.Notification &&
+  (window.Notification.permission === 'default' || window.Notification.permission === 'denied')
+) {
+  window.Notification.requestPermission();
+}
 
+Vue.prototype.$notify = notify;
 export const vm = new Vue({
   render: h => h(App),
   router,

src/utils/editor.js

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-04-01 16:02:08
  * @LastEditors: astar
- * @LastEditTime: 2021-04-01 18:37:07
+ * @LastEditTime: 2021-04-13 17:41:42
  * @Description: 文件描述
  * @FilePath: \vue-chat\src\utils\editor.js
  */
@@ -53,7 +53,7 @@ export function getJSONFromInput ($ele) {
         kind: KINDS.TEXT,
         value: child.textContent // 还需转义,到时候再说吧
       })
-    } else if (nodeType === 1) { // 元素节点, 目前只有emoji类型，后期考虑其他
+    } else if (nodeType === 1) { // 元素节点, 目前只有emoji和at类型，后期考虑其他
       let options = child.dataset
       result.push({
         kind: options.kind,

src/utils/index.js

@@ -2,7 +2,7 @@
  * @Description: 
  * @Author: astar
  * @Date: 2021-02-10 14:50:36
- * @LastEditTime: 2021-04-01 11:14:41
+ * @LastEditTime: 2021-04-09 15:40:07
  * @LastEditors: astar
  */
 import { getToken } from '@/utils/token'
@@ -82,19 +82,20 @@ export const debounce = (fn, delay = 1000) => {
  */
 export const throttle = (fn, delay = 1000, last = false) => {
   let timer = null;
-  let start = new Date();
+  let start = null;
   return function () {
     last && timer && clearTimeout(timer);
     let now = new Date();
     let context = this;
     let args = arguments;
-    if (now - start >= delay) {
+    if (!start || now - start >= delay) {
       fn.apply(context, args);
       start = now;
     } else {
       if (last) { // 脱离事件后执行最后一次 // 一般用于触底加载之类 // 防止重复提交不需要执行最后一次
         timer = setTimeout(() => {
           fn.apply(context, args);
+          start = new Date();
         }, delay - (now - start));
       }
     }

src/utils/notify.js

@@ -0,0 +1,25 @@
+/*
+ * @Author: astar
+ * @Date: 2021-04-12 14:29:25
+ * @LastEditors: astar
+ * @LastEditTime: 2021-04-14 13:46:24
+ * @Description: 文件描述
+ * @FilePath: \vue-chat\src\utils\notify.js
+ */
+export default function (title, body, attrs = { icon: '', tag: (new Date()).getTime(), duration: 300 }) {
+  if (window.Notification && window.Notification.permission === 'granted') {
+    const n = new window.Notification(
+      title,
+      {
+        icon: attrs.icon,
+        body: body,
+        tag: attrs.tag
+      },
+    );
+    n.onclick = function handleClick() {
+      window.focus();
+      this.close();
+    };
+    setTimeout(n.close.bind(n), attrs.duration);
+  }
+}

src/views/chat/index.vue

@@ -47,7 +47,7 @@ import inputBox from './components/inputBox';
 import { removeToken } from '@/utils/token';
 import { getHistoryChatByCount } from '@/request';
 import { getDpr } from '@/utils/setRem';
-import { getHTMLFromJSON } from '@/utils/editor.js';
+import { getHTMLFromJSON, KINDS } from '@/utils/editor.js';
 
 export default {
   name: "chat",
@@ -128,6 +128,16 @@ export default {
 
       this.socket.on("message", message => {
         this.chatRecord.push(message);
+        if (message.userId !== this.userInfo._id) {
+          let content = message.content.reduce((str, item) => {
+            if (item.kind === KINDS.TEXT) {
+              return str + item.value
+            }
+            if (item.kind === KINDS.EMOJI) return str + `[${item.value}]`
+            if (item.kind === KINDS.AT) return str + `@${item.value}`
+          }, '')
+          this.$notify(message.name, content, { icon: message.avatar, tag: message._id });
+        }
         this.$nextTick(() => {
           if (this.$refs.box) {
             this.$refs.box.scrollTop = this.$refs.box.scrollHeight - this.$refs.box.clientHeight;

vue.config.js

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-02-23 10:16:42
  * @LastEditors: astar
- * @LastEditTime: 2021-03-26 17:22:47
+ * @LastEditTime: 2021-04-13 10:52:48
  * @Description: webpack配置
  * @FilePath: \vue-chat\vue.config.js
  */
@@ -19,6 +19,7 @@ module.exports = {
   devServer: {
     port: 2000,
     open: false,
+    https: true,
     proxy: {
       '/test-proxy': {
         target: 'http://192.168.22.173:3000',