在现代 Web 应用中，实时性变得愈发重要，WebSocket 和 Server-Sent Events (SSE) 成为了实现实时通信的常用技术。然而，它们在实现上的差异以及其性能表现有所不同。本文将会比较 WebSocket 和 SSE 的性能，并提供一些实用的指导建议。
WebSocket 和 SSE 的介绍
WebSocket 是一种提供双向通信(全双工)的网络协议。它能够创建一个持久连接，双方可以在此连接上随意传输数据，而无需一次次地建立和终止连接。WebSocket 基于 HTTP 协议，但升级至 WebSocket 后，它具备更多的功能，同时也更为高效。
Server-Sent Events 是一种只支持服务端到客户端的单向通信(半双工)的技术。它基于 HTTP 长连接，利用了浏览器的事件机制，能够向客户端推送实时数据。客户端在接受到服务器的数据时，借助EventSource对象，通过监听onmessage事件来进行处理。
WebSocket 和 SSE 的性能对比
数据传输方式
WebSocket 和 SSE 都能处理双向通信。然而，SSE 只能从服务端向客户端进行通讯，而 WebSocket 则已经扩展到浏览器和服务器之间的双向通讯。这意味着 WebSocket 更适合于多人游戏，聊天和其他需要实时不断发送和接收大量数据的应用。
连接数
WebSocket 的连接数非常高。由于它是开放链接，因此每个 WebSocket 连接都需要一个握手，这使得每个连接都增加了一些点对点的负载。虽然会影响性能，但 WebSocket 通过提供平均比 SSE 更少的连接数，而使得它运行更快。
一方面，Server-Sent Events 比 WebSocket 消耗更少的资源，因为它只需要一个连接。这个连接通常是长时间（例如连接超时设置为 20 秒）的 HTTP/1.1 请求，直到它被关闭或断开连接。
数据量
WebSocket 应该优于 SSE 当传输大量数据时。WebSocket 不会像 SSE 一样在处理事件时出现内存飞速增长的情况，因此更适合处理大数据负载。另外，对于更大的负载，WebSocket 通常使用“二进制协议”，以提高速度和响应时间。
重连机制
如果断开与服务器的连接，多少次尝试重新连接的机制是一个非常重要的课题，特别是在移动设备情况下。WebSocket 保持了一定规模的重连机制，重连很快。SSE 对于断开重新连接的“替代方案”是发送时间头，这可能是命令的主要缺点之一。
示例代码
WebSocket 示例代码：
-- -------------------- ---- -------
--- ------ - --- ---------------------------------
------------- - ------------- -
----------------------- -------
------------------ ----------
--
---------------- - ------------- -
--------------------- -------- - - --------------------------
---------------
--
-------------- - ------------- -
----------------------- ---------
--SSE 示例代码:
-- -------------------- ---- -------
--- ------ - --- -------------------------------------------
---------------- - --------------- -
------------------------
--
-------------- - --------------- -
---------------------
--结论
WebSocket 和 Server-Sent Events 都有各自的优势和劣势。本文分析了两者在性能，数据传输，连接数和重连等方面的差异。我们可以看到，WebSocket 适用于高性能，大数据量，端到端连接，而 SSE 更适合简单的单向通信。在选择使用 WebSocket 或 SSE 时，请考虑应用程序的特性，例如实际数据传输量，连接数，用户体验以及在服务器上处理推送的工作量。最终目标是选择正确的解决方案以获得最佳的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef8f906fbf9601972fee69