现代 Web 应用程序中，实时数据和服务消息变得越来越重要。传统的 HTTP 请求/响应机制不能满足这种需求，因为它们是单向的。因此，WebSockets 和 Server-Sent Events（SSE）是最流行的方案之一。这两种技术的主要区别在于它们如何通信以及它们应该如何用于不同应用程序场景。
Server-Sent Events
Server-Sent Events 是一种基于 HTTP 的高级技术，它允许服务器将实时数据通过 HTTP 连接实时推送到客户端。客户端通过监听打开的 HTTP 连接来接收这些消息。这种技术的好处在于它使用标准 HTTP 连接，这意味着服务器和客户端之间的整个交互都是基于现有的协议和安全机制。这种技术也比 WebSockets 更容易实现，因为它使用 HTTP 连接。
以下是一个简单的 SSE 示例代码：
首先，从客户端中创建一个新的 EventSource 对象，然后将其连接到 SSE 服务端点的 URL。
const eventSource = new EventSource("/api/sse"); eventSource.addEventListener("message", event => { console.log(event.data); });
接下来，服务器可以使用任何语言来发送 SSE 事件，只需将消息写入 HTTP 连接并将其发送到客户端的 EventSource 对象。
res.write("event: user-message\n"); res.write(`data: {"message": "${message}" }\n\n`);
这样，客户端便会接收到服务器发送的消息，并立即显示在应用程序中。
WebSockets
WebSockets 是一种在客户端和服务器之间实现双向通信的协议，使用标准化协议和端口进行通信。这种协议没有 HTTP 请求头和响应头限制，并且在消息传输和处理上具有较小的延迟。
以下是一个简单的 WebSockets 示例代码：
首先，从客户端中创建一个新的 WebSocket 对象，然后将其连接到 WebSockets 服务端点的 URL。
-- -------------------- ---- ------- ----- ------ - --- ----------------------------- ------------------------------- ----- -- - ------------------ -------------- --- ---------------------------------- ----- -- - ------------------------ ---展开代码
然后，在服务器端，当它收到 WebSockets 连接请求时，它处理该请求并生成一个新的 WebSocket 对象。
-- -------------------- ---- ------- ----- -- - --- ------------------ ----- ---- --- ------------------- ------ -- - ------------------ -------------- -------------------- ------- -- - --------------------- --- ---展开代码
这样，当客户端连接到服务器时，服务器便可以像任何其他 WebSocket 连接一样与客户端进行双向通信。
Server-Sent Events vs WebSockets
在大多数情况下，你可以使用这两种技术来实现实时数据传输。在选择使用哪种技术时，需要考虑以下区别。
浏览器支持
Server-Sent Events 和 WebSockets 在不同浏览器中的支持可能有所不同。尽管这两种技术已成为了现代浏览器的一部分，但某些旧版本的浏览器可能不支持它们。
实现难度
SSE 的实现要比 WebSockets 简单得多。在服务器端，只需要写入 SSE 事件即可将消息推送到客户端。另一方面，WebSockets 要求开发人员在服务器上实现整个协议。
安全性
WebSockets 允许从客户端到服务器的双向通信，这可能会增加一些安全风险。虽然 WebSockets 的协议提供了针对安全漏洞的解决方案，但出于一些安全原因，企业和组织可能不允许 WebSockets 连接。SSE 利用现有的 HTTP 连接来通信，这使得其更加安全。
性能
WebSockets 的性能比 SSE 更好，这是因为 SSE 使用了长连接的 HTTP 通信模型，需要在浏览器和服务器之间建立和维护多个 HTTP 连接。而 WebSockets 使用新的双向通信协议，它的原理更相似于 TCP 协议。
综上所述，SSE 和 WebSockets 旨在解决实时通信的问题，但它们适用于不同的应用程序场景。SSE 使用长连接的 HTTP 通信模型，仅适用于服务端推送数据到客户端的场景；而 WebSockets 则使用新的双向通信协议，适用于双向通信场景。
因此，在实现你的实时应用程序时，请谨慎考虑您的具体需求，以选择正确的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c8f5bee46428fe9efd338f
