长链接 WebSocket 的简单实现

##  

created() {
    this.initWebsocket()
},
methods: {
    // 初始化websocket
    initWebsocket() {
        let _this = this
        let ws = new WebSocket(this.wsUrl)
        //保持连接
        ws.onopen = () = > {
            // Web Socket 已连接上，使用 send() 方法发送数据
            //console.log('数据发送中...')
            setInterval(() = > {
                let msg = {
                    msg: '心跳内容'
                }
                ws.send(JSON.stringify(msg))
            }, 5000)
            //console.log('数据发送完成')
        }
        //数据接收
        ws.onmessage = evt = > {
            _this.websocketonmessage(evt)
             //console.log('数据已接收...')
        }
        // 关闭 websocket 时的 钩子
        ws.onclose = () = > {
            //console.log('连接已关闭...')
            _this.websocket()
        }
        // 结束websocket链接
        //  ws.close()
        // 推送数据到服务器
        //ws.send("Hello server!");
        
    },//数据接收
    websocketonmessage(e) {
        // 数据处理
        let obj = JSON.parse(e.data)
    }
}

常用的方法

WebSocket.onclose   用于指定连接关闭后的回调函数。 

WebSocket.onerror   用于指定连接失败后的回调函数。

WebSocket.onmessage 用于指定当从服务器接受到信息时的回调函数。

WebSocket.onopen  用于指定连接成功后的回调函数。