在 Rails/React 应用程序中使用 Action Cable 第一部分：配置
在 Rails/React 应用程序中使用 Action Cable 第一部分：配置
这篇文章的第一部分讨论了配置一个使用 Rails API 后端和 React 前端的应用程序来使用 Action Cable
第二部分 讨论在 Rails/React 应用程序中实际实现 Action Cable
在处理我最近的项目时， 琐事游戏 ，我决定离开我的舒适区，尝试一些新的东西。这是我在熨斗学校的最后一个主要项目，我希望它是一个好的项目。我发现了 Rails 的一个内置功能 Action Cable，这让我很感兴趣。进一步的调查使我陷入了研究和实验的困境，这比我预期的要困难，有时令人难以置信的沮丧，以至于我几乎屈服了，但最终在我最终到达我需要的地方时获得了极大的回报。如果没有其他一些遇到类似问题并乐于与世界分享他们的解决方案的开发人员撰写的其他博客文章（大多数都在这个平台上），我永远不会达到这一点。我决定将我的声音加入到混音中，原因有很多，这些加起来就是一个主要原因： 我的目标不仅是提供分步教程，而且使 Action Cable 变得简单 .这是一个崇高的目标，最终由读者来决定我是否成功。我还将包含指向我认为最有用的资源的链接。
那么什么是动作电缆？解释一下（非常简单，因为这不是本文真正的重点），Action Cable 是一种将 WebSockets 集成到 Rails 应用程序中的方法。 WebSockets 是一种通信协议，在该协议中，客户端和服务器之间的持久连接保持打开状态，因此信息可以自由地来回流动，这与 HTTP 协议相反，HTTP 协议仅在响应请求时发送或接收信息。一个使用 WebSockets 的应用程序的经典现实示例是聊天应用程序。消息传递应用程序依赖于能够向用户提供实时信息，例如在线状态、键入指示符，当然还有新消息，最好不需要客户端不断发出请求（如果您好奇，称为轮询）
与 Rails 的所有其他功能一样，Action Cable 具有相当全面的功能 导轨指南 .如果是这样，那有什么难的？好吧，如果您一直在尝试在自己的项目中实施 Action Cable，那么可能是同样的问题将您带到这里。在那种情况下，我一直在那里，我真诚地希望我能帮助你。如果没有，我希望你能从我要说的内容中找到价值，并且比以前更有知识。
我（和其他人）面临的第一个可能也是最重要的挑战是 Rails 指南假设您正在使用全栈 Rails 应用程序。这意味着使用单独的 React 前端实现 Action Cable 的官方文档很少（也就是说，没有）。如果不是遇到同样问题的人写了许多博客文章，我的 Action Cable 愿望永远不会实现（我敢肯定 美国国家航空航天局 可以识别）。我将列出三个主要步骤以及我在每个步骤中遇到的一些挑战，然后我将演示如何以一种希望清晰和简单的方式使用 React 设置 Action Cable。
- 配置：Rails 指南对如何设置您的应用程序以使用 Action Cable 并不十分清楚。即使您使用实际代码做所有正确的事情，如果设置不正确，它也将无法工作。
- 在你的应用程序中实际使用 Action Cable：我发现许多讨论使用 Action Cable 和 React 的博客都有些过时，并且代码示例包括使用的类组件。作为一个学会将 React 与函数组件和 React 钩子一起使用的人，这意味着我必须破译所有代码并“翻译”它。这增加了一层额外的混乱，有时使相对简单的代码看起来比实际更复杂。这将在第二部分中介绍。
- 为生产/部署配置：需要一些额外的配置才能使 Action Cable 在生产中工作。不幸的是，在撰写本文时，免费的 Heroku 正处于垂死挣扎中。我希望找到一个替代方案，但在那之前我将不得不坚持使用 Heroku，这就是我将在这里介绍的内容。
开发配置
我会尽量保持简短和简单。如果您想了解更多信息，我将在最后链接一些资源。您要做的第一件事（实际上不一定是第一个，但这可能是最基本的步骤）是为您的 WebSocket 定义一个路由。将此添加到 /config/routes.rb ：
mount ActionCable.server => '/cable'
端点不一定是 /电缆 但这是传统的做法。
接下来，您必须将新创建的 Action Cable URL 添加到 /config/environments/development.rb .您还想禁用可能令人讨厌的安全功能（当然，仅在开发中！）。将以下行添加到 /config/environments/development.rb ：
config.action_cable.url = 'ws://localhost:3000/cable' config.action_cable.disable_request_forgery_protection = true
注意 ws 前缀而不是普通的 http .正如我所提到的，WebSockets 不使用 HTTP 协议。此外，如果您的 Rails 应用程序在 3000 以外的端口上运行，请确保在上述代码中替换正确的端口！接下来，如果您的前端和后端位于不同的目录中，您可能需要处理潜在的 CORS 问题。取消注释 宝石“架子” 在您的 Gemfile 中并运行 捆绑安装 在您的终端中。然后去 /config/initializers/cors.rb 并取消注释（或添加，如果它不存在）以下代码：
部署应用程序后，您可能希望将允许的来源更改为仅包含您的前端应用程序。
这应该足以让 Action Cable 在开发中工作。我见过有人建议在开发中使用 redis 服务器，但我觉得没有必要。
生产配置
如果您将应用程序部署到 Heroku，则需要使用 Heroku Data for Redis 插件，这是另一个免费插件，很快将不再免费 。 Heroku 关于如何设置的文章比较简单，所以请按照说明进行操作 这里 直到你获得一个 Redis URL。获得 Redis URL 后，转到 /config/cable.yml .在那里，您应该会看到如下所示的代码：
在下面 生产 ，粘贴您的 Redis URL 代替后面写的内容 网址： .接下来，前往 /config/environments/production.rb ，您应该在其中看到注释掉以下代码：
# 在主进程或域之外安装动作电缆。 # config.action_cable.mount_path = nil # config.action_cable.url = 'wss://example.com/cable' # config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]
取消注释所有内容（当然顶行除外）并更新它，使其看起来像这样：
Regex 位是增加安全性的东西，不要太担心，只需将前端的 URL 粘贴到它所属的位置就可以了。还要注意额外的's' 'ws' ，用于 Heroku 将使用的安全 WebSocket 协议。
配置 React 前端
有几种潜在的方法可以设置 React 方面。我个人的偏好是 使用上下文 .如果您不熟悉它的工作原理，您可以复制并粘贴我将在此处包含的大部分代码，它应该可以正常工作。
首先，您必须安装 npm actioncable 包。这就像运行一样简单 npm install actioncable --save 在你的 React 应用程序的根目录的终端中。 （如果您的 React 应用程序位于 Rails 应用程序目录内的客户端目录中，只需从项目的根目录运行命令并添加 --前缀客户端 .)
现在，在你的 React 应用程序中 源代码 目录，创建一个名为 语境 ，并在该文件夹中创建一个名为 电缆.js .我将首先提供此文件的代码，然后分解一些重要部分：
让我们看看这里发生了什么。我们正在创建一个 目的 叫 有线应用 并给它一把钥匙， 电缆 ，它指向一个新创建的 Action Cable 消费者。这将提供给我们所有的孩子 有线电视提供商 使用上下文的组件（在本例中为整个应用程序）。
这 创建消费者（） 函数将 Action Cable URL 作为参数，所以让我们看看我们的 actionCableUrl 多变的。它的值是使用第 7 行中那个看起来有点吓人的三元表达式来分配的。我们在这里试图解决的问题是，您的 Rails 应用程序在开发和生产中不会有相同的域。我已经看到了一些克服这个问题的方法，这对我来说是最简单的。我们正在利用一个内置的环境变量， NODE_ENV , 检查应用程序当前运行的环境并相应地调整 URL。如果您的 React 应用程序与 Rails 应用程序位于完全不同的目录中，这不一定有效。在这种情况下，您必须根据 Rails 后端当前托管的位置手动更改链接，并将其传递给 创建消费者（） .
现在我们的 电缆.js 文件已全部设置好，让我们让应用程序的其余部分访问我们的 电缆上下文 .导航到 React 应用程序的入口点（可能 /src/index.js ，具体取决于您的应用程序的设置方式）。默认情况下，它看起来像这样：
导入您的 有线电视提供商 ：
从'./context/cable'导入{ CableProvider}；
并将它包裹在您的顶级组件周围， <App /> ：
这是整个文件的样子：
现在我们的 电缆上下文 应该在我们的整个应用程序中都可用。
我相信我们已经完成了将我们的应用程序配置为使用 Action Cable，过来 第二部分 有趣的是，在我们的应用程序中实际使用 Action Cable！
配置资源
[
Redis 的 Heroku 数据
从 2022 年 11 月 28 日开始，免费 Heroku Dynos、免费 Heroku Postgres 和免费 Heroku Data for Redis® 计划将不再...
devcenter.heroku.com
](https://devcenter.heroku.com/articles/heroku-redis)
[
将带有 ActionCable 的 Rails/React 应用程序部署到 Heroku
这篇文章假设您已经在您的开发环境中成功实现了 ActionCable。如果你有…
媒体网
](/swlh/deploying-a-rails-react-app-with-actioncable-to-heroku-cb5d42f41a2a)
[
如何使用 Rails API 后端设置 ActionCable
当我开始和我的同事一起做一个项目时，我们很快就决定了我们想要什么……
媒体网
](/@the.asantiagojr/how-to-setup-actioncable-with-a-rails-api-backend-1f1807c2d908)
[
Action Cable、React Hooks、Redux Toolkit：又一个聊天应用程序——具有未读消息功能
Action Cable 是 Rails 集成 WebSockets 的方式，允许以最小的开销进行双向通信……
媒体网
](/swlh/action-cable-react-hooks-redux-toolkit-yet-another-chat-app-with-unread-messages-feature-93f5f36d4489)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
