前言
在前端开发中，如果需要实现前后端的数据通信，可以使用 SignalR 这一技术。SignalR 提供了一个类似于 websocket 的实时通信框架，但其支持多种协议，其使用也十分简单。但是，在 SignalR 的官方使用文档中，默认会涉及到 jQuery 的使用，但是如果你的项目中并不需要 jQuery，那么这样使用就显得有点多余了。这时，@barryzhan/signalr-no-jquery 这个 npm 包就可以派上用场。这个 npm 包是 SignalR 基于纯原生 JavaScript 实现版本。接下来我将介绍如何使用它。
安装 @barryzhan/signalr-no-jquery
在终端中输入以下命令来安装它：
npm i @barryzhan/signalr-no-jquery --save
使用 @barryzhan/signalr-no-jquery
1. 引入 @barryzhan/signalr-no-jquery
在使用之前，需要将它引入到你的项目中。这可以通过以下方式来实现：
import { signalR } from '@barryzhan/signalr-no-jquery'const signalR = require('@barryzhan/signalr-no-jquery')2. 配置 SignalR 连接
当 @barryzhan/signalr-no-jquery 被引入之后，就可以配置需要连接的 SignalR 站点 URL，以及可选的日志记录。这可以通过以下方式来实现：
signalR.hubConnection('https://example.com/', { logging: true });如果你需要使用 SignalR 的某个特定功能，则可以选择将相应的类从 @barryzhan/signalr-no-jquery 包中导入。例如，在本文中，我们将介绍 SignalR 的 hub 用法。在这种情况下，我们需要使用 signalR.hubConnection。然后，要使用 hub，需要将其导入：
import { hubConnection } from '@barryzhan/signalr-no-jquery'const hubConnection = require('@barryzhan/signalr-no-jquery').hubConnection;3. 使用 SignalR hub
要使用 SignalR hub，首先需要定义一个 hub：
const chatHub = hubConnection.createHubProxy('chatHub');然后，可以绑定 hub 的客户端方法：
chatHub.on('addMessage', (username, message) => {
console.log(`${username}: ${message}`);
});接下来，就可以调用 hub 的服务器端方法：
chatHub.invoke('sendMessage', message);4. 结束 SignalR 连接
在与 SignalR 的通信结束时，可以关闭连接：
signalR.hubConnection.stop();
示例代码
-- -------------------- ---- ------- ------ - -------- ------------- - ---- ------------------------------- ----- ---------- - --------------------------------------------- - -------- ---- --- ----- ------- - ---------------------------------------- ------------------------ ---------- -------- -- - ------------------------- ------------- --- -------------------------- -- - ----------------------------- ------ --------- -------------- -- - ------------------- ------------- -- - ------------------ ---
结论
通过学习本文，你现在已经学会了如何使用 @barryzhan/signalr-no-jquery 这个 npm 包来实现 SignalR 的纯原生 JavaScript 实现版本。这对于那些不需要在项目中使用 jQuery 的开发者来说是非常有用的。我希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b48c6eb7e50355dbf53