最近在做商家后台管理系统，在使用小程序或者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.com: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)
<!--接受到消息，重置心跳-->
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
在main.js中引入WS，挂载到Vue原型上
import Vue from 'vue'
import WS from '@/util/websocket'
Vue.prototype.$ws = WS
1
2
3
在store/index.js创建全局数据存储
const store= new Vuex.Store({
state:{
webSocketMsg:''
},
mutations:{
SET_WS_MSG (state, msg) =>{
state.webSocketMsg = msg
}
}
})
1
2
3
4
5
6
7
8
9
10
在单个组件内部使用
computed:{
getWsMsg (){
return this.$store.state.webSocketMsg
}
},
watch:{
getWsMsg:{
handler: function(newVal) {
console.log(newVal)
alert('接收到webSocket推送'+ newVal)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
如果要在所有的界面都能接收socket推送消息，并弹出提示可以在布局组件(Layout.vue …)中监听
computed:{
getWsMsg (){
return this.$store.state.webSocketMsg
}
},
watch:{
getWsMsg:{
handler: function(newVal) {
console.log(newVal)
alert('接收到webSocket推送'+ newVal)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
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
}
1
2
3
4
5
6
7
2在main.js中写入
import * as voicePromptFun from './utils/voicePrompt'
Vue.prototype.voicePrompt = voicePromptFun.voicePrompt //语音提醒
1
2
3在其他页面调用
this.voicePrompt('皮卡丘');