SignalR 是一个 Microsoft 开发的实时通信库，允许服务器端推送内容到客户端。signalr.js 是 SignalR 的 JavaScript 客户端，可以通过 npm 安装和使用。本文将详细介绍如何使用 signalr.js 实现实时通信。
前置要求
- Node.js 环境
- npm 包管理器
安装及引入 signalr.js
- 在项目中安装 signalr.js：
npm install @microsoft/signalr
- 在 JavaScript 文件中引入 signalr.js：
import * as signalR from "@microsoft/signalr";
连接到 SignalR 服务器
创建 SignalR 连接需要确定服务器端地址和 hub 名称。hub 是 SignalR 中一个概念，它允许客户端与服务器交互。
const connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:5000/chatHub")
.build();以上代码创建了一个连接到 http://localhost:5000/chatHub 的 SignalR 连接。
监听连接事件
一旦连接创建完成，就可以监听连接状态和错误。
-- -------------------- ---- ------- -------------------------- -- -- - ------------------------- --- ----------------------------- -- -- - ---------------------------- --- ---------------------- ------- -- - --------------------- ---
发送消息给服务器
connection.invoke("SendMessage", message).catch((err) => console.error(err));SendMessage 是服务器上定义的方法名，可根据实际情况进行修改。
接收来自服务器的消息
connection.on("ReceiveMessage", (message) => {
console.log(message);
});ReceiveMessage 是服务器上定义的事件名，可根据实际情况进行修改。
完整示例代码
-- -------------------- ---- -------
------ - -- ------- ---- ---------------------
----- ---------- - --- ------------------------------
-----------------------------------------
---------
-------------------------- -- -- -
-------------------------
---
----------------------------- -- -- -
----------------------------
---
---------------------- ------- -- -
---------------------
---
------------------------------- --------- -- -
---------------------
---
-------------------------- -- -
----------------------- ----------
-------------- -- --------------------
-------- ------------- -
----- ------- - -----------------------------------------
-------------------------------- -------------------- -- --------------------
-以上是一个简单的 SignalR 客户端示例，展示了如何连接到 SignalR 服务器、发送消息和接收消息。通过学习本教程，你可以轻松地开始使用 SignalR 实现实时通信功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32703
