vue 项目浏览器收到消息通知

vue yekong

安装依赖

npm install @wcjiang/notify --save

使用

import mp3s from './assets/mp3/msg.mp3'
import Notify from '@wcjiang/notify'

const notify = new Notify({
  message: 'There is message.', // page title.
  effect: 'flash', // flash | scroll, Flashing or scrolling
  openurl: 'http://freeterchina.com/im/#/message', // Click on the pop-up window to open the connection address
  onclick: () => {
    // Click on the pop-up window trip event
    // Programmatically closes a notification.
    notify.close()
    console.log('---')
  },
  // Optional playback sound
  audio: {
    // You can use arrays to pass sound files in multiple formats.
    file: [mp3s],
    // The following is also work.
    // file: 'msg.mp4'
  },
  // Title flashing, or scrolling speed
  interval: 1000,
  disableFavicon: false, // Optional, default false, if true, No longer overwrites the original favicon
  // Optional, default green background white text. Favicon
  // Optional chrome browser notifications,
  // The default is not to fill in the following content
  notification: {
    title: 'Notification!', // Set notification title
    icon: '', // Set notification icon, The default is Favicon
    body: '', // Set message content
  },
})

 // 收到新消息
    onReceiveMessage({data: messageList}) {
      this.handleAt(messageList)
      notify.notify({
        title: '来自' + messageList[0].nick + '的消息',
        body: messageList[0]?.payload?.text,
        openurl: 'http://freeterchina.com/im/#/message',
        // openurl: 'http://localhost:8081/im/#/message',
        audio: {
          file: [mp3s],
        },
        onclick: function () {
          notify.close()
          console.log('on click')
        },
        onshow: function () {
          console.log('on show')
        },
      })

文档地址

文档地址

喜欢