SignalR 是 Microsoft 推出的一种实时通信框架，其官方提供了多种语言的支持，其中包括前端的 JavaScript。@types/signalr-no-jquery 是 SignalR 的非 jQuery 版本的 TypeScript 类型定义，它提供了在 TypeScript 中使用 SignalR 的能力。本文将介绍如何使用 @types/signalr-no-jquery 进行前端实时通信。
安装
在使用之前，需要先安装 @types/signalr-no-jquery。可以通过以下命令进行安装：
npm install --save @types/signalr-no-jquery
使用
安装完成后，即可在 TypeScript 代码中通过 import 引入 SignalR 的模块。以下是使用方法：
import { HubConnectionBuilder } from '@microsoft/signalr';
const connection = new HubConnectionBuilder()
.withUrl('/chat')
.build();注：这里我们使用的是字符串字面量 '@microsoft/signalr'，而非旧版本 'signalr'。注意两者之间的差别。
连接
在使用 SignalR 进行实时通信前，我们需要先建立一个连接。以下是建立连接的方法：
connection.start()
.then(() => console.log('连接成功'))
.catch((err) => console.error('连接失败', err));这里使用了 TypeScript 的 Promise 语法。
接收消息
SignalR 的核心功能之一是能够实时地向客户端推送消息。以下是如何在客户端接收信息：
connection.on('ReceiveMessage', (user, message) => {
console.log(`来自 ${user} 的信息：${message}`);
});这里的 ReceiveMessage 是服务器端发送消息所带的名称，客户端接收到消息后会通过 on 方法进行响应。可以根据实际需要自行进行修改。
发送消息
页面可以通过以下方式向服务器端发送消息：
const user = '建立者';
const message = '你好，这是一条测试消息';
connection.invoke('SendMessage', user, message)
.catch((err) => console.error('发送消息失败', err));其中 SendMessage 是服务器端处理请求时应该使用的方法名，user 是消息发送者的名称，message 是要发送的消息内容。同样地，这里使用了 TypeScript 的 Promise 语法。
示例代码
以下代码构建了一个简单的聊天室。客户端将自己的名称和发送的消息内容发送给服务器端，在服务器端将其广播给所有已连接的客户端。
注：此示例中使用了 ASP.NET SignalR，但不影响实际使用。
客户端
-- -------------------- ---- -------
------ - -------------------- - ---- ---------------------
----- ---------- - --- ----------------------
-----------------
---------
------------------------------- ------ -------- -- -
--------------- ------- -----------------
---
------------------
-------- -- -
--------------------
------------------------------------------------------------ -- -- -
----- ---- - ----------------------------------------------------------
----- ------- - -------------------------------------------------------------
-------------------------------- ----- --------
------------ -- ----------------------- ------
---
--
------------ -- --------------------- ------服务器端
-- -------------------- ---- -------
----- -------------------------
----- -------
----- ---------------------------
----- ------------
----- -----------
--------- --------
-
------ ----- ------- - ---
-
------ ---- ------------------ ----- ------ --------
-
-------------------------------- ---------
-
-
-总结
本文介绍了如何使用 @types/signalr-no-jquery 进行实时通信，通过示例代码介绍了客户端和服务器端的实现方式。SignalR 是一种非常有用的前端实时通信框架，能够极大地提升页面的交互性和实时性。通过学习本文，读者可以掌握如何正确地使用 @types/signalr-no-jquery，并能够在实际项目中进行应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc1f1b5cbfe1ea0611fa2