Server-sent Events (SSE) 是一种在 Web 应用程序中实现实时数据推送的技术。在 Ruby on Rails 应用程序中，使用 SSE 可以让前端页面实时地获取来自服务器的数据更新，而不需要使用 Ajax 轮询或 WebSocket。本文将介绍在 Ruby on Rails 应用程序中使用 SSE 的最佳实践，包括如何设置 SSE 服务器和如何在前端页面中使用 SSE。
SSE 服务器的设置
在 Ruby on Rails 应用程序中，可以使用 SSE-rails gem 来设置 SSE 服务器。首先，在 Gemfile 文件中添加以下依赖：
gem 'sse-rails'
然后，在 config/routes.rb 文件中添加 SSE 服务器的路由：
Rails.application.routes.draw do get '/sse' => 'sse#stream' end
接下来，在 app/controllers/sse_controller.rb 文件中编写 SSE 服务器的控制器：
-- -------------------- ---- -------
----- ------------- - ---------------------
------- ----------------------
--- ------
-------------------------------- - -------------------
--- - ------------------------ ------ ---- ------ ---------
---- --
----------- ----- -------- --
----- -
---
------ -------
----------- ------- -------
------
---------
---
---在上面的代码中，我们使用 ActionController::Live 模块来启用流式响应，然后设置响应头的 Content-Type 为 text/event-stream，表示这是一个 SSE 服务器。接着，我们使用 SSE.new 方法创建一个 SSE 对象，并设置了 retry 和 event 参数。retry 参数表示如果客户端在接收 SSE 数据时出现错误，服务器会在 retry 秒后重新发送数据；event 参数表示每个 SSE 数据的事件名称，默认为 message。
在 loop 循环中，我们使用 sse.write 方法将数据发送给客户端。在这个例子中，我们每秒发送一次当前时间。如果发生 IOError 异常，表示客户端已经关闭连接，我们就在控制台中输出日志。
在前端页面中使用 SSE
在前端页面中使用 SSE，需要创建一个 EventSource 对象，并指定 SSE 服务器的 URL。例如，下面的代码在前端页面中使用 SSE，每秒更新一次页面中的时间显示：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------------
-------
------
-- --------------
--------
--- ------ - --- --------------------
--------------------------------- --------------- -
--- ---- - -----------------------
------------------------------------------- - ----------
---
---------
-------
-------在上面的代码中，我们创建了一个 EventSource 对象，并指定了 SSE 服务器的 URL /sse。然后，我们使用 addEventListener 方法监听 update 事件，当服务器发送数据时，就会触发该事件。在事件处理函数中，我们使用 JSON.parse 将接收到的数据解析为 JavaScript 对象，然后更新页面中的时间显示。
总结
在 Ruby on Rails 应用程序中使用 Server-sent Events 可以实现实时数据推送，避免了使用 Ajax 轮询或 WebSocket 的复杂性和性能问题。在本文中，我们介绍了在 Ruby on Rails 应用程序中使用 SSE 的最佳实践，包括如何设置 SSE 服务器和如何在前端页面中使用 SSE。通过本文的学习，你可以更好地使用 SSE 技术来实现实时数据推送，并提高 Web 应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6514392e95b1f8cacdcb213d