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:自动播放，即便音频你没有设置为静音，在页面加载的时候也不会播放音频的。因此先设置为静音，然后需要播放音频的时候，将音频的静音取消，然后重置音频从头开始进行播放即可。

<div id="wrap">
    <p>
    <audio src="./remind.mp3" id="audio" preload="auto" muted autoplay type="audio/mp3" controls="controls"><span id="audioId">播放音乐</span></audio>
    </p>
</div>

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

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

<!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

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

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

# websocket
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign