webSocket 实战篇

常见场景

• 实时数据监听

场景一： 实时通信 get数据模式

场景介绍：与服务端建立长连接，频繁实时获取服务端发来的数据，即时通信

需求分析：数据实时更新，保证服务端有新数据，客户端即刻响应并更新数据

技术目标：保证与服务端的通信时刻连通

技术思路：通过对websocket state的监听，根据不同的状态分类处理, 关闭、错误 => 重连, 获得到消息 => 开启心跳监测

示例

const ws = new WebSocket('ws://ezlost')
//websocket 关闭、错误时尝试重连
ws.onclose = () => reConnect()
ws.onerror = () => reConnect()
//心跳监测
ws.onmessage = () => {
    //根据你的需求确定监听时长
    beatPack(ws, 5000).beat()
    ...
}

//重连
function reConnect(){
    const _this = this
    const connect = {
        timer: null,
        wait: 5000, //自定义，控制重连频率
        reconnect: function(){
            if(this.timer) return;
            this.timer = setTimeout(() => {
                _this.ws = new WebSocket('ws://ezlost')
                clearTimeout(this.timer)
                this.timer = null
            }, this.wait);
        }
    }
    connect.reconnect() 
}

//心跳监听
function beatPack(socketObj = {}, wait = 1000){     
    return {
        beatTimer: null,
        closedTimer: null,
        beat: function(){
            clearTimeout(this.beatTimer)
            clearTimeout(this.closedTimer)
            this.beatTimer = null
            this.beatTimer = setTimeout(() => {
                socketObj.readyState === 1 && socketObj.send('HEARTBEAT')
                this.closedTimer = setTimeout(() => {
                    socketObj.close() //超时关闭websocket
                }, wait);
            }, wait);
        }
    }
}

实时通信 post模式

场景介绍：与服务端建立连接，实时向服务端发送消息

需求分析：数据实时、频繁发送，保证客户端发送消息时与服务端的连通

技术目标：保证与服务端的通信需要时保持连通

技术思路：通过对websocket state的监听，根据不同的状态分类处理, 关闭、错误 => 重连, 消息状态判断 => 发送数据

示例

const ws = new WebSocket('ws://ezlost')
ws.onclose = () => reConnect(data)
ws.onerror = () => reConnect(data)
//websocket 关闭、错误时尝试重连

const postwsActions = {
    '0': () => { ws.onopen = () => ws.send(data) },
    '1': () => ws.send(data),
}
postwsActions[ws.readyState] && postwsActions[ws.readyState]()

//重连
function reConnect(data){
    const _this = this
    const connect = {
        timer: null,
        wait: 5000, //自定义，控制重连频率
        reconnect: function(){
            if(this.timer) return;
            this.timer = setTimeout(() => {
                _this.ws = new WebSocket('ws://ezlost')
                _this.ws.onopen = () => ws.send(data)
                clearTimeout(this.timer)
                this.timer = null
            }, this.wait);
        }
    }
    connect.reconnect() 
}