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

WebSockets vs. Server-Sent events/EventSource

提问by Mads Mob?k

Both WebSocketsand Server-Sent Eventsare capable of pushing data to browsers. To me they seem to be competing technologies. What is the difference between them? When would you choose one over the other?

双方的WebSockets和服务器发送的事件能够将数据推送到浏览器。对我来说，它们似乎是相互竞争的技术。它们之间有什么区别？你什么时候会选择一个？

回答by Alex Recarey

Websockets and SSE (Server Sent Events) are both capable of pushing data to browsers, however they are not competing technologies.

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

Websockets connections can both send data to the browser and receive data from the browser. A good example of an application that could use websockets is a chat application.

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

SSE connections can only push data to the browser. Online stock quotes, or twitters updating timeline or feed are good examples of an application that could benefit from SSE.

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

In practice since everything that can be done with SSE can also be done with Websockets, Websockets is getting a lot more attention and love, and many more browsers support Websockets than SSE.

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

However, it can be overkill for some types of application, and the backend could be easier to implement with a protocol such as SSE.

但是，对于某些类型的应用程序来说，它可能有点矫枉过正，而且后端可能更容易使用 SSE 等协议来实现。

Furthermore SSE can be polyfilled into older browsers that do not support it natively using just JavaScript. Some implementations of SSE polyfills can be found on the Modernizr github page.

此外，SSE 可以被 polyfill 到不支持它的旧浏览器中，这些浏览器只使用 JavaScript。可以在Modernizr github 页面上找到 SSE polyfill 的一些实现。

Gotchas:

陷阱：

• SSE suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browserand set to a very low number (6). The issue has been marked as "Won't fix" in Chromeand Firefox. This limit is per browser + domain, so that means that you can open 6 SSE connections across all of the tabs to www.example1.comand another 6 SSE connections to www.example2.com(thanks Phate).
• Only WS can transmit both binary data and UTF-8, SSE is limited to UTF-8. (Thanks to Chado Nihi).
• Some enterprise firewalls with packet inspection have trouble dealing with WebSockets (Sophos XG Firewall, WatchGuard, McAfee Web Gateway).

• SSE 受到最大打开连接数的限制，这在打开各种选项卡时会特别痛苦，因为每个浏览器的限制设置为非常低的数字 (6)。该问题已在Chrome和Firefox 中标记为“无法修复” 。此限制是针对每个浏览器 + 域的，这意味着您可以在所有选项卡上打开 6 个 SSE 连接，并打开www.example1.com另外 6 个 SSE 连接www.example2.com（感谢 Phate）。
• 只有 WS 可以传输二进制数据和 UTF-8，SSE 仅限于 UTF-8。（感谢 Chado Nihi）。
• 一些具有数据包检查功能的企业防火墙在处理 WebSockets（Sophos XG Firewall、WatchGuard、McAfee Web Gateway）时遇到问题。

HTML5Rockshas some good information on SSE. From that page:

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

Server-Sent Events vs. WebSockets

Why would you choose Server-Sent Events over WebSockets? Good question.

One reason SSEs have been kept in the shadow is because later APIs like WebSockets provide a richer protocol to perform bi-directional, full-duplex communication. Having a two-way channel is more attractive for things like games, messaging apps, and for cases where you need near real-time updates in both directions. However, in some scenarios data doesn't need to be sent from the client. You simply need updates from some server action. A few examples would be friends' status updates, stock tickers, news feeds, or other automated data push mechanisms (e.g. updating a client-side Web SQL Database or IndexedDB object store). If you'll need to send data to a server, XMLHttpRequest is always a friend.

SSEs are sent over traditional HTTP. That means they do not require a special protocol or server implementation to get working. WebSockets on the other hand, require full-duplex connections and new Web Socket servers to handle the protocol. In addition, Server-Sent Events have a variety of features that WebSockets lack by design such as automatic reconnection, event IDs, and the ability to send arbitrary events.

服务器发送的事件与 WebSockets

为什么选择服务器发送事件而不是 WebSockets？好问题。

SSE 一直处于阴影中的一个原因是因为后来的 API 像 WebSockets 提供了更丰富的协议来执行双向、全双工通信。拥有双向通道对于游戏、消息传递应用程序以及需要双向近实时更新的情况更具吸引力。但是，在某些情况下，不需要从客户端发送数据。您只需要来自某些服务器操作的更新。一些示例是朋友的状态更新、股票行情、新闻提要或其他自动数据推送机制（例如更新客户端 Web SQL 数据库或 IndexedDB 对象存储）。如果您需要向服务器发送数据，XMLHttpRequest 始终是您的好帮手。

SSE 通过传统 HTTP 发送。这意味着它们不需要特殊的协议或服务器实现即可工作。另一方面，WebSockets 需要全双工连接和新的 Web Socket 服务器来处理协议。此外，Server-Sent Events 具有 WebSockets 在设计上缺乏的各种功能，例如自动重新连接、事件 ID 以及发送任意事件的能力。

