vue + webSocket 实时任务信息通知
websocket
WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
特点
- 建立在TCP协议之上，服务端的实现比较容易；
- 与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器；
- 数据格式比较轻量，性能开销小，通信高效；
- 可以发送文本，也可以发送二进制数据
- 没有同源限制，客户端可以与任意服务器通信
- 协议标识符是 WS(如果加密，则为WSS)，服务器网址就是URL
image
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
在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)
}
}
}
参考文档
网友评论