前端技能

2024-07-13 00:33| 来源: 网络整理| 查看: 265

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

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

雅虎音频播放：https://www.w3school.com.cn/tiy/t.asp?f=eg_html_audio_yahoo

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

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

【本文地址】

公司简介

联系我们