---

---

TLDR summary:

TLDR总结：

Advantages of SSE over Websockets:

SSE 相对于 Websockets 的优势：

• Transported over simple HTTP instead of a custom protocol
• Can be poly-filled with javascript to "backport" SSE to browsers that do not support it yet.
• Built in support for re-connection and event-id
• Simpler protocol
• No trouble with corporate firewalls doing packet inspection

• 通过简单的 HTTP 而不是自定义协议传输
• 可以用 javascript 填充以将 SSE“反向移植”到尚不支持它的浏览器。
• 内置支持重新连接和事件 ID
• 更简单的协议
• 企业防火墙进行数据包检查没有问题

Advantages of Websockets over SSE:

Websockets 相对于 SSE 的优势：

• Real time, two directional communication.
• Native support in more browsers

• 实时，双向通信。
• 更多浏览器的原生支持

Ideal use cases of SSE:

SSE的理想用例：

• Stock ticker streaming
• twitter feed updating
• Notifications to browser

• 股票行情流
• 推特提要更新
• 浏览器通知

SSE gotchas:

SSE 陷阱：

• No binary support
• Maximum open connections limit

• 没有二进制支持
• 最大开放连接数限制

回答by Drew Noakes

According to caniuse.com:

根据caniuse.com：

• %96 of global usersnatively support WebSockets
• %92 of global usersnatively support Server-sent events

• %96 的全球用户原生支持 WebSockets
• %92 的全球用户本机支持服务器发送的事件

You can use a client-only polyfill to extend support of SSE to many other browsers. This is less likely with WebSockets. Some EventSource polyfills:

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

• EventSourceby Remy Sharp with no other library dependencies (IE7+)
• jQuery.EventSourceby Rick Waldron
• EventSourceby Yaffle(replaces native implementation, normalising behaviour across browsers)

• 没有其他库依赖项的 Remy Sharp 的EventSource(IE7+)
• Rick Waldron 的jQuery.EventSource
• EventSource的由Yaffle（替代原生实现，跨浏览器的行为正常化）

If you need to support all the browsers, consider using a library like web-socket-js, SignalRor socket.iowhich support multiple transports such as WebSockets, SSE, Forever Frame and AJAX long polling. These often require modifications to the server side as well.

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

Learn more about SSE from:

从以下网址了解有关 SSE 的更多信息：

• HTML5 Rocks article
• The W3C spec (published version, editor's draft)

• HTML5 摇滚文章
• W3C 规范（已发布版本，编辑草稿）

Learn more about WebSockets from:

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

• HTML5 Rocks article
• The W3C spec (published version, editor's draft)

• HTML5 摇滚文章
• W3C 规范（已发布版本，编辑草稿）

Other differences:

其他区别：

• WebSockets supports arbitrary binary data, SSE only uses UTF-8

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

回答by Yaffle

Opera, Chrome, Safari supports SSE, Chrome, Safari supports SSE inside of SharedWorker Firefox supports XMLHttpRequest readyState interactive, so we can make EventSource polyfil for Firefox

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

回答by Gaurav Tiwari

---

---

Websocket VS SSE

Websocket VS SSE

---

---

Web Sockets -It is a protocol which provides a full-duplex communication channel over a single TCP connection. For instance a two-way communication between the Server and Browser Since the protocol is more complicated, the server and the browser has to rely on library of websocket which is socket.io

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

Example - Online chat application.

SSE(Server-Sent Event) -In case of server sent event the communication is carried out from server to browser only and browser cannot send any data to the server. This kind of communication is mainly used when the need is only to show the updated data, then the server sends the message whenever the data gets updated. For instance a one-way communication between the Server to Browser. This protocol is less complicated, so no need to rely on the external library JAVASCRIPT itself provides the EventSourceinterface to receive the server sent messages.

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

Example - Online stock quotes or cricket score website.

回答by Drew LeSueur

One thing to note:
I have had issues with websockets and corporate firewalls. (Using HTTPS helps but not always.)

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

See https://github.com/LearnBoost/socket.io/wiki/Socket.IO-and-firewall-softwarehttps://github.com/sockjs/sockjs-client/issues/94

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

I assumethere aren't as many issues with Server-Sent Events. But I don't know.

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

That said, WebSockets are tons of fun. I have a little web game that uses websockets (via Socket.IO) (http://minibman.com)

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

回答by Patrick Leitermann

Hereis a talk about the differences between web sockets and server sent events. Since Java EE 7 a WebSocketAPI is already part of the specification and it seems that server sent events will be released in the nextversion of the enterprise edition.

这里讲讲 web sockets 和 server sent events 的区别。由于 Java EE 7 WebSocketAPI 已经是规范的一部分，服务器发送事件似乎将在企业版的下一版本中发布。

回答by user1948585

Max connection limit is not an issue with http2 + sse.

最大连接限制不是 http2 + sse 的问题。

It was an issue on http 1

这是 http 1 上的问题