在前端开发中，实时通信已经成为了必不可少的一部分。SignalR 是一个扩展了 ASP.NET 的库，它提供了基于 WebSocket 技术的实时通信框架。这个框架在.NET 开发中举足轻重，也受到了许多前端开发者的关注。为了方便前端开发者使用 SignalR，@nois 开发了一款便捷的 npm 包：@nois/signalr-client。
本文将为您详细介绍 @nois/signalr-client 的使用方法。
1. 安装
您可以使用 npm 进行安装：
npm install @nois/signalr-client --save
@nois/signalr-client 还依赖于 signalr.js，所以您需要在项目中引入 signalr.js。可以使用以下代码在 html 中引入 signalr.js：
<script src="https://cdnjs.cloudflare.com/ajax/libs/signalr.js/2.4.2/signalr.min.js"></script>
2. 连接 SignalR Hub
首先，您需要连接 SignalR 的服务端。@nois/signalr-client 提供了一个默认的 HubConnection 类，在构造函数中传入服务端地址即可连接。
import { HubConnection } from '@nois/signalr-client';
const hubConnection = new HubConnection('http://example.com/hub');构造函数的第二个参数是一个可选对象，用于配置连接。您可以通过该对象的属性来配置连接，例如传递 accessToken 等。
const hubConnection = new HubConnection('http://example.com/hub', {
accessTokenFactory: () => 'myToken'
});3. 注册 Hub 方法
连接成功后，您需要注册一些方法来供服务端调用。@nois/signalr-client 提供了一个 Hub 方法注册器，您可以使用该对象来注册方法。
import { HubMethod } from '@nois/signalr-client';
hubConnection.register(new HubMethod('MethodA', data => {
console.log('Received data:', data);
}));注册器有一个 register 方法用于注册方法。该方法接受一个 HubMethod 对象作为参数。HubMethod 对象的第一个参数是一个字符串，表示方法的名称；第二个参数是一个函数，表示方法的具体实现。在服务端调用该方法时，@nois/signalr-client 会自动调用该函数并传递服务端传递的数据。
您还可以通过调用 registerAll 方法一次性注册多个方法。
hubConnection.registerAll([
new HubMethod('MethodA', data => {
console.log('Received data:', data);
}),
new HubMethod('MethodB', data => {
console.log('Received another data:', data);
})
]);4. 连接和断开连接
Hub 方法注册完成后，您需要开始连接。
hubConnection.start()
.then(() => console.log('Connected!'))
.catch(err => console.error(err));在连接成功后，您可以调用 stop 方法断开连接。
hubConnection.stop();
@nois/signalr-client 还提供了一些事件用于监听连接状态的变化。
-- -------------------- ---- ------- ------------------------------ -- -- - ----------------------------- --- ----------------------------- -- -- - -------------------------- --- -------------------------------- -- -- - ----------------------------- ---
5. 调用服务端方法
在连接成功后，您也可以调用服务端的方法。
hubConnection.invoke('MethodA', 'some data')
.then(result => console.log(result))
.catch(err => console.error(err));invoke 方法的第一个参数是一个字符串，表示服务端方法的名称；接下来的参数将传递给服务端方法。invoke 方法返回一个 Promise，resolve 函数将返回服务端方法调用的结果，reject 函数将返回错误信息。
示例代码
-- -------------------- ---- -------
------ - -------------- --------- - ---- -----------------------
----- ------------- - --- ----------------------------------------
-------------------------- -------------------- ---- -- -
--------------------- ------- ------
----
---------------------
-------- -- -
--------------------------
------------------------------- ----- ------
------------ -- --------------------
---------- -- --------------------
--
---------- -- --------------------
------------------------------ -- -- -
-----------------------------
---
----------------------------- -- -- -
--------------------------
---
-------------------------------- -- -- -
-----------------------------
---
---------------------以上就是 @nois/signalr-client 的使用方法。希望本文能够帮助您更轻松地使用 SignalR 框架开发实时通信应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572a281e8991b448e8cc6