vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码)
需求说明
后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE8,9.由于我是搞前端的所以以下都是涉及前端的代码.
实现过程
1.在前端建立连接
在methods创建websocket连接
//websocket实时获取数据
initWebSocket(){if(this.websocket){this.websocket.close()this.websocket = null}this.websocket = new WebSocket(process.env.VUE_APP_WEBSOCKET_URL+'/ws/wsHandlerForFrontWithBackground');// console.log(this.websocket)let that = this.websocket;that.onopen = this.websocketonopen;that.onerror = this.websocketonerror;that.onmessage = this.websocketonmessage; that.onclose = this.websocketclose;
},
创建的websocket链接含有几个回调函数
websocketonopen() { //发送成功回调console.log("WebSocket连接成功");let that = thiswindow.onbeforeunload = function() {that.websocket.close();} },websocketonerror(e) { //错误回调console.log(e,"WebSocket连接发生错误");},websocketonmessage(e){ //数据接收 // console.log(e,'数据接收')this.heartCheck()if(e.data){console.log(e.data)let data = JSON.parse(e.data).dataif(data){//自己展示弹框的封装方法this.showNotification(data)}}}, websocketclose(e){ //关闭 // 这里做了个长链接意外关闭后重新链接的操作console.log('关闭',e)let that = thisif(!this.disconnectTimer){this.disconnectTimer = setTimeout(()=>{that.initWebSocket()that.disconnectTimer = null},1000)} // if(e){// this.websocket.close()// this.websocket = null// }},
2.添加弹框
长链接建立连接的逻辑不复杂,很好完成.难点在于上连接完成后,全局弹框的展示,我的思路是在总布局的组建中添加一个弹框组件,只要收到消息就弹出.弹框的展示用的elemenUI中this.$notify()方法进行弹框,
具体的代码就不粘贴的elementui官网中有其使用方法.
3.当收到消息时,发起语音提示。
- 页面上需要定义一个audio,同时把这个标签隐藏
<template><div><audio controls="controls" hidden src="@/assets/tip.mp3" ref="audio" muted></audio></div>
</template>
- 语音播报的方法,在消息弹框的时候调用即可,不过谷歌浏览器中在用户未完交互的情况下是会有报错的,意思是用户要对页面进行操作,例如点击后才可播放.在下边我加了一个可以检测是否播放声音的方法
// 语音播放
aplayAudio () {const audio = document.getElementById('audio')audio.play()
}
//测试是不是可以自动播放并返回结果testAutoPlay () {let autoplay = falsereturn new Promise(resolve => {let audioPlay = this.$refs.audio// audioPlay.currentTime = 0; //从头开始播放提示音// audioPlay.muted = true; //静音播放// play返回的是一个promiseaudioPlay.play().then(() => {// 支持自动播放autoplay = true;}).catch(err => {// 不支持自动播放autoplay = false;}).finally(() => {// 告诉调用者结果resolve(autoplay);});});},
具体解释和解决方法你可查阅这里,这里写的很详细
遇到的问题
1.长链接断开问题
针对长链接断开问题,我除了使用断开后重连的逻辑,还设置了心跳机制,在没有消息返回的时候,前端给后台循环发送数据,后台通过长链接返回数据,防止没有消息返回自动断开. 上代码
//设置心跳机制heartCheck(){let that = thisthis.resetHeartTimer()if(this.timeoutObj){clearTimeout(this.timeoutObj);this.timeoutObj = null}this.timeoutObj = setTimeout(function(){//这里发送一个心跳,后端收到后,返回一个心跳消息,//onmessage拿到返回的心跳就说明连接正常if(that.websocket){that.websocket.send("ping");}// console.log("ping!")if(that.serverTimeoutObj){clearTimeout(that.serverTimeoutObj);that.serverTimeoutObj = null}that.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了that.websocket.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次}, 10000)}, 10000)},
通过心跳机制和断开重连逻辑虽然不是很完美解决断开问题,但是是我现阶段想到解决方案,如果后期发现新的解决办法再来更新方法.
2.浏览器拦截自动播放问题
针对这个问题提供两个方案
方案一: 通过检测页面是否可以自动播放的检测,可以识别是否可以播放声音在消息弹框或者页面中设置一个声音开关图标,如果不能自动播放,点击开关后自动完成交互自然可以播放,不过这种方式只要刷新页面不交互的情况下播放开关就会重置,需要重新点击.检测是否可以自动播放的方法可以查看这里
方案二: 更改浏览器设置,具体咋修改可以查看这里,修改通知里的声音提示.
希望对你有帮助
vue项目中通过WebSocket实现实时消息提示及遇到的问题相关推荐
- vue项目中使用flv.js实时播放 断流重连 关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长 后来项目更新采用的是EasyPlayer插件 文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
- VUE项目中优雅使用EasyPlayer实时播放摄像头多种格式视频
EasyPlayer 介绍 简介:集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大: 功能支持: 支持 MP4 播放 支持 m3u8 ...
- Vue项目中链接websocket,做一个全局通知信息
首先在index.html中加上下面一段代码 <script>var websocket = nullvar localHref = window.location.host === 'l ...
- 在vue项目中实现海康威视IOT云眸平台(实时和回放)
上次我们已经提到海康ISC平台的应用,详见在vue项目中实现海康威视ISC平台(实时和回放) 这次记录下海康云眸平台的应用,风格与上一篇文章保持一致,方便食用. 环境 先下载安装海康插件HikOpen ...
- 保姆级教程:js前端接入科大讯飞语音评测,实现朗读打分,vue对接科大讯飞语音评测,还可以实现句子逐词分析对错以及打分,将demo接入vue项目中
需求说明:实现一个点击录制英文句子朗读,然后调用科大讯飞接口分析朗读准确度,并逐词分析朗读正确性. 步骤一.下载运行demo 首先附上科大讯飞语音评测流式版的文档链接:链接在此 然后在文档里找到dem ...
- Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
- 最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
- 前端监控--vue项目中使用友盟统计监控
在项目的使用过程中,不可避免的会出现各种奇奇怪怪的报错,有的可能会导致项目程序崩溃无法运行,但是我们作为开发人员是不会立刻知道这种突发情况的,所以我们需要搜集程序的报错信息,及时解决错误,提高项目的稳 ...
- vue项目中 使用百度地图 轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画 在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
最新文章
- R语言笔记5:控制结构
- 【原创】MySQL 5.5 新增SIGNAL异常处理
- linux u盘刻录软件,Deepin Linux下刻录Windows安装U盘:WoeUSB的介绍和应用
- (7)numpy.delete删除np数组的某一行或某一列
- Android教程 第四章 用户界面设计基础
- linux防火墙的策略规则
- 假设检验_关于假设检验与P值的几点看法
- 笔记本电脑怎么用U盘装系统
- BZOJ4466 [Jsoi2013]超立方体
- word 如何删除边框黑线
- 非此即彼的逻辑错误_GMAT高分范文100篇(非此即彼逻辑错误)【圣才出品】
- miniUI实现指定行可编辑,其他行仍然只读
- 烽火通信C语言笔试题:牛市区间问题
- js刻度尺插件_自制刻度尺插件-前端简易实现腾讯信用界面
- 波尔原子模型:一段令人愉悦的历史
- C# 限制TextBox控件内输入值的范围
- 无忧教学计算机,无忧全国计算机等级考试超级模拟软件第5套(解题全过程)教学内容[汇编].pdf...
- 科沃斯机器人发布首个智生活报告 全民迈入智能化清扫时代
- 【西电A测:设计和制造一款自动货物分拣系统】
- EEGLAB数据分析:预处理与后续处理
热门文章
- Nginx从入门到入坟(十)- Rewrite功能详解与案例实操
- openwrt mesh网络设置
- WIN10输入法改为WIN7习惯,默认输入英文,程序员专用
- acwing 95. 费解的开关(蓝桥杯)
- lay和lied_高考英语词汇辨析:lie, lay, lain, laid, lying等用法
- 从12306帐号泄漏谈用户密码安全
- 第6周作业2-IF语句大显身手之成绩判断(网络131黄宇倩)
- 学习爬虫的感想和心得
- 【屏类型结构体定义PanelType】 文档位置:《apiPNL.h》
- MQTT服务器Mosquitto的使用及配置过程中的一些问题和解决方法