前端技能——实现后台管理系统接收消息提醒并语音播报(websocket)

缺乏、安全感 2021-09-07 14:18 590阅读 0赞

## websocket实现消息实时接收 ##

去年在做后台管理系统的时候，就遇到这个问题，但是当时我比较菜（现在也不是很好……），语音播报功能不是我做的。。

今天，我遇到了这个需求，真是躲过了初一，躲不了十五。学习新东西啦！开心

## websocket的使用 ##

websocket的使用步骤：建立websocket连接后，客户端（前端）可以发送指令给后端，后端如果有数据就返回，此时前端可以接收到消息，进行音频的播放。

### webscoket实例化 ###

if ("websocket" in window) { 
        websocket = new WebSocket("wss://echo.websocket.org");
        //上面的这个"wss://echo.websocket.org"是从别的地方找来的，后端会提供的……，此时仅用于测试使用
    }

### websocket开始建立连接 ###

var setIntervalWesocketPush = null;
    websocket.onopen = (e) => { 
       console.log("建立连接");//建立连接后，send发送消息给后端，具体的内容可以前后端定义好，此处为"ping"
        clearInterval(setIntervalWesocketPush);//下面的代码是清理定时器，并重启定时器，每隔15s发送一次消息
        websocket.send("ping");
        setIntervalWesocketPush = setInterval(() => { 
            websocket.send("ping");
        }, 15000);
    };
    //后端接收到消息后，可以发送数据给前端，前端就可以接收到了

### websocket接收消息 ###

html部分:  
audio音频：src是音频路径，preload是否预加载，muted：静音，现在浏览器不支持自动播放音频，autoplay:自动播放，即便音频你没有设置为静音，在页面加载的时候也不会播放音频的。因此先设置为静音，然后需要播放音频的时候，将音频的静音取消，然后重置音频从头开始进行播放即可。

websocket.onmessage = (e) => { 
        console.log("收到消息:" + e.data);
        //获取音频：之前我都是用$("#audio")获取音频，但是执行：$("#audio").play()方法是会报错
        var audio = document.querySelector("audio");//用这种标签名称获取的方式就不会报错了，，，，
        audio.currentTime = 0;//从头开始播放
        audio.muted = false;//取消静音
        audio.play();//音频播放
    };

### websocket通信错误 ###

websocket.onerror = (e) => { 
      alert("websocket通信发生错误");
    };

### websocket连接关闭 ###

websocket.onclose = (e) => { 
        console.log("连接关闭");
        clearInterval(setIntervalWesocketPush);
        websocket.close();
    };

### websocket兼容IE8 ###

[websocket兼容IE8:https://www.cnblogs.com/againn/p/8308875.html][websocket_IE8_https_www.cnblogs.com_againn_p_8308875.html]

### 雅虎音频播放（仅适用于音频点击播放） ###

<!DOCTYPE html>
    <html>
    <body>
    
    <p><a href="/i/song.mp3">播放 mp3</a></p>
    <p><a href="/i/bird.wav">播放 wav</a></p>
    
    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
    
    </body>
    </html>

[雅虎音频播放：https://www.w3school.com.cn/tiy/t.asp?f=eg\_html\_audio\_yahoo][https_www.w3school.com.cn_tiy_t.asp_f_eg_html_audio_yahoo]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
如果不想展示音频播放的过程，可以通过a标签自行触发点击事件，但是a标签本身不支持点击事件，可以通过a标签里面的子标签来触发：

[a标签触发点击事件：https://blog.csdn.net/wangwenpeng0529/article/details/86489583][a_https_blog.csdn.net_wangwenpeng0529_article_details_86489583]

[websocket_IE8_https_www.cnblogs.com_againn_p_8308875.html]: https://www.cnblogs.com/againn/p/8308875.html
[https_www.w3school.com.cn_tiy_t.asp_f_eg_html_audio_yahoo]: https://www.w3school.com.cn/tiy/t.asp?f=eg_html_audio_yahoo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/33612df94f4143e2ab4a8f0f84e3cac2.png
[a_https_blog.csdn.net_wangwenpeng0529_article_details_86489583]: https://blog.csdn.net/wangwenpeng0529/article/details/86489583