From 7bdf271de2053b25bafacbd538497f8796897a3c Mon Sep 17 00:00:00 2001 From: astar <2320390964@qq.com> Date: Wed, 14 Apr 2021 13:49:07 +0800 Subject: [PATCH] feat: use window.notification api --- src/main.js | 10 +++++++++- src/utils/editor.js | 4 ++-- src/utils/index.js | 7 ++++--- src/utils/notify.js | 25 +++++++++++++++++++++++++ src/views/chat/index.vue | 12 +++++++++++- vue.config.js | 3 ++- 6 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 src/utils/notify.js diff --git a/src/main.js b/src/main.js index 7083f4d..d039f34 100644 --- a/src/main.js +++ b/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, diff --git a/src/utils/editor.js b/src/utils/editor.js index 3969161..c26c1ff 100644 --- a/src/utils/editor.js +++ b/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, diff --git a/src/utils/index.js b/src/utils/index.js index fb28342..f0432c3 100644 --- a/src/utils/index.js +++ b/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)); } } diff --git a/src/utils/notify.js b/src/utils/notify.js new file mode 100644 index 0000000..48de52c --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue index cac09e3..d00f5fe 100644 --- a/src/views/chat/index.vue +++ b/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; diff --git a/vue.config.js b/vue.config.js index bc103ec..79d81e7 100644 --- a/vue.config.js +++ b/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',