SSE（Server-Sent Events）是一种实时数据传输技术，它允许服务器向客户端发送自定义的事件。SSE 适合于实现一些实时的 Web 功能，如在线聊天、日志记录、地理位置跟踪和金融信息更新等。Rails 提供了 ActionCable 来实现实时通信，但是 SSE 更加简单易用，下面来介绍如何在 Rails 应用中使用 SSE。
SSE 简介
SSE 是基于 HTTP 协议的一种实时通信技术，它可以通过 HTTP 长连接在服务器和客户端之间传输数据。相比 WebSocket，SSE 更轻量级，也更容易实现。SSE 的工作原理如下：
- 客户端通过 HTTP 请求一个 SSE 端点。
- 服务器返回一个 Content-Type 为 text/event-stream 的响应。
- 服务器不断发送事件数据，每个事件以 \n\n 结尾。
- 客户端接收到事件数据并处理。
每个事件包含三个部分：事件类型、数据和 ID。其中事件类型是一个字符串，指定当前事件的类型；数据是一个字符串，可以是任何格式的数据；ID 是一个可选字段，用于标识当前事件。
SSE 实现
在 Rails 应用中使用 SSE 需要先定义一个 Controller，然后在 Controller 中实现 SSE 端点。下面来看一个简单的例子：
-- -------------------- ---- -------
----- ---------------- - ---------------------
------- ----------------------
--- -----
-------------------------------- - -------------------
--- - ------------------------
---- --
----------- ----- ------------ ----- ------------- --
----- -
---
------ -------
- ------ ------------
------
---------
---
---这个 Controller 当请求 /events 时，会返回一个 SSE 端点。在这个例子中，我们使用了 ActionController::Live 模块来提供长连接功能。同时设置 Content-Type 为 text/event-stream，然后使用 SSE.new(response.stream) 创建一个 SSE 对象，这个对象会自动将事件数据写入 response。在无限循环中，发送一个心跳事件，每秒发送一次。当客户端断开连接时，捕获 IOError 异常。
SSE 使用
要使用 SSE，只需要在客户端创建一个 EventSource 对象即可：
const source = new EventSource('/events');
source.addEventListener('heartbeat', (event) => {
const data = JSON.parse(event.data);
console.log(`Heartbeat at ${data}`);
});在这个例子中，我们创建了一个 EventSource 对象，指定了 SSE 端点为 /events。然后调用 addEventListener 方法，监听事件类型为 heartbeat。当服务器发送一个 heartbeat 事件时，会调用回调函数，解析事件数据并打印到控制台中。
SSE 注意事项
- SSE 端点必须返回 text/event-stream 类型的响应。
- SSE 数据必须以 \n\n 结尾。
- SSE 端点不能使用缓存，每次请求都应该返回最新的数据。
- SSE 不支持双向通信，只能由服务器向客户端发送事件数据。
总结
SSE 是一种简单实用的实时通信技术，在 Rails 应用中的使用也非常方便。通过 SSE，我们可以很容易地实现实时聊天、日志记录和地理位置跟踪等功能。当然，如果我们需要更复杂的实时通信功能，可以考虑使用 ActionCable。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f8144cf6b2d6eab3038c8a