前言

这是在一个组内周会上，我向大家分享了我曾经用过的webSocket的故事，下面我就简单给大家讲下故事的过程。

一、webSocket简述

webSocket是H5新增的一种全新的TCP协议，它是指服务器和客户端只要进行一次TCP连接，它们直接就会形成一个长连接，后面它们就可以通过这条连接互相发送数据，具有全双工的特点。

二、webSocket的使用

let socket = new WebSocket('ws://127.0.0.1:8000')
socket.onopen = ()=>{}
socket.onmessage = ()=>{}
socket.onclose = ()=>{}
socket.onerror = ()=>{}
socket.send()

三、webSocket的连接原理

webSocket的连接其实就是一次简单的http连接，请求方式为get请求，不过它在请求头中添加了upgrade: websocket 这个信息，它的意思是告诉浏览器希望将这次发起的http连接升级成websokcet连接。

四、心跳

webscoket虽然是一种长连接，但是也会有断开的时候，比如网络出现异常这种情况。所以我们在大多数时候都会写一个心跳机制来帮助它进行断开重连。心跳机制：客户端和服务器进行一个协商，每隔一段时间客户端给服务器发送一个信息，比如你好，服务器再给客户端返回一个信息，比如你好啊。就想心跳一样，只要能收到彼此的信息就代表连接正常没有断开。如果客户端没有收到服务器发来的信息，就代表连接出现异常，客户端就要尝试重新去进行连接。
上面介绍完了基本用法和心跳感觉自己有点小无敌。然后组内大佬一个问题直接把我干懵了，“既然说到了心跳，那我问你，要是心跳断开了，客户端在一直尝试重连，而这是服务器不知道断开了，一直向我们推送数据，当客户端重连成功后发现，服务器已经向我们推送了50次数据了，那么你该怎么处理这个问题呢？”，下面是我当时内心活动，“一下来了50次数据，onmessage这个函数里面的逻辑就要执行50遍，要是还存在页面的重新渲染，在渲染个50次，页面不得卡死”。终究入行太短，道行太浅，败下阵来。大佬说：“webSocket确实好用，但是它太占服务器的资源了，而且它的应用场景在前端开发可能连5%的没有”。
我也是说出了我的想法，如果一个页面用到了webSocket，我们在离开这个页面时就把这个连接断开，这样服务器的压力会适当变小。

针对上面大佬问的问题，当时确实没想到好的办法，不过会议结束冷静下来仔细想了想，感觉应该是可以解决的，下面是两种方法，不过没有进行测试，仅供大家参考。

一、服务器进行设置，当收不到客户端发送的心跳信息时，停止给客户端推送数据，当心跳恢复，直接推送最新数据(大佬会上说的)

二、节流函数。我们可以在onmessage函数里面使用节流函数，设置几秒内只执行一次onmesage里面的逻辑，这样就算会有赋值页面渲染，渲染次数也是被大大稀释了。感觉可行 哈哈

五、应用场景

1. 视频聊天

2.实时数据的获取(例如echarts图表，天气变化)

话说本来webSocket的应用场景就不多，可能会在使用ajax轮询时能稍微用下。最近项目中使用了useSWR，一个新的用于数据请求的React Hooks 库，它你只要设置一个refreshInterval: 10000 ，这个接口就会每隔10秒发送一次请求，也不需要我们去写定时器发送请求了，这不纯纯抢webSokcet的饭碗嘛！

总结

这次分享结束，对我自身来说还是挺有益处的，让我对webSocket的理解更加深入了一点，也引发了很多的思考。