vue使用EventSource

前后端分离项目，vue通过EventSource监听后台数据，并添加声音提示

完整代码(写在mounted)：

const that = this
if (typeof (EventSource) !== 'undefined') {
    var music = new Audio()
    music.src = require('@/assets/wav/notice-short.wav')  // 声音文件
    const se = new EventSource('/message/result', { withCredentials: true }) // 后端接口，要配置允许跨域属性
    se.onopen=function(e){}
    se.onmessage=function(e){
       music.play()
       that.$notify({
         title: '打印结果',
         message: e.data,
         type: 'success'
       })
       if (sessionStorage.length === 0) { // 退出登录
         se.close()
       }
     }
     se.onerror=function(e){}
 } else {
   that.$message.error('当前浏览器不支持服务器发送的事件')
 }

1.首先判断浏览器是否支持EventSource

if (typeof (EventSource) !== 'undefined') {
  // 操作代码
 } else {
   that.$message.error('当前浏览器不支持服务器发送的事件')
 }

 2.定义EventSource对象的变量，onopen是连接的时候触发、onmessage是接收消息的时候触发、onerror是连接失败时候触发，EventSource是连接失败后会重新发起连接的。

重点是{ withCredentials: true }，  因为前后端分离会产生跨域问题 

    const se = new EventSource('/message/result', { withCredentials: true })
    se.onopen=function(e){}
    se.onmessage=function(e){
       that.$notify({
         title: '打印结果',
         message: e.data,
         type: 'success'
       })
     }
     se.onerror=function(e){}

3.添加声音提示

 var music = new Audio()
 music.src = require('@/assets/wav/notice-short.wav')
 music.play()

4.运行效果