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

末蓝、 2021-07-25 21:44 1615阅读 0赞

最近在做商家后台管理系统，在使用小程序或者app进行下单后，后台管理系统需要有实时的提醒，类似于美团或者饿了么的“您有新的订单，请注意查收”

具体的操作我没有写，是其他同事整的这一块。下面记录一下百度到的相关知识点。

## vue + webSocket 实时任务信息通知 ##

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

`websocket 特点`

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

## VUE + WebSocket 长链接实现 ##

#### 在项目的创建 utils/websocket.js ####

import store from '../store'
    
    const WS = { 
        $ws:null, // webscoket实例
        wsUrl: 'ws://xxxxx.com:80/xxx', // 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')
            }
        },
        
        wsOpen: function() { 
            this.$ws.send('连接成功')
            console.log('== websocket open ==')
            
            heartBeat.start()
        },
        
        wsMessage:function(msg) { 
            console.log('== websocket message ==', msg)
            
            heartBeat.reset()
            store.commit('SET_WS_MSG', msg.data)
        },
        
        wsError: function(err){ 
            console.log('== websocket error ==', err)
        },
        
        wsClose: function(event){ 
            console.log('== websocket close ==', event)
        }
    }
    
    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 …)中监听 ####

# 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('皮卡丘');