前言
前端开发中，实时性很重要。SignalR 是一个强大的实时消息传输的库，它在 ASP.NET 开发中非常流行。而 @dharapvj/ngx-signalr 这个 npm 包则是 Angular 中使用 SignalR 的最佳实践方案。
本篇文章将为大家介绍使用 @dharapvj/ngx-signalr 包构建实时通信应用的方法，希望能够对前端开发者有所帮助。
安装
安装这个包很简单，只需要在命令行中运行下面这条命令：
npm install @dharapvj/ngx-signalr --save
配置
在使用这个包前，需要先进行一些配置。
首先，在 app.module.ts 中导入 SignalRModule：
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------
-----------
-------- -
----
------------------------
--
---
--
------ ----- --------- - -然后，定义一个提供 SignalR 服务的工厂方法：
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------- ------ - ------- - ---- ------------------------ ------ -------- ---------------- ------- - ------ --- -------------------------------------- - ------ ----- ------- - --- ---------------------------------- - ----------- ------- -------- -------------- ---
上面这段代码中，使用了一个 InjectionToken 来创建 SignalR 的实例，并提供给应用程序中的其他组件使用。
接下来，需要在 app.component.ts 中注入 SIGNALR：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - -------- ------- - ---- ------------ ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ---------------------------- ------ -------- -------- - - -
至此，配置就完成了。
使用
接下来，需要使用创建的 signalr 实例来进行实时通信。
假设有一个名为 ChatHub 的 SignalR Hub，在 Angular 中可以这样使用它：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------- -------- ---------------------- - ---- ------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------ -------
---------------------------- ------- -------- -------- -
----- ----------------- - --------------------------------
----- --------- - -
----------------- --- ---------------------------------
-
---------------------------------------------------
-------------------------------------------- ------- -- -
---------------- - --------
---
--------------------------------- -- -
------------------------------------ ---------
---
-
----------------- -
----- ------------ - ---------------------------------------
---------------------------------- -------- ------------------
-
-在这个示例中，通过 createConnection() 方法创建一个 SignalR 连接。然后创建一个监听器，用于接收从 ChatHub 发送的消息。最后，将监听器注册到连接实例，并在连接成功后加入房间。
在发送消息时，使用 createHubProxy() 方法创建一个 SignalR proxy，调用 sendMessage() 方法发送消息。
结语
本篇文章介绍了使用 @dharapvj/ngx-signalr 包构建实时通信的方法，通过详细的代码示例帮助读者更好地理解实现方法。相信读者通过学习，已经掌握了使用这个包的方法，可以用它来构建更加实时的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730381e8991b448e92ba