在现代化的 Web 应用中，我们通常需要使用 WebSockets 来实现实时通信。而 Action Cable 则是 Ruby on Rails 中很流行的实现 WebSocket 的方案。对于使用 Ember.js 开发的应用，我们可以使用 @jasonmit/ember-cable 这个 npm 包来集成 Action Cable。
本文将介绍如何使用 @jasonmit/ember-cable 实现 WebSocket 功能，并提供示例代码以帮助读者更好的理解该包的使用方法。
安装
使用 npm 进行安装：
npm install @jasonmit/ember-cable
或使用 yarn：
yarn add @jasonmit/ember-cable
配置
要使用 @jasonmit/ember-cable，我们需要使用如下方式在 app.js 中导入：
import Application from '@ember/application';
import { initialize } from 'my-app/initializers/ember-cable';
...
export default class MyApp extends Application {
// 以下为原有代码
}
initialize();然后，在你的 config/environment.js 中添加以下代码：
-- -------------------- ---- -------
-------------- - --------------------- -
--- --- - -
---
------------- -
---- ----------------------------
--------------- ---
-
---
--
---
------ ----
--其中 url 是 Action Cable 服务的地址，allowedSenders 可选，用于设置允许访问 Action Cable 的客户端。
使用
你可以使用 ember-cable 提供的 service 来连接到服务端，并订阅某个 channel：
-- -------------------- ---- -------
------ ----- ---- -----------------------
------ - ------ -- ------- - ---- -----------------
------ ------- ----- ---------- ------- ----- -
-------- ------
------- -
----- ------- - ---------------------------------------------- -
-------------- -
------------------
-
---
------ - ------- --
-
-- ----
-上面的代码中，我们在 IndexRoute 中使用了 @ember/service 从 cable service 中获取 chat channel 的实例，并监听该 channel 。一旦有新的信息发送到 chat，就会将信息打印到控制台。
总结
@jasonmit/ember-cable 是一个非常易用的 WebSocket 框架，可以方便地在 Ember.js 应用中实现实时通信功能。本文详细介绍了该技术的使用方法和示例代码，希望能帮助读者更好地掌握该框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e244377