webSocket如何处理每秒几百条消息推送？

Question

场景
IM聊天室
人数大概几万人在线，
并发较高的时候一秒钟成百上千条消息推送，
前端该如何优化处理呢？

目前有个方案是设一个定时器，将接收到的消息存起来，然后定时渲染， 但这样失去了消息的即时性。
请问有什么好的方法吗？

Answer 1

几万人，每秒钟几百条消息，随便你怎么优化，没有任何客户体验可言，还想要消息即时性，你考虑过，客户端，只能看到屏幕在疯狂滚动，根本看不清任何内容吗？

Answer 2

对于这种需要实时推送大量消息的场景，使用定时器来渲染消息显然不是一个很好的解决方案，因为它会导致消息的延迟和不及时。下面是一些可能的优化方案：

1. 使用WebSocket或长连接。WebSocket是一种双向通信协议，可以在客户端和服务器之间建立实时的、持久的连接，使得服务器可以即时地向客户端推送消息，而不需要客户端通过轮询的方式不断向服务器请求数据。使用WebSocket可以极大地提高消息推送的实时性和性能。
2. 使用消息队列。将接收到的消息先存放在消息队列中，然后通过异步处理的方式将消息发送给在线的用户。使用消息队列可以有效地解耦消息的生产和消费，提高系统的可靠性和可扩展性。
3. 前端页面的优化。可以采用一些前端技术来优化页面的性能，如使用虚拟滚动来避免大量DOM节点的渲染、使用缓存等。这些技术可以减少前端页面的负担，提高页面的响应速度和渲染性能。
4. 服务端的优化。对于服务端来说，可以采用一些优化技术来提高消息推送的性能和稳定性，如使用多线程/进程来提高并发处理能力、使用缓存来减轻数据库的负担、使用负载均衡来提高系统的可用性等。

综上所述，针对IM聊天室这种需要实时推送大量消息的场景，我们可以采用一系列技术手段来优化系统的性能和稳定性，提高消息推送的实时性和可靠性。

Answer 3

使用定时器或者requestAnimationFrame函数来避免一次性渲染大量数据导致页面卡顿没有任何问题 对于在乎即时性js执行远比你想的要快 再就虚拟滚动啊 数据缓存啊 数据压缩啊 都可以用的上

Answer 4

实际上 requestAnimationFrame + 虚拟滚动 就已经可以优化页面很多了。
如果想防止页面滚动过快又想要即时性的话我建议是：利用数组将消息存起来并且采用定时器每50ms或者100ms用unshift出队列渲染这样可以实现一个伪即时性。

Answer 5

从需求来看，和直播间很相似？可以搜一搜看看直播间的实时聊天是如何实现的🤔

Answer 6

你看看前端一秒接收到多少条比较合适，然后让后端，按你要求频次进行推送。