前言
在前端开发中，使用 WebSocket 让客户端实时获取服务端数据变化是一种很常见的做法。而 ActionCable 是 Ruby on Rails 中一个非常实用的 WebSocket 通信库，它提供了灵活的建立客户端与服务端连接的 API，以及简单的定义服务器端的行为，让前后端开发者都能非常方便地使用。今天我们要介绍一个 npm 包 @rezonant/actioncable，它是 Ruby on Rails ActionCable 的 TypeScript 重写版本，并且支持与服务器进行双向数据传输。
安装
@rezonant/actioncable 是一个 npm 包，可以通过 npm 命令行进行安装，执行以下命令即可。
npm install --save @rezonant/actioncable
基本使用
连接服务端
首先，在客户端创建一个 CableObj 实例，该实例用于连接服务端和定义接收到服务端消息时的回调函数。
import { CableObj } from '@rezonant/actioncable';
const cable = new CableObj('ws://localhost:3000/cable');订阅频道
在服务器端，频道是连接通道和订阅的对象之间的桥梁，使用 cable.subscriptions.create 方法进行订阅继承了 Consumer 的频道。其中，第一个参数表示 频道名，第二个参数是 要进行订阅对象的 JSON。此函数最终会返回一个 Subscription 实例。
const channel = cable.subscriptions.create('RoomsChannel', {
room_id: 42
});在客户端成功订阅频道后，ActionCable 会自动向服务器发送 WebSocket 请求，并在成功建立连接后执行 initialized 回调函数。
向服务端发送消息
使用订阅频道返回的 Subscription 实例，通过执行 subscription.send 方法向服务器发送消息。这里的消息格式可以是任何 JSON 格式的数据。
channel.send({
message: 'Hello Rails!'
});接收服务端消息
在服务端广播消息后，ActionCable 会自动向客户端发送 WebSocket 消息，并在客户端执行 received 回调函数。
channel.received = (data) => {
console.log(data);
};关闭连接
在客户端不再需要连接，或者退出时需要释放资源，使用 CableObj 实例的 disconnect 方法关闭 WebSocket 连接。并且会执行 Subscription 实例的 disconnected 回调函数。
cable.disconnect();
示例代码
以下是一个完整的客户端示例代码，用于连接实时聊天室的服务端。
-- -------------------- ---- ------- ------ - -------- - ---- ------------------------ ----- ----- - --- -------------------------------------- ----- ------- - ----------------------------------------- - -------- - --- ---------------- - ------ -- - --------------------- -------- ----------------- -- -- ---- ------- -------------- -------- ------ ------------- --- -- ---------- -------------------
总结
在本文中，我们详细介绍了 npm 包 @rezonant/actioncable 的使用方法。它是 Ruby on Rails ActionCable 的 TypeScript 重写版本，提供了更方便的客户端与服务端 WebSocket 通信，并支持双向数据传输。希望本文能够帮助广大前端开发者更好地使用实时通信模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be381e8991b448d98c5