WebSockets 与服务器发送的事件/事件源

Websockets 和 SSE（服务器发送事件）都能够将数据推送到浏览器，但它们不是竞争技术。

Websockets 连接既可以向浏览器发送数据，也可以从浏览器接收数据。可以使用 websocket 的应用程序的一个很好的例子是聊天应用程序。

SSE 连接只能将数据推送到浏览器。在线股票报价或更新时间线或提要的 Twitter 是可以从 SSE 中受益的应用程序的很好示例。

在实践中，由于 SSE 可以完成的所有事情也可以通过 Websockets 完成，因此 Websockets 得到了更多的关注和喜爱，并且比 SSE 更多的浏览器支持 Websockets。

但是，对于某些类型的应用程序来说，这可能是多余的，并且后端可以更容易地使用诸如 SSE 之类的协议来实现。

此外，SSE 可以被填充到仅使用 JavaScript 本身不支持它的旧浏览器中。可以在 Modernizr github page 上找到 SSE polyfill 的一些实现。

陷阱：

SSE 受到最大打开连接数的限制，当打开各种选项卡时可能会特别痛苦，因为限制是每个浏览器的并且设置为非常低的数字 (6)。该问题已在 Chrome 和 Firefox 中标记为“无法修复”。此限制针对每个浏览器 + 域，因此这意味着您可以在所有选项卡上打开 6 个 SSE 连接到 www.example1.com 和另外 6 个 SSE 连接到 www.example2.com（感谢 Phate）。

只有 WS 可以同时传输二进制数据和 UTF-8，SSE 仅限于 UTF-8。 （感谢查多尼希）。

一些具有数据包检测功能的企业防火墙无法处理 WebSocket（Sophos XG Firewall、WatchGuard、McAfee Web Gateway）。

HTML5Rocks 有一些关于 SSE 的好信息。从该页面：

服务器发送事件与 WebSockets 为什么选择服务器发送事件而不是 WebSockets？好问题。 SSE 一直被隐藏起来的一个原因是因为后来的 API（如 WebSockets）提供了更丰富的协议来执行双向、全双工通信。对于游戏、消息传递应用程序以及需要双向近乎实时更新的情况，拥有双向通道更具吸引力。但是，在某些情况下，不需要从客户端发送数据。您只需要一些服务器操作的更新。一些例子是朋友的状态更新、股票行情、新闻提要或其他自动数据推送机制（例如更新客户端 Web SQL 数据库或 IndexedDB 对象存储）。如果您需要向服务器发送数据，XMLHttpRequest 始终是您的朋友。 SSE 通过传统的 HTTP 发送。这意味着它们不需要特殊的协议或服务器实现即可工作。另一方面，WebSockets 需要全双工连接和新的 Web Socket 服务器来处理协议。此外，Server-Sent Events 具有 WebSockets 在设计上缺乏的各种功能，例如自动重新连接、事件 ID 和发送任意事件的能力。

TLDR 总结：

SSE 相对于 Websockets 的优势：

通过简单的 HTTP 而不是自定义协议传输

可以用 javascript 填充以将 SSE“反向移植”到尚不支持它的浏览器。

内置支持重新连接和事件 ID

更简单的协议

企业防火墙进行数据包检查没有问题

Websockets 相对于 SSE 的优势：

实时，双向通信。

更多浏览器的原生支持

SSE 的理想用例：

股票行情流

推特提要更新

浏览器通知

上证所陷阱：

不支持二进制

最大打开连接数限制

---

根据 caniuse.com：

98.33% 的全球用户原生支持 WebSockets

97.67% 的全球用户原生支持服务器发送事件

您可以使用仅限客户端的 polyfill 将 SSE 支持扩展到许多其他浏览器。 WebSockets 不太可能发生这种情况。一些 EventSource polyfills：

Remy Sharp 的 EventSource，没有其他库依赖项 (IE7+)

Rick Waldron 的 jQuery.EventSource

Yaffle 的 EventSource（替换本机实现，跨浏览器规范化行为）

如果您需要支持所有浏览器，请考虑使用像 web-socket-js、SignalR 或 socket.io 这样的库，它们支持多种传输方式，例如 WebSockets、SSE、Forever Frame 和 AJAX 长轮询。这些通常也需要对服务器端进行修改。

从以下位置了解有关 SSE 的更多信息：

HTML5 摇滚文章

W3C 规范（已发布版本，编辑草稿）

从以下位置了解有关 WebSocket 的更多信息：

HTML5 摇滚文章

W3C 规范（已发布版本，编辑草稿）

其他区别：

WebSockets 支持任意二进制数据，SSE 只使用 UTF-8

---

Opera, Chrome, Safari 支持 SSE, Chrome, Safari 在 SharedWorker 内部支持 SSE Firefox 支持 XMLHttpRequest readyState 交互，所以我们可以为 Firefox 制作 EventSource polyfil

---

Websocket VS SSE

Web Sockets - 它是一种通过单个 TCP 连接提供全双工通信通道的协议。例如服务器和浏览器之间的双向通信 由于协议比较复杂，服务器和浏览器必须依赖 websocket 库，即 socket.io

Example - Online chat application.

SSE(Server-Sent Event) - 在服务器发送事件的情况下，仅从服务器到浏览器进行通信，浏览器不能向服务器发送任何数据。这种通信主要用于只需要显示更新的数据时，然后服务器在数据更新时发送消息。例如服务器到浏览器之间的单向通信。这个协议不太复杂，所以不需要依赖外部库JAVASCRIPT本身提供的EventSource接口来接收服务器发送的消息。

Example - Online stock quotes or cricket score website.

---

需要注意的一件事：我遇到了 websockets 和公司防火墙的问题。 （使用 HTTPS 会有所帮助，但并非总是如此。）

请参阅https://github.com/LearnBoost/socket.io/wiki/Socket.IO-and-firewall-software https://github.com/sockjs/sockjs-client/issues/94

我认为服务器发送事件没有那么多问题。但我不知道。

也就是说，WebSocket 非常有趣。我有一个使用 websockets 的小网络游戏（通过 Socket.IO）（http://minibman.com）

---

它们在语义上是不同的。

websocket 具有“双向数据流”的原生语义含义。

而 sse 具有“发布-订阅模式”或“请求-响应模式，尽管响应是流”的本机语义含义。

当然，您可以自己在 websocket 上实现一层“pub-sub 模式”或“req-res 模式”。但这效率较低。

---