vuewebsocket实现消息推送和语⾳提醒功能 最近在做商家后台管理系统，在使⽤⼩程序或者app进⾏下单后，后台管理系统需要有实时的提醒，类似于美团或者饿了么的“您有新的订单，请注意查收”
具体的操作我没有写，是其他同事整的这⼀块。下⾯记录⼀下百度到的相关知识点。
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:80/xxx',// websocket链接地址<!--初始化webSocket-->
createWS：function(){
if('WebSocket'in window){
this.$ws =new WebSocket(wsURl)
this.$ws.onopen =this.wsOpen
this.$ws.onmessage =this.wsMessage
this.$ws.onerror =this.wsError
this.$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) <!--接受到消息，重置⼼跳-->
storemit('SET_WS_MSG', msg.data)
},
<!--websocket 发⽣错误-->
saw1
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('tts.baidu/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('⽪卡丘');
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议