在前端开发中，Pusher 是一种流行的实时通信工具。而 ember-pusher-guru 则是一种使用 Pusher 的 npm 包，它提供了给 Ember 应用添加实时通信功能的便捷方式。本文将介绍 ember-pusher-guru 的使用方法，帮助读者轻松地在自己的项目中使用它。
安装
首先，借助 npm 进行安装：
npm install ember-pusher-guru --save
配置
在使用 ember-pusher-guru 之前，我们需要对它进行配置。在项目中，创建一个配置文件，在其中添加以下内容：
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
-- ---
------- -
------ --------------
---- -----------
------- --------------
-------- ---------------
---------- ----
-
-- ---
--
-- ---
------ ----
--其中，你需要将 your-app-id、your-key、your-secret、your-cluster 替换为自己在 Pusher 网站上注册获得的相应值。
使用
在进行了配置之后，我们便可以开始使用 ember-pusher-guru 了。首先，在你需要进行实时通信的组件中引入该库：
import Pusher from 'ember-pusher-guru/utils/pusher';
接下来，创建一个 pusher 实例，你可以指定需要订阅的事件和对应的回调函数：
const pusher = Pusher.create({
channel: 'your-channel',
event: 'your-event',
callback: data => {
// 处理收到的数据
}
});其中，your-channel 和 your-event 分别为需要订阅的 Pusher 事件的名称，callback 则是在收到数据时执行的回调函数。
最后，我们需要在组件销毁时停止该实例的订阅：
pusher.unsubscribe();
示例代码
下面是一个完整的使用示例，它演示了如何在组件中使用 ember-pusher-guru 进行实时通信：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ ------ ---- ---------------------------------
------ ------- ------------------
----------- -
--------------------------
----- ------ - ---------------
-------- ------------
------ --------------
--------- ---- -- -
----- -------- - ---------------------
----------------------------------
-------------------- ----------
-
---
------------------ --------
--
-------------------- -
--------------------------
----- ------ - -------------------
---------------------
--
-------- -
------------- -
----- ----- - ------------------------------------
----- ----- - -------------------
-- ------- -
----- -------- - ---------------------
--------------------------- -------------- - -------- ----- ---
----------- - ---
-
-
-
---在该示例中，我们创建了一个聊天室的组件，它在渲染时创建了一个 Pusher 实例，当接收到新消息时将其添加到界面上，并在组件销毁时取消了订阅。同时，我们还在发送消息的操作中使用了同一个 pusher 实例的 trigger 方法向所有已订阅该事件的客户端发送了新消息的通知。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb59