前言
npm 作为现代化 JavaScript 应用程序的软件包管理器，在前端开发中使用非常广泛。其中，Nativescript 是构建跨平台原生应用程序最受欢迎的解决方案之一，同时它也具有许多支持的 npm 包帮助开发人员提高生产力。
actioncable 是 Ruby on Rails 框架中默认集成的 WebSocket 解决方案，但是它也能够被用于其他语言和框架中。在我们的项目中，我们使用了 actioncable 作为我们前端与后端之间进行实时通讯的工具。
Nativescript-ActionCable 是一个可以让 Nativescript 应用程序使用 actioncable 的 npm 包。本文将会介绍如何使用该 npm 包。
安装
你可以使用 npm 安装 Nativescript-ActionCable：
npm install nativescript-actioncable --save
然后在你的应用程序中导入：
import { ActionCable } from 'nativescript-actioncable';
使用指南
使用 Nativescript-ActionCable，你可以轻松地连接到 actioncable 服务器、订阅频道、发送消息，以及断开连接。
首先，我们需要创建一个 connection 对象，这个对象是一个连接到 actioncable 服务器的代理。我们需要传递连接 URL 及连接参数给这个对象。
-- -------------------- ---- ------- ----- ---------- - ----------------------------- ---------------------------- - -------- - -- ---- ------ ---- ------- -- ------------ - -- ---- ------ ----- ------ -- ---------- ---- - --展开代码
然后，我们可以使用这个连接对象订阅一个频道：
const channel = connection.subscribe('ChatChannel', { received(data) { console.log(data); } });
订阅成功后，我们就可以通过 channel 对象来发送和接收消息了。在这个例子中，我们监听接收到的数据并打印到控制台。在使用该命令行命令并打开服务端口的情况下，发送 WebSocket 消息应会立即显示在您的应用程序终端上。
如果我们不再需要该连接和频道，我们可以关闭它们：
// 关闭频道 channel.unsubscribe(); // 关闭连接 connection.disconnect();
示例代码
在下面的示例中，我们将使用 Nativescript-ActionCable 创建一个简单的聊天室应用程序。
服务端
我们使用 Ruby on Rails 框架创建一个简单的 actioncable 服务器。你可以通过执行以下命令创建 Rails 应用程序：
rails new chat-app --api
这个命令会在 chat-app 文件夹中创建一个 Rails 应用程序。
接下来，我们创建一个简单的 Messages 控制器，它将返回我们之前聊天框中已发送的所有消息。
class MessagesController < ApplicationController def index messages = Message.all render json: messages end end
然后，我们创建 ChatChannel。在聊天室中，频道用于接收并传递来自客户端的消息，服务器会将其发送给其他订阅了此频道的客户端。
-- -------------------- ---- ------- ----- ----------- - ------------------------- --- ---------- ----------- ------ --- --- ----------- ------- - -------------------- ---------------- ---------------------------- ------- -------- ------------ --- ---展开代码
客户端
我们使用 Nativescript-ActionCable 创建一个简单的客户端应用程序。
-- -------------------- ---- ------- -- ------ ------ - ----------- - ---- --------------------- ------ - ----------- - ---- --------------------------- ------ - ------------- - ---- -------------------- ------ - -------- - ---- -------------- ----- ---------- - ----------------------------- ---------------------------- - -------- - -- ---- ---- ------- -- ------------ - -- ---- ----- ---------- -- ---------- ---- - -- ----- -------- - --- ----------- ----------------------- - --- -------------------------- ----------------- ------- -- -- -------- ---展开代码
在这个例子中，我们通过 createConnection() 创建了一个连接。我们使用了 URL 支持 WebSocket 协议的端口用来连接到我们的服务器，以及一些可选的参数。
-- -------------------- ---- ------- -- ------------------ ------ - --------------- - ---- --------------------- ------ - ----------- - ---- --------------------------- ------ ----- ------------- - ----------------------- - --------------- - ----------- ------------- - --- -------------------- ----- ------- - ----------------------------------- - -------------- - --------------------------------- - --- ------------- - -------- - ------------- - ------------------------------ - ------- --- - -展开代码
在这个例子中，我们创建了一个聊天视图模型，它的职责是向聊天框中添加和删除消息。在这个构造函数中，我们创建了一个 ObservableArray 数组来存储我们的消息。我们还通过 subscribe() 方法订阅了 ChatChannel，并设置了 received() 方法来监听我方其他订阅了 ChatChannel 的客户端发来的消息。
我们使用 perform() 方法发送了 speak 消息，并发送最新的消息到所有订阅了 ChatChannel 的应用程序。
我们创建了一个 ChatPage，其职责是向用户显示聊天框和滚动到最新消息。在这个例子中，我们只展示了聊天框，让用户可以在应用程序中发送和接收实时的消息。
-- -------------------- ---- ------- -- ------------ ------ - ----- ------------ ---------- ---------- - ---- --------------------- ------ - ------------- - ---- -------------------- ------ ----- -------- ------- ---- - ------------- - -------- ----- ----------- - --- -------------- ----- --------- - --- ------------ -------------- - --- -------------- - -------------- --------------------------- -- -- - ----- ------- - ---------------------- -- --------- - ----------------------------- -------------- - --- ----------------------------- - --- ----- ---------- - --- ------------- ----------------- - ----------------------------------------- - ----- ---------------------- - ----------- ----- ------------- - --- -------------- -------------------- --------------- ----------- --------------- -------- ------- ----- --- -------------------- - ------- -------------------------------- ---- --------------------------------- ---- ----- ------------ - ------- ------------------ ---------------------------------- -------------------------- - ------------- ----------------------------- - ------- ------------------ - -------------- --------------------------------- -------------------------------- ------------ - ------------ - --- ----------- - ------ -------------------- - ------------------- - ----- ------- - ------------------- - ---------------------------------------------------------------------- - -- ------ ---- - -------- - -展开代码
这个 ChatPage 渲染了一个聊天框和一个输入框，用户可以在其中输入消息并发送。在构造函数中，我们创建了一个 TextField 组件，用户可以在其中输入消息。我们添加了一个 returnPress 事件监听器，当用户按下“返回”键时，我们将发送消息。我们还创建了一个 ObservableArray，并使用它来绑定聊天框中的消息。我们使用了 Label 组件来为每个消息添加样式。
在主函数中，我们创建了一个聊天页面对象和一个与其关联的 ViewModel，并将该 ViewModel 传递给页面的绑定上下文。我们使用 run 方法来创建当前应用程序的界面。
Application.run({ create: () => chatPage });
最后，我们打开浏览器并输入 http://localhost:3000/messages，我们可以使用 Postman 这样的 API 开发工具测试消息的发送和接收。
总结
本文的目的是帮助您开始使用 Nativescript-ActionCable，它是 Nativescript 应用程序中的一个方便的 WebSocket 库。在聊天室应用程序中，我们通过 Nativescript-ActionCable 使用了 actioncable 协议，以实时接收和发送消息。
我们介绍了如何使用 Nativescript-ActionCable 创建连接、订阅频道、发送事件、接收消息以及断开连接等操作。此外，我们还提供了示例代码以帮助您了解如何使用 Nativescript-ActionCable。祝您好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/157395
