最近在做商家后台管理系統，在使用小程序或者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('皮卡丘');