html5 - WebSockets与服务器发送的事件/ EventSource(WebSockets vs. Server-Sent events/EventSource)

Question

Both WebSockets and Server-Sent Events are capable of pushing data to browsers.

(WebSockets和服务器发送事件都能够将数据推送到浏览器。)

To me they seem to be competing technologies.

(在我看来，它们似乎是竞争技术。)

What is the difference between them?

(它们之间有什么区别？)

When would you choose one over the other?

(您何时会选择一个？)

  ask by Mads Mob?k translate from so

Answer 1

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

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

Websockets connections can both send data to the browser and receive data from the browser.

(Websockets连接既可以将数据发送到浏览器，也可以从浏览器接收数据。)

A good example of an application that could use websockets is a chat application.

(可以使用websockets的应用程序的一个很好的例子是聊天应用程序。)

SSE connections can only push data to the browser.

(SSE连接只能将数据推送到浏览器。)

Online stock quotes, or twitters updating timeline or feed are good examples of an application that could benefit from 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.

(此外，可以将SSE填充到不仅使用JavaScript本身不支持它的旧版浏览器中。)

Some implementations of SSE polyfills can be found on the Modernizr github page .

(可以在Modernizr github页面上找到SSE polyfills的一些实现。)

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 browser and set to a very low number (6).

  (SSE受最大打开连接数的限制，这在打开各种选项卡时会特别痛苦，因为该限制是针对每个浏览器的，并且设置为一个非常低的数字（6）。)

  The issue has been marked as "Won't fix" in Chrome and Firefox

  (该问题在Chrome和Firefox中被标记为“无法解决”)

• Only WS can transmit both binary data and UTF-8, SSE is limited to UTF-8.

  (只有WS可以传输二进制数据和UTF-8，而SSE限于UTF-8。)

  (Thanks to Chado Nihi).

  (（感谢Chado Nihi）。)

• Some enterprise firewalls with packet inspection have trouble dealing with WebSockets (Sophos XG Firewall, WatchGuard, McAfee Web Gateway).

  (某些具有数据包检查功能的企业防火墙在处理WebSocket（Sophos XG防火墙，WatchGuard，McAfee Web Gateway）时遇到问题。)

HTML5Rocks has some good information on SSE.

(HTML5Rocks在SSE上有一些很好的信息。)

From that page:

(从该页面：)

Server-Sent Events vs. WebSockets (服务器发送的事件与WebSockets)

Why would you choose Server-Sent Events over WebSockets?

(您为什么选择通过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.

(将SSE保留在阴影中的原因之一是因为后来的API（如WebSocket）提供了更丰富的协议来执行双向全双工通信。)

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 (eg updating a client-side Web SQL Database or IndexedDB object store).

(一些示例是朋友的状态更新，股票行情自动收录器，新闻提要或其他自动数据推送机制（例如，更新客户端Web SQL数据库或IndexedDB对象存储）。)

If you'll need to send data to a server, XMLHttpRequest is always a friend.

(如果您需要将数据发送到服务器，则XMLHttpRequest始终是朋友。)

SSEs are sent over traditional HTTP.

(SSE通过传统的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.

(另一方面，WebSockets需要全双工连接和新的Web Socket服务器来处理协议。)

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.

(另外，服务器发送的事件具有WebSocket设计上缺少的各种功能，例如自动重新连接，事件ID和发送任意事件的功能。)

---

TLDR summary: (TLDR摘要：)

Advantages of SSE over Websockets:

(SSE相对于Websockets的优势：)

• Transported over simple HTTP instead of a custom protocol

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

• Can be poly-filled with javascript to "backport" SSE to browsers that do not support it yet.

  (可以用JavaScript进行多填充，以将SSE“反向移植”到尚不支持的浏览器。)

• Built in support for re-connection and event-id

  (内置对重新连接和事件ID的支持)

• Simpler protocol

  (更简单的协议)

• No trouble with corporate firewalls doing packet inspection

  (公司防火墙进行数据包检查没有问题)

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

  (Twitter提要更新)

• Notifications to browser

  (通知浏览器)

SSE gotchas:

(SSE陷阱：)

• No binary support

  (没有二进制支持)

• Maximum open connections limit

  (最大开放连接数限制)