WebSockets与Server-Sent事件/ EventSource

WebSocket和Server-Sent Events都可以将数据推送到浏览器。 对我来说，他们似乎是相互竞争的技术。 他们有什么区别？ 你什么时候select一个呢？

Websockets和SSE（Server Sent Events）都能够将数据推送到浏览器，但它们不是竞争性的技术。

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

SSE连接只能将数据推送到浏览器。 在线股票报价或更新时间线或订阅的推文是可以从SSE受益的应用的好例子。

在实践中，因为所有可以用SSE完成的事情都可以用Websockets来完成，所以Websockets得到了更多的关注和热爱，并且更多的浏览器支持Websockets而不是SSE。

但是，对于某些types的应用程序来说，这可能是矫枉过正的，后端可能更容易使用SSE等协议来实现。

此外，SSE可以被复制到较旧的浏览器中，而这些浏览器本身不支持JavaScript。 在Modernizr github页面上可以findSSE polyfills的一些实现。

陷阱：

  • SSE受限于打开连接的最大数量，打开各种选项卡时，特别痛苦，因为每个浏览器的限制，并设置为一个非常低的数字（6）。 这个问题在Chrome和Firefox中被标记为“无法修复”
  • 只有WS可以传输二进制数据和UTF-8，SSE仅限于UTF-8。 （感谢Chado Nihi）

HTML5Rocks在SSE上有一些很好的信息。 从该页面：

服务器发送的事件与WebSockets

为什么你会select通过WebSockets发送服务器事件？ 好问题。

SSE一直处于阴影之中的原因之一是因为后来的WebSockets等API提供了更丰富的协议来执行双向全双工通信。 拥有双向频道对游戏，短信应用程序等事物更具吸引力，以及在两个方向都需要接近实时更新的情况下。 但是，在某些情况下，数据不需要从客户端发送。 你只需要一些服务器动作的更新。 一些例子是朋友的状态更新，股票报价，新闻提要或其他自动数据推送机制（例如更新客户端Web SQL数据库或IndexedDB对象存储）。 如果你需要发送数据到服务器，XMLHttpRequest永远是朋友。

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

TLDR总结：

SSE优于Websockets的优势：

  • 通过简单的HTTP而不是自定义协议传输
  • 可以用JavaScript填充到“backport”SSE到不支持它的浏览器。
  • 内置支持重新连接和事件ID
  • 更简单的协议

Websockets比SSE的优势：

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

SSE的理想用例：

  • 股票股票stream媒体
  • twitter feed更新
  • 通知浏览器

SSE陷阱：

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

根据caniuse.com：

  • 全球90％的用户本身支持WebSocket
  • 全球84％的用户本地支持服务器发送的事件

您可以使用仅客户端的polyfill将SSE的支持扩展到许多其他浏览器。 WebSockets的可能性较小。 一些EventSource填充：

  • Remy Sharp的EventSource没有其他库依赖项（IE7 +）
  • jQuery.EventSource由Rick Waldron提供
  • Yaffle的 EventSource （取代原生的实现，规范跨浏览器的行为）

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

了解更多关于SSE的信息：

  • HTML5 Rocks文章
  • W3C规范（ 发布版本 ， 编辑草案 ）

了解更多关于WebSockets的信息

  • HTML5 Rocks文章
  • W3C规范（ 发布版本 ， 编辑草案 ）

其他区别：

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

Opera，Chrome，Safari支持SSE，Chrome，Safari支持SSE里面的SharedWorker Firefox支持XMLHttpRequest，readyState交互，所以我们可以为Firefox做EventSource polyfil

Websocket VS SSE

networking套接字（Web Sockets） –这是一个通过单个TCP连接提供全双工通信信道的协议。 例如服务器和浏览器之间的双向通信由于协议更复杂，服务器和浏览器必须依赖于socket.sio的websocket库 

 Example - Online chat application.

SSE（服务器发送事件） –服务器发送事件时，通信只能从服务器进行到浏览器，浏览器不能向服务器发送任何数据。 这种通信主要用于只需要显示更新的数据，然后服务器在数据更新时发送消息。 例如，服务器到浏览器之间的单向通信。 这个协议不那么复杂，所以不需要依靠外部库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

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

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

这里是关于networking套接字和服务器发送事件之间的区别的讨论。 从Java EE 7开始，一个WebSocket API已经是规范的一部分，而且似乎服务器发送的事件将在下一个版本的企业版中发布。

Interesting Posts