ASP.NET Core 入门教学二十二 SignalR集成

充值内卷

于 2024-09-10 00:07:20 发布

阅读量787

点赞数 9

文章标签： asp.net 后端

本文链接：https://blog.csdn.net/masonwu21/article/details/142072451

版权

SignalR 是一个开源库，用于在 ASP.NET Core 应用程序中实现实时 Web 功能。它允许服务器端代码与客户端代码进行双向通信。在本教程中，我们将学习如何在 ASP.NET Core 应用程序中集成 SignalR。

步骤 1：创建新的 ASP.NET Core 项目

首先，创建一个新的 ASP.NET Core Web 应用程序项目。打开命令提示符或终端，然后运行以下命令：

dotnet new webapp -o AspNetCoreSignalRApp

这将创建一个名为 AspNetCoreSignalRApp 的新项目。

步骤 2：安装 SignalR 客户端库

进入项目目录，然后运行以下命令以安装 SignalR 客户端库：

cd AspNetCoreSignalRApp
dotnet add package Microsoft.AspNetCore.SignalR.Client

步骤 3：配置 SignalR

在 Startup.cs 文件中，我们需要配置 SignalR。首先，确保已安装以下 NuGet 包：

dotnet add package Microsoft.AspNetCore.SignalR

然后，在 Startup.cs 文件中添加 SignalR 服务并配置路由：

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

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

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapHub<ChatHub>("/chatHub");
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

步骤 4：创建 SignalR Hub

在项目中创建一个名为 Hubs 的新文件夹。在其中创建一个名为 ChatHub.cs 的新文件，并添加以下代码：

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

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

步骤 5：创建前端页面

在 wwwroot 文件夹中创建一个名为 chat.html 的新文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Chat</title>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
</head>
<body>
    <div id="chat">
        <input type="text" id="userInput" placeholder="User">
        <input type="text" id="messageInput" placeholder="Message">
        <button id="sendButton">Send</button>
    </div>
    <ul id="messagesList"></ul>
</body>
</html>

步骤 6：创建 JavaScript 文件

在 wwwroot/js 文件夹中创建一个名为 chat.js 的新文件，并添加以下代码：

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

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();
});

步骤 7：修改 `HomeController`

在 HomeController.cs 文件中，添加一个新的操作方法以返回 chat.html 页面：

public IActionResult Chat()
{
    return View("~/Views/Home/chat.cshtml");
}

同时，更新 Index 方法以包含对 Chat 操作的链接：

public IActionResult Index()
{
    ViewData["Message"] = "Welcome to ASP.NET Core SignalR App!";
    return View();
}

步骤 8：修改 `Index.cshtml`

在 Views/Home 文件夹中，更新 Index.cshtml 文件以包含指向聊天页面的链接：

<h1>@ViewData["Message"]</h1>
<a href="/Home/Chat">Go to Chat</a>

步骤 9：运行应用程序

现在，您可以运行应用程序并在浏览器中访问 https://localhost:5001/Home/Chat。您应该能够看到聊天界面，并与其他连接的客户端进行实时通信。

这就是在 ASP.NET Core 应用程序中集成 SignalR 的基本步骤。您可以根据需要扩展此示例，例如添加身份验证、分组聊天等功能。