vue + webSocket 实时任务信息通知

websocket

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

特点

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

image

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 ...)中监听

    computed:{
        getWsMsg (){
            return this.$store.state.webSocketMsg
        }
    },
    watch:{
        getWsMsg:{
            handler: function(newVal) {
                console.log(newVal)
                alert('接收到webSocket推送'+ newVal)
            }
        }
    }

参考文档

• WebSocket 教程
• WebSocket加入心跳包防止自动断开连接

作者：Beppo
链接：
https://www.jianshu.com/p/fe8bd81814b0
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。