在现代的 Web 开发中，使用实时的 WebSockets 已成为一个必须的功能。Rails 的 ActionCable 是一个基于 WebSocket 技术的实时通信库，用于构建实时的 web 应用。
然而，在开发过程中会遇到一个问题：由于 ActionCable 的原因，他只能通过 Ruby 语言进行构建，因此如果你在前端使用其他语言，就没办法使用 ActionCable 了。不过，现在有一个 npm 包 actioncable-patch 来解决这个问题，它提供了一个能够与 Rails 的 ActionCable 进行通信的 JavaScript 客户端。本文将详细介绍如何使用这个 npm 包。
1. 安装
使用 npm 包管理器安装 actioncable-patch:
--- ------- ----------------- ------
2. 使用
首先需要使用 ActionCable.createConsumer 创建一个 WebSockets 连接对象。
------ ----------- ---- -------------------- ----- ----- - --------------------------------------------------------
上面的代码将创建一个 WebSockets 连接，并通过 ws://localhost:3000/cable 地址连接到 Rails 服务器中的 ActionCable 服务。
现在，你已经成功地创建了一个连接对象，接下来需要创建订阅和处理消息。以下是 ActionCable.subscribe 方法用法：
----- ------------ - ---------------------------
- -------- --------------------------- ----- ------------ --
-
---------- -------- -- ---
------------- -------- -- ---
--------- -------- ------ -
--------------------- ------- ------
--
--------- -------- -- --
-
--这个方法将创建一个订阅并指定处理函数。接下来，你需要为你的 Rails 应用程序中的频道创建订阅。以下是 Rails 的例子：
- ----------------------------------------------------
----- ------------------------------- - -------------------------
--- ----------
----------- ------------
---
- ---
---最后，在您的前端代码中使用以下的代码将数据发送到 Rails:
------------------- -------- ------ ------ ---
3. 示例代码
以下是一个简单的示例，它将一个文本框中的文本内容发送到 Rails，然后在一个 div 中显示服务器返回的消息：
---- ---- ---- ---- ---
------ ----------- --------------
---- --------------------------
--------
------ ----------- ---- --------------------
----- ----- - --------------------------------------------------------
----- ------------ - ---------------------------
- -------- --------------------------- ----- ------------ --
-
--------- -------- ------ -
--------------------------------------------------- - -------------
-
-
--
------------------------------------------------------------ - -- -
------------------- -------- -------------- ---
---
---------4. 小结
通过 npm 包 actioncable-patch，我们已经可以在前端使用 JavaScript 与 Rails 的 ActionCable 进行通信了。使用 ActionCable，我们可以构建实时任务协作、多人游戏、聊天应用等功能，这些都需要实时通信。这个库的 API 还相对简洁，易于理解和开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ebd81e8991b448dc731