Pusher 是一个实时 Web 套件，它可以使前端应用程序具备实时数据交换和事件通知的能力。npm 包 pusher-angular 将 Pusher 与 Angular 框架集成在一起。本文将介绍如何使用该 npm 包。
步骤一：安装 pusher-angular
使用 npm 安装 pusher-angular:
npm install pusher-angular --save
步骤二：创建 Pusher 实例
在 app.module.ts 中导入 pusher-angular：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------
-----------
-------- -
----------------------
------- ---------------
-------- ------------------
--
-
--
------ ----- --------- --这里的 apiKey 和 cluster 值需要替换为你自己的值。
步骤三：使用 Pusher
我们可以在组件中注入 PusherService 并使用它来订阅频道并接收事件。例如，在组件中订阅“my-channel”频道，并处理“my-event”事件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -----------------
---------------
------ ----- ----------- ---------- ------ -
------------------- ------- -------------- --
---------- -
----- ------- - ------------------------------------
------------------------ ------ ---- -- -
--------------------- ----- ---- ------- ------
---
-
-示例代码
下面是一个完整的示例代码，演示如何使用 pusher-angular 在 Angular 应用程序中接收实时事件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -----------------
------------
--------- -----------
--------- -
------------------ ---------
----
--- ----------- ------- -- --------------------------
-----
-
--
------ ----- ------------ ---------- ------ -
--------- ----- - ---
------------------- ------- -------------- --
---------- -
----- ------- - ------------------------------------
------------------------ ------ ---- -- -
--------------------- ----- ---- ------- ------
---------------------------------
---
-
-总结
本文介绍了如何在 Angular 中使用 npm 包 pusher-angular。我们讨论了三个步骤: 安装 npm 包，创建 Pusher 实例和使用 Pusher 订阅频道。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37746