vue + webSocket 实时任务信息通知

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

websocket 特点

建立在TCP协议之上，服务端的实现比较容易；
与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器；
数据格式比较轻量，性能开销小，通信高效；
可以发送文本，也可以发送二进制数据
没有同源限制，客户端可以与任意服务器通信
协议标识符是 WS(如果加密，则为WSS)，服务器网址就是URL

VUE + WebSocket 长链接实现

在项目的创建 utils/websocket.js

<!--引入store，用于管理socket推送来的消息-->
import store from '../store'
<!--封装websocket对象-->
const WS = {$ws:null, // webscoket实例wsUrl: 'ws://xxxxx.com:80/xxx', // websocket链接地址<!--初始化webSocket-->createWS：function(){if('WebSocket' in window){this.$ws = new WebSocket(wsURl)this.$ws.onopen = this.wsOpenthis.$ws.onmessage = this.wsMessagethis.$ws.onerror = this.wsErrorthis.$ws.onclose = this.wsClose} else {alert('当前浏览器不支持webSocket')}},<!--webSocket 打开-->wsOpen: function() {this.$ws.send('连接成功')console.log('== websocket open ==')<!--开始心跳-->heartBeat.start()},<!--websocket 接收到服务器消息-->wsMessage:function(msg) {console.log('== websocket message ==', msg)<!--接受到消息，重置心跳-->heartBeat.reset()store.commit('SET_WS_MSG', msg.data)},<!--websocket 发生错误-->wsError: function(err){console.log('== websocket error ==', err)},<!--websocket 关闭连接-->wsClose: function(event){console.log('== websocket close ==', event)}
}
<!--webSocket 心跳-->
const heartBeat = {timeout:30000, // 心跳重连时间timeoutObj:null, // 定时器reset:function(){clearInterVal(this.timeoutObj)console.log('websocket 心跳')WS.start()},start:function(){this.timeoutObj = setTimeout(function(){if(WS.$ws.readyState === 1){WS.$ws.send('HeartBeat')}},this.timeout)}
}
export default WS

在main.js中引入WS，挂载到Vue原型上

import Vue from 'vue'
import WS from '@/util/websocket'
Vue.prototype.$ws = WS

在store/index.js创建全局数据存储

const store= new Vuex.Store({state:{webSocketMsg:''},mutations:{SET_WS_MSG (state, msg) =>{state.webSocketMsg = msg}}})

在单个组件内部使用

computed:{getWsMsg (){return this.$store.state.webSocketMsg}
},
watch:{getWsMsg:{handler: function(newVal) {console.log(newVal)alert('接收到webSocket推送'+ newVal)}}
}

如果要在所有的界面都能接收socket推送消息，并弹出提示可以在布局组件(Layout.vue …)中监听

computed:{getWsMsg (){return this.$store.state.webSocketMsg}
},
watch:{getWsMsg:{handler: function(newVal) {console.log(newVal)alert('接收到webSocket推送'+ newVal)}}
}

vue实现语音播报功能

1,创建一个js文件（voicePrompt.js）

function voicePrompt (text){new Audio('http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + text).play();
}export {voicePrompt
}

2在main.js中写入

import * as voicePromptFun from './utils/voicePrompt'
Vue.prototype.voicePrompt = voicePromptFun.voicePrompt  //语音提醒

3在其他页面调用

this.voicePrompt('皮卡丘');

vue websocket实现消息推送和语音提醒功能相关推荐

Spring clound+VUE+WebSocket实现消息推送一（即时通讯）
需求: 当用户进行某个操作,需要通知其他用户时,其他用户可以实时接收消息. 工程为 Spring cloud + VUE . 技术实现: Spring Cloud.Spring boot.vue.we ...
vue-admin websocket接收消息推送+语音提示（详细代码）
websocket接收消息推送+语音提示这个是同事的代码,我拿来记录一下,希望以后可以看得懂-- utils/websocket.js const audioUrl = require('@/ass ...
Vue-全局websocket 实现消息推送
在上一篇文章 WebSocket 消息推送https://blog.csdn.net/qq_63312957/article/details/125375122?spm=1001.2014.3001. ...
springboot定时发送短信_springboot 整合websocket实现消息推送（主动推送，具体用户推送，群发，定时推送）...
websocket springboot 整合websocket实现消息推送(主动推送,具体用户推送,群发,定时推送) 使用WebSocket构建交互式Web应用程序本指南将引导您完成创建" ...
php通知websocket,php实现websocket实时消息推送
php实现websocket实时消息推送,供大家参考,具体内容如下 SocketService.php /** * Created by xwx * Date: 2017/10/18 * Time: ...
python websocket实现消息推送_python Django websocket 实时消息推送
[实例简介] Django websocket 实时消息推送服务端主动推送调用 send(username, title, data, url) username:用户名 title:消息标题 d ...
python websocket实时消息推送
python websocket实时消息推送十分想念顺店杂可... 本人写的渣,大神勿喷. 转载请附带本文链接,谢谢. 服务端代码 # -*- coding: utf-8 -*- # @Time : ...
java整合消息推送_SpringMVC整合websocket实现消息推送及触发功能
本文为大家分享了SpringMVC整合websocket实现消息推送,供大家参考,具体内容如下 1.创建websocket握手协议的后台 (1)HandShake的实现类 /** *Project N ...
web实现消息推送及桌面提醒
2019独角兽企业重金招聘Python工程师标准>>> 就类似我们之前描述的,来一个 HTML5 提醒面板,再放一段语音.这个就有些类似12306 的抢票了. 还是先看下我们的效果图 ...
【微信早安定时推送3.0最牛版】微信消息推送后可提醒可顶置，聊天框名称，头像都可修改~
微信早安3.0最牛版重磅推出!!! 全网最全最详细教程,无基础看过的都说好,不白找. 往期推送: 微信早安推送1.0版: https://blog.csdn.net/A_Xunla/article/d ...

vue websocket实现消息推送和语音提醒功能

vue + webSocket 实时任务信息通知

VUE + WebSocket 长链接实现

在项目的创建 utils/websocket.js

在main.js中引入WS，挂载到Vue原型上

在store/index.js创建全局数据存储

在单个组件内部使用

如果要在所有的界面都能接收socket推送消息，并弹出提示可以在布局组件(Layout.vue …)中监听

vue实现语音播报功能

1,创建一个js文件（voicePrompt.js）

2在main.js中写入

3在其他页面调用

vue websocket实现消息推送和语音提醒功能相关推荐

最新文章

热门文章

vue websocket实现消息推送和语音提醒功能

vue + webSocket 实时任务信息通知

VUE + WebSocket 长链接实现

在项目的创建 utils/websocket.js

在main.js中引入WS，挂载到Vue原型上

在store/index.js创建全局数据存储

在单个组件内部使用

如果要在所有的界面都能接收socket推送消息，并弹出提示可以在布局组件(Layout.vue …)中监听

vue实现语音播报功能

1,创建一个js文件 （voicePrompt.js）

2在main.js中写入

3在其他页面调用

vue websocket实现消息推送和语音提醒功能相关推荐

最新文章

热门文章

1,创建一个js文件（voicePrompt.js）