vue + websocket + speak-tts 实现推送的告警消息弹框显示在右下角并语音播报出内容

最近接了个项目需求，给设备配置语音加弹框告警。用户登录项目后不管在哪个页面，有告警就全局在右下角消息弹框加语音播报，下面浅介绍下我在开发中的流程以及遇到的坑！！！

1、首先项目中安装speak-tts语音播报插件。

npm install speak-tts

2、创建一个全局的 speech.js文件，文件中引入插件并初始化后导出。
因为可能会一直读多条消息，防止初始化多个Speech对象，在全局api中初始化一个对象，方便播报的时候调用。

import Speech from 'speak-tts'
const speech=new Speech()
export default speech 

3、在项目点击登录按钮后调用全局的语音播报方法。
由于浏览器之间有安全限制，用户不主动触发语音播报方法， 语音播报不会主动发出声音，故在项目的登录处触发方法。

3.1、首先引入封装好的js文件

import Speech from '@/utils/speech'

3.2、在登录点击方法中调用speech方法的语言、语速等各种参数。

    initSpeech(){
   
      Speech.setLanguage('zh-CN')
      Speech.init({
   
        volume: 0.6, // 音量0-1
        lang: "zh-CN", // 语言
        rate: 2, // 语速1正常语速，2倍语速就写2
        pitch: 1, // 音调
        voice: "Microsoft Yaoyao - Chinese (Simplified, PRC)",
      })    
    }

4、在登录后的vue页面资源的首加载项，即页面入口文件处编写弹框样式及告警信息的接收等功能（我开发的项目入口文件是AppMain.vue 文件）

4.1、首先新建一个项目右下角可放多个全局弹框的div，我此处使用的是card样式

    <div class="alarmmodel" v-if=popupList.length>
      <el-card class="box-card" shadow="always" v-for="(item, index) in popupList" :key="index">
        <div slot="header" class="clearfix">
          <span v-if="item.alertLevel == 1" style="color: rgb(221, 39, 48)">红色告警</span>
          <span v-else-if="item.alertLevel == 2" style="color:rgb(