在现代 Web 应用程序中，实时性变得越来越重要。无论是社交网站、在线聊天还是股票市场监控，用户都希望立即看到数据更新。本文将介绍如何使用 Rails 和 Server-Sent Events 技术构建实时 Web 应用程序。
Server-Sent Events
在了解如何使用 Server-Sent Events 构建实时 Web 应用程序之前，我们需要了解什么是 Server-Sent Events。
Server-Sent Events（SSE）是一种传输和接收实时事件的技术。它使用 HTTP 协议建立长连接（长轮询）并发送更新到客户端。与 WebSocket 相比，它更简单、更易于使用，对于一些不需要频繁通信的实时应用程序，SSE 是一个不错的选择。
SSE 建立在 HTTP 协议之上，并使用 text/event-stream 格式发送更新事件。一个被称为事件流 event stream 的 HTTP response 需要设置正确的 MIME 类型 text/event-stream，并使用“data: ”前缀来指定事件数据。
例如，下面是一个发送时间数据的简单事件流：
Content-Type: text/event-stream
data: {"name": "Alice", "message": "Hello"}
data: {"name": "Bob", "message": "Hi Alice!"}
每行都是一个事件。如果设置了 data 字段，SSE 客户端会收到一个更新事件。
在 Rails 中使用 Server-Sent Events
了解了 SSE 技术之后，我们将进入如何在 Rails 中使用 SSE 构建实时 Web 应用程序。
- 添加路由并设置 controller 和 action
在 Rails 中使用 SSE，需要设置路由并创建 SSE controller 和 action。
例如，我们为 SSE 创建一个名为 "updates" 的 controller 和 "stream" action ，在 routes.rb 中添加如下行：
get 'updates/stream', to: 'updates#stream'
在 controller 中定义 "stream" action：
-- -------------------- ---- -------
----- ----------------- - ---------------------
------- ----------------------
--- ------
-------------------------------- - -------------------
--- - ------------------------ ------ ---- ------ ----------
---- --
----------- ----- -------- --
----- -
---
------ -------
- ------------- --- ------- --
------
---------
---
---上述代码中，我们在 response 的 header 中设置正确的 Content-Type，并创建 SSE 对象来写入事件。循环体内，我们写入一个包含当前时间的事件。使用 sleep 让循环与客户端异步，并且在发送事件时暂停了一秒，让我们可以看到更新（每秒钟一次）。
- 客户端使用 JavaScript 和 EventSource API
在客户端，我们使用 JavaScript 和 EventSource API 来建立与服务端的 SSE 连接并接收事件。
创建一个新的 EventSource 对象，为它提供 SSE 的 URL：
var source = new EventSource('/updates/stream');然后，我们可以通过 addEventListener 监听事件，并且在接收到时间时更新网页 GUI。
source.addEventListener('updates', function(e) {
var data = JSON.parse(e.data);
document.getElementById('time').innerHTML = "Time: " + data.time;
}, false);在这段代码中，我们监听来自服务器的 "updates" 事件，并使用 JSON 解析事件数据，更新网页上的时间标签。
示例代码
下面是一个简单的示例代码，演示如何在 Rails 中使用 Server-Sent Events 实现实时更新时间：
controller：
-- -------------------- ---- -------
----- ----------------- - ---------------------
------- ----------------------
--- ------
-------------------------------- - -------------------
--- - ------------------------ ------ ---- ------ ----------
---- --
----------- ----- -------- --
----- -
---
------ -------
- ------ ------------
------
---------
---
---views：
-- -------------------- ---- -------
--- ---------------
--------
--- ------ - --- -------------------------------
---------------------------------- ----------- -
--- ---- - -------------------
----------------------------------------- - ------ - - ----------
-- -------
-------------------------------- ----------- -
------------------ -----------
---------------
-- -------
---------总结
在本文中，我们介绍了 Server-Sent Events 技术及其用于构建实时 Web 应用程序的能力。使用 Rails 和 EventSource API，我们可以很容易地实现 SSE Streaming 和接收 SSE 事件。如果你需要构建实时应用程序，使用 SSE 可能是比 WebSocket 更适合的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cebbd95b1f8cacd46f15a