SSE 实现与 Websocket 的比较，哪种更适合你？-JavaScript中文网-JavaScript教程资源分享门户

SSE（Server-Sent Events）和 Websocket 都是实现客户端与服务器之间实时通信的技术。不同的是，SSE 是基于 HTTP 协议的单向通信，而 Websocket 是基于 TCP 的双向通信。在选择一种通信技术时，我们需要考虑自己的具体应用场景和需求，来决定哪种更适合我们。

SSE

什么是 SSE？

SSE 是一种浏览器与服务器之间单向实时通信技术。它允许服务器向客户端推送数据，而不需要客户端发送请求。这种技术主要用于消息通知、实时更新、事件流等场景。

SSE 的优势

SSE 是基于 HTTP 相关协议的，无需另外建立连接，因此优化网络协议的解析效率。同时，SSE 会始终使用单个持久连接，在服务器和客户端间交换 JSON 格式的数据。这使得 SSE 可以更好地控制资源占用。
SSE 具有自适应性，可同时处理多个连接。每个 SSE 连接都有自己的事件类型和消息，这使得 SSE 可以在同一页面上支持多个服务端源链接。

SSE 的缺点

SSE 的单向性质，只有服务器可以向客户端推送数据，客户端不能向服务器发送数据。这可能会给一些应用场景带来限制。
SSE 的通信机制依赖 HTTP 协议，连接在重新建立和重试时可能会遇到延迟。同时，SSE 收到数据的时候有最大字符长度限制（Chrome 为 32 KB，Firefox 为 4 KB），并且 SSE 的通信速度可能受到网络连接的影响。

SSE 的应用场景

实时更新：例如股票价格、新闻、帖子等需要实时更新的应用可以选择 SSE。
通知服务：例如聊天应用、推送等服务需要通知客户端时，也可以使用 SSE。

Websocket

什么是 Websocket？

Websocket 是一种浏览器与服务器之间双向实时通信技术。它允许服务器和客户端之间发送任何类型的数据，同时允许客户端与服务器进行双向通信。Websocket 是基于 TCP 的通信协议，它建立在已有的 HTTP 协议之上。

Websocket 的优势

实现双向通信，可以方便地打造实时应用。
支持高效的二进制数据传输。

Websocket 的缺点

Websocket 的双向通信机制可能导致资源占用后端较大。
如果 Websocket 连接在一段时间内没有活动，服务器可能可能会开销较大的带宽。同时，这种类似心跳的机制会增加额外的复杂性。

Websocket 的应用场景

对于需要长时间持续通信的 web 应用来说，Websocket 是非常合适的。例如在线游戏、实时协作等。

如何选用？

对于 SSE 和 Websocket 的选择，您需要根据您的应用特点来决定，需要衡量不同场景的特点，得出最适合自己的方式。若网络连接不太稳定，并希望连接的建立速度快且推送的数据量较小，则 SSE 更为适合；若需要双向通信则应选择 Websocket。

需要注意的是，SSE 的推送数据只能由服务端控制，而客户端无法主动发送数据，这可能会限制应用的某些特性。同时，Websocket 能够处理不同类型的数据并实现双向通信，但它需要保持长连接，可能会对服务器端的性能产生影响。因此，我们需要根据自己的需求确定选择，可以在不同场景中适配不同的通信方式。

示例代码

这里提供一个使用 SSE 的示例代码：

var source = new EventSource('/stream');// 服务器 SSE 流的地址
source.onmessage = function (e) {
  console.log(e.data);// 收到新的消息时输出到控制台
};

以下是一个使用 Websocket 的示例代码：

// www.javascriptcn.com code example
var socket = new WebSocket('ws://localhost:1234');// Websocket 服务器地址

socket.onopen = function () {
  console.log('已连接'); // 连接上了
};

socket.onmessage = function (e) {
  console.log(e.data);// 收到新的消息时输出到控制台
};

这两份示例代码都很简单。使用 SSE 时只需创建一个 EventSource 和一个地址，然后使用 onmessage 监听事件即可。而在 Websocket 中，需要创建一个 WebSocket 对象并连接服务器，接着监听 onmessage 事件来处理收到的数据。需要注意的是，SSE 的服务器代码与普通的 HTTP 框架无异，而 Websocket 等待着一个事件消息时，需要等待对方主动推送消息，所以需要一个类似小型服务器的实现。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d673baa941bf7134c3878d

SSE 实现与 Websocket 的比较，哪种更适合你？

SSE