SignalIR入门

简介

SignalR 是一个用于构建实时 Web 应用程序的开发工具和库，它可以让服务器端代码与客户端代码之间建立双向通信。SignalR 的中文解释可以理解为 “信号传输” 或 “信号通信”。

SignalR 提供了一种简单的方式，让服务器可以向客户端发送实时更新，而无需客户端不断地发出请求。这使得开发者可以创建具有实时特性的应用程序，如在线聊天、实时游戏、协作工具等。SignalR 可以在多种平台和编程语言中使用，包括 .NET、JavaScript、Java、Python 等，因此它在跨平台的实时通信方面非常有用。

SignalR 使用不同的传输协议，如 WebSockets、Server-Sent Events（SSE）、长轮询等，以确保在各种环境中都能提供实时性能。无论是在 Web 应用、移动应用还是桌面应用中，SignalR 都为开发者提供了强大的实时通信功能。这使得用户可以在应用程序中获得即时的更新，而不必等待页面刷新或手动触发操作。

教程文档

教程

1.创建项目

在“配置新项目”对话框中，为“项目名称”输入 SignalRChat。 请务必将项目命名为 SignalRChat（包括匹配大写），以便命名空间与教程中的代码匹配。

2.添加 SignalR 客户端库

1. 为“提供程序”选择“unpkg”
2. 对于“库”，请输入 @microsoft/signalr@latest。
3. 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。
4. 将“目标位置”设置为 wwwroot/js/signalr/。
   选择“安装” 。

3.创建 SignalR 中心

在 SignalRChat 项目文件夹中，创建 Hubs 文件夹。
在 Hubs 文件夹中，使用以下代码创建 ChatHub 类：

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

4.配置 SignalR

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();//添加此服务

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");//添加此服务

app.Run();

5.添加 SignalR 客户端代码

使用以下代码替换 Pages/Index.cshtml 中的内容：

@page
    <div class="container">
        <div class="row p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <hr />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

在 wwwroot/js 文件夹中，使用以下代码创建 chat.js 文件：

//这是 JavaScript 严格模式的声明，它有助于捕获代码中的潜在错误，并提高代码质量。
"use strict";

//这是创建 SignalR 连接的关键部分。它使用 SignalR 客户端库中的 HubConnectionBuilder 
//来创建连接对象。withUrl 方法指定了连接的目标 URL，这里是 "https://localhost:7124/chatHub"，
//这应该是你的 SignalR 服务器上定义的 Hub 的地址。
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//这一行代码将 HTML 页面中 id 为 "sendButton" 的按钮设置为禁用状态，
//以防止在连接建立之前点击按钮。
document.getElementById("sendButton").disabled = true;

//这是一个事件处理程序，用于处理从服务器端接收到的消息。
//当服务器端使用 SendMessge 方法发送消息时，这个事件处理程序会被触发，
//然后在页面上创建一个新的列表项（li），显示接收到的消息。
connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    li.textContent = `${user} says ${message}`;
});

//这是用于建立连接的代码。connection.start() 方法尝试连接到服务器，
//如果连接成功，则启用 "sendButton" 按钮，并在连接失败时处理错误。
connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

//这段代码为 "sendButton" 按钮添加了一个点击事件监听器，
//当用户点击按钮时，它会从页面上获取用户输入的用户名和消息文本，然后使用 
//connection.invoke("SendMessage", user, message) 
//来调用服务器上的 SendMessage 方法，将消息发送给服务器。
document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

效果

从地址栏复制 URL，打开另一个浏览器实例或选项卡，并在地址栏中粘贴该 URL。
选择任一浏览器，输入名称和消息，然后选择“发送消息”按钮。
两个页面上立即显示名称和消息。