SSE消息推送和vue-toastification使用

import moment from "moment";

// 引入消息通知插件 vue-toastification
import {createToastInterface} from "vue-toastification";
// 组件,可传参,可设置样式(vue-toastification内容接收)
import loopToast from "@/views/header/loopToast";
// vue-toastification配置
const pluginOptions = {
  position: "top-right",
  timeout: 0,
  closeOnClick: false,
  pauseOnFocusLoss: false,
  pauseOnHover: false,
  draggable: false,
  draggablePercent: 0,
  showCloseButtonOnHover: false,
  hideProgressBar: true,
  closeButton: "button",
  icon: true,
  rtl: false
};
const toast = createToastInterface(pluginOptions);

// 定义
let source = null;
const userId = localStorage.getItem('userId')

export function current_realTime() {
  if (window.EventSource) {
    // (process.env.VUE_APP_BASE_API + '/sse/sub/' + userId)这一块换成你的ip
    source = new EventSource(process.env.VUE_APP_BASE_API + '/sse/sub/' + userId)
    // console.log('连接用户_' + userId)
    //为了做一个标记,用来标记项目是否连接
    localStorage.setItem('state_con', 'state_con')
    source.addEventListener('open', function (e) {
      // console.log('成功建立连接')
    })
    // 后端返回的数据在这里边
    source.addEventListener('message', function (e) {
      // console.log(e.data, JSON.parse(e.data))
      let data = JSON.parse(e.data)
      const content = {
        // 引入的组件,loopToast组件名字
        component: loopToast,
        props: {
          // 属性:属性值(在loopToast用props正常接收就可以),这里是我命名的属性名,属性名自己随意
          title: data.title,
          message: data.message,
          time: `时间：${moment(data.time).format('YYYY-MM-DD HH:mm:ss')}`,
        },
      };
      //这里是因为我们不同类型对应不同的消息提示,所以才做了判断,直接使用消息提示也是能出效果的
      if (data.type === 1) {
        setTimeout(() => {
          // 消息提示插件的使用
          toast.warning(content)
        }, 0)
      } else if (data.type === 2) {
        setTimeout(() => {
          toast.error(content)
        }, 0)
      }
    })
    source.addEventListener('error', function (e) {
      if (e.readyState === EventSource.CLOSED) {
        // console.log('连接关闭')
        //浏览器关闭连接
        source.close()
        //调用关闭连接的接口
        const httpRequest = new XMLHttpRequest()
        httpRequest.open('GET', process.env.VUE_APP_BASE_API + '/sse/close/' + userId, true)
        httpRequest.send()
        localStorage.removeItem('state_con')
      } else {
        // console.log(e)
      }
    })
  } else {
    // console.log('浏览器不支持SSE')
  }

  window.onbeforeunload = function () {
    source.close()
    const httpRequest = new XMLHttpRequest()
    httpRequest.open('GET', process.env.VUE_APP_BASE_API + '/sse/close/' + userId, true)
    httpRequest.send()
    localStorage.removeItem('state_con')
    // console.log('close')
  }
}

export function close_sse() {
  //浏览器关闭连接
  source.close()
  //调用关闭连接的接口
  const httpRequest = new XMLHttpRequest()
  httpRequest.open('GET', process.env.VUE_APP_BASE_API + '/sse/close/' + userId, true)
  httpRequest.send()
  // console.log('close')
  //清楚标记
  localStorage.removeItem('state_con')
}