随着互联网的发展，实时通信已经变成了当今 Web 应用程序中非常重要的功能。WebSocket 和 SSE（Server-Sent Events）是两种实现实时通信的方法，但它们有所不同。在本篇文章中，我们将分析比较这两种技术，证明为什么 SSE 比 WebSocket 在实时通信方面更有优势。
什么是 WebSocket 和 SSE
WebSocket 是一种实现全双工通信的协议，也被称为双向 Websocket。它允许一端（客户端或服务端）主动地发送数据到另一端而不需要等待请求。WebSocket 使用 HTTP/1.1 协议进行初始握手，建立一个 TCP 连接，然后通过一个对称协议来交换信息，从而实现双向通信。
SSE 是一种使用纯 HTTP 技术实现服务器向客户端推送消息的标准化协议。SSE 的工作方式是，客户端浏览器向服务器发送一个 HTTP 请求，服务器保持该请求一段时间，根据需要推送更新数据，然后通过该连接将数据发送到客户端。SSE 使用的 HTTP 特性包括长轮询、流与 chunked 响应，这使得 SSE 更加简单、轻量级、简单易用，不需要像 WebSocket 一样建立新的服务器连接。
SSE 与 WebSocket 的优缺点
WebSocket 在实现简单场景的实时通信时可以工作得很好，但在某些情况下可以有以下一些优缺点：
WebSocket 优点
- 双向通信: 相当于打开了一个 TCP 连接，可以进行双向实时通信
- 成熟协议: WebSocket 协议非常成熟，大多数浏览器和服务器都支持了
WebSocket 缺点
- 复杂性: WebSocket 协议相对复杂，需要服务端和客户端都支持；
- 连接维持负担: 连接是双向的，需要一直保持心跳维持连接，有较大的连接维持负担；
- 占用更多资源: WebSocket 建立的连接需要占用更多的服务器资源。
相比之下，SSE 在某些情况下可以有以下一些优缺点：
SSE 优点
- 轻量级: SSE 不需要建立新的连接，而是利用现有的 HTTP 连接来发送消息。这使得 SSE 很轻量，并且不需要独立的服务器，使代码编写和实现更加容易。
- 简单易用：SSE 协议很简单，且能很好地隐藏复杂性，非常容易在服务端和浏览器端实现。
- 无需额外心跳: SSE 在与服务器连接后，采用 HTTP/1.1 协议中的 chunked 内容发送机制. 因此在两次数据包之间可以等待比较长的时间，服务端可以在有数据包需要更新时再发送数据到客户端，避免了需要额外心跳或频繁的轮询服务端。
SSE 缺点
- 单向通信: SSE 仅限于服务器向客户端的单向通信，无法支持客户端向服务器的双向通信。
- 服务端负担: SSE 需要保持响应，直到浏览器关闭连接，这可能会在某些情况下占用服务器资源。
SSE 与 WebSocket 的实战示例
下面，我们将通过两个简单的实际场景，让你更好地理解 SSE 和 WebSocket 的使用场景。
用 WebSocket 进行实时聊天
用 WebSocket 实现实时聊天是很常见的场景。在下面的代码片段中，你可以看到如何使用 JavaScript 和 WebSocket API 来初始化 WebSocket 连接，订阅聊天事件并将消息发送到服务器。
-- -- --------- -- ----- ------ - --- -------------------------------- -- -- --------- -- ------------------------------- -------- ------- - -- ------------ ------------------ --------- --- ---------------------------------- -------- ------- - -- ---------------- --- -------------------------------- -------- ------- - -- ---------------- ---
在这段代码中，我们创建了一个 WebSocket 对象，然后通过 open、message 和 close 事件来监听连接的状态和收到的消息。在实际中，我们可以将 message 事件举起来判断消息类型，然后更新聊天记录的内容。
这个场景下，WebSocket 的特性使得它可以非常简便地实现实时聊天，无需频繁轮询或异步加载模拟。但是，在下面这个场景中，SSE 可以更适合一些场景。
用 SSE 实现服务器推送的实时股票数据
在实时场景中，我们有一些应用需要显示股票市场的实时数据。在这种情况下，我们可以使用 SSE，利用浏览器的长轮询机制来实现以较小的带宽和服务器负担推送数据。
下面的示例代码会每隔一秒钟生成一条随机的股票行情数据，并使用 SSE 将它们推送到客户端。
----- ------- - ------------------
----- --- - ---------
-- -- ---- --- ---- --- -
----------------- -------- ----- ---- -
------------------ -
--------------- -------------------- -- -- ------------
---------------- -----------
------------- ------------
---
-- ---------
---------------------- -
----- ---- - -
------- -------
------ -----------------
--
---------------- ------------------------------
-- ------
---
-----------------在这个示例中，我们使用 Express 来创建一个简单的 Web 服务器，然后使用 '/stock' 路由来提供 SSE 服务。每当客户端与服务器连接时，服务端会创建一个 SSE 流，然后每隔一秒钟将随机的股票行情数据通过 SSE 发送给客户端。
在这个场景下，SSE 的特性更适合。因为它并不需要建立一个稳定的双向连接，而是可以利用已有的 HTTP GET 请求实现异步数据推送，这对于需要经常推送更新消息的应用程序来说是很好的。
结论
在本文中，我们学习了 SSE 和 WebSocket 两种实现实时通信的技术。虽然它们有相似的用途，都可以用来实现实时通信，但是它们的设计理念不一样，所以对于不同的场景选择不同的技术，则更能发挥优势，提升了应用程序的性能效率。
WebSocket 适用于需要双向通信的场景，如通过浏览器进行实时消息聊天，游戏和实时协作。SSE 适用于仅需要服务端向客户端推送实时数据的场景，如实时股票行情和数据分析。选择恰当的技术可以为应用程序带来很大的优势，在使用中应根据具体场景进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67188a32ad1e889fe22c4e70