[网络协议]喂狗判断？如何处理websocket请求没有数据返回的情况下数据归零

前言

最近遇到一个需求，就是前端接收到的websocket数据，如果只返回了几条数据，后面没有返回了，就会出现页面一直显示最后一次数据的情况，但实际业务可能需要数据归零或者清空不显示。这时候怎么判断呢，问了同事，同事说做一个喂狗判断，我一脸懵逼。其实就是监听数据返回，如果一直没有变化，就做对应的处理（归零或者不显示等）

处理方式

这里采取的方式是使用useEffect监听websocket返回的数据是否有变化。上代码：

  let timer : any
  useEffect(() => {
    setAvgSpeed(data ? data.avg_speed:0)
    setTrafficFlow(data ? data.traffic_flow:0)
    setQueueLength(data ? data.queue_length:0)
    setLaneOccupy(data ? data.lane_occupy:0)
    const queueLengthAarrayT:Array<number>=new Array<number>()
    data&&data.links&&data.links.map((item,index)=>{
        queueLengthAarrayT.push(item.queueLength)
    })
    setQueueLengthArray(queueLengthAarrayT)
    
    clearInterval(timer)
    timer = setTimeout(()=>{
        setAvgSpeed(0)
        setTrafficFlow(0)
        setQueueLength(0)
        setLaneOccupy(0)
        setQueueLengthArray([])
    },1000*10)

    return () => {
       clearTimeout(timer)
    }
  }, [siteIndicatorCV,siteIndicatorITS])

代码解释：

siteIndicatorCV、siteIndicatorITS是返回的websocket数据，监听他，如果有变化，则先set进对应的数据，然后页面重新渲染。（即setAvgSpeed(data ? data.avg_speed:0)），然后先清除定时器，不然页面会爆炸，然后再新建一个定时器，如果十秒钟监听的数据没有变化，则将数据归零。如果有变化，这个定时器就相当于重置。循环往复达到效果