随着移动互联网和 Web 技术的快速发展，实时通信成为了很多应用程序必不可少的功能。传统的实时通信方案大多基于轮询（Polling）或长轮询（Long Polling），这些方案不仅效率低下，而且会产生很多不必要的流量和延迟。
Server-sent Events（SSE）是一种全新的实时通信方案，它能够在客户端和服务器之间建立一条持久连接，服务器可以通过这条连接向客户端发送数据，而客户端无需不停地向服务器发送请求。本文将介绍如何在 Ruby on Rails 应用程序中使用 SSE 实现实时通信。
SSE 原理
SSE 基于 HTTP/1.1 协议，使用普通的 HTTP GET 请求与服务器建立连接，然后服务器通过这个连接向客户端发送数据。SSE 数据格式为文本或 JSON，每个数据包以两个换行符“\n\n”结尾。客户端通过监听 message 事件来接收数据，如果连接断开，则自动重连。
实现 SSE
在 Ruby on Rails 应用程序中实现 SSE 可以使用 sinatra-sse 这个 Ruby Gem。sinatra-sse 的核心是一个名为 SSE 的类，它定义了 SSE 相关的方法，可以用于控制器的操作中。
安装 sinatra-sse
在应用程序的 Gemfile 中添加 sinatra-sse：
--- -------------- --- ------
然后运行 bundle 命令安装：
------ -------
添加 SSE 路由
在 Rails 应用程序中，需要配置 SSE 的路由。在 config/routes.rb 文件中添加以下代码：
------- ----- ----------------------------- -- --- ------ -- ----------- ---
编写 SSE 控制器
在控制器中定义 SSE 对象，设置数据来源和发送数据的方式。代码示例如下：
----- ------------- - ---------------------
------- ----------------------
--- -----
-------------------------------- - -------------------
--- - ------------------------
---- --
---- - ---------- - --------
--------------- ------ --------- - ------------
----- - - ----
---
------ -------
------
---------
---
-------
--- --------
- -------
---
---代码中的 SSE 类是 sinatra-sse Gem 中定义的，它的构造函数接受一个类型为 Sse::Response 的参数，用于发送 SSE 数据。在控制器中使用 response.stream 获取 Sse::Response 对象，然后定义一个无限循环来发送数据。get_data() 方法是一个从数据源获取数据的自定义方法，可以根据业务需要来实现。
发送的数据需要以 event: 'update' 的格式包装，这个 'update' 也可以是其他自定义的事件类型，客户端可以根据事件类型来区分不同的数据。
前端代码
在页面上添加一个用来接收 SSE 数据的 div 元素，代码示例如下：
---- ------------------
然后在 JavaScript 中使用 EventSource 对象来监听 SSE 数据，并将数据插入到 div 元素中：
--- --------- - --- -------------------- ------------------- - --------------- - --- ---- - ----------------------- --- ------ - ---------------------------------- ---------------- -- ---- - -------- --
代码中的 EventSource 对象是 JavaScript 原生的对象，用于监听 SSE 事件。onmessage 事件在接收到 SSE 数据时被触发，然后将数据插入到指定的 div 元素中。
完整示例代码
下面是一个完整的示例代码，通过浏览器打开访问 http://localhost:3000/sse 页面即可看到 SSE 实时通信效果：
- ---------------- --
------- -----
----------------------------- --
--- ------ -- -----------
---
- --------------------------------- --
----- ------------- - ---------------------
------- ----------------------
--- -----
-------------------------------- - -------------------
--- - ------------------------
---- --
---- - -------- - -----------
--------------- ------ --------- - ------------
----- - - ----
---
------ -------
------
---------
---
---
- ---------------------------- --
---- ------------------
--------
--- --------- - --- --------------------
------------------- - --------------- -
--- ---- - -----------------------
--- ------ - ----------------------------------
---------------- -- ---- - --------
--
---------总结
本文介绍了在 Ruby on Rails 应用程序中使用 SSE 实现实时通信的方法，通过 sinatra-sse Gem 和 SSE 类来发送 SSE 数据，通过 EventSource 对象来接收 SSE 数据，从而实现了高效、低延迟的实时通信。使用 SSE 可以改善很多需要实时功能的应用程序，例如在线聊天、实时监控等。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e974d5f6b2d6eab34be006