首页 > 编程语言 >使用 .NET Core 7 和 SignalR 构建实时聊天应用程序

使用 .NET Core 7 和 SignalR 构建实时聊天应用程序

时间:2024-11-11 14:16:40浏览次数:5  
标签:Core 聊天 创建 应用程序 SignalR 实时 NET 客户端

动动你可爱的小手,请关注下本人公众号,继续为您提供更多原创技术文章。谢谢给为的支持

SignalR 是一个 ASP.NET 库,它支持实时 Web 功能,允许服务器立即将更新推送到客户端,从而提高应用程序的效率和响应能力。它通过简化通信和支持各种传输协议,对于聊天应用程序、实时仪表板和协作工具中的即时更新非常有用。实时通信可以提高用户参与度,减少资源密集型轮询,并且对于在线游戏和金融交易平台等交互式应用程序至关重要,可提供无缝和动态的用户体验。

本文将介绍如何使用 .Net Core 7 和 SignalR 构建实时聊天应用程序。

什么是 SignalR?

  • SignalR 是一个支持实时 Web 功能的 ASP.NET 库。SignalR 使用 WebSockets 在服务器和客户端之间建立持久连接(如果可用)。如果 WebSockets 不可用,SignalR 将依赖其他合适的传输协议(如服务器发送事件或长轮询)来确保广泛的兼容性。

  • SignalR 功能的基础基于“Hubs”,它们是高级管道 API,使服务器能够在连接的客户端上调用方法,反之亦然。开发人员创建 Hub 类,其中包含可由客户端调用的方法。然后,客户端使用 JavaScript 调用这些方法,SignalR 处理通信详细信息。

  • SignalR 支持对连接进行分组,这允许将消息发送到已连接客户端的特定子集。这对于聊天室等场景非常有用,因为只有某些用户应该接收特定消息。

  • SignalR 控制连接生命周期,并在连接丢失时自动处理重新连接。这可确保服务器和客户端可靠地通信,而无需强迫开发人员执行任何额外操作。

  • 服务器可以使用 SignalR 提供的技术自动将更新推送到客户端。因此,客户端可以更有效地进行实时通信,并减轻服务器负担,而无需向服务器查询更新。

使用 .NET Core 7 和 SignalR 创建实时聊天应用程序的步骤

第 1 步:设置项目

  • 让我们从创建一个新的 ASP.NET Core 7 项目开始。在 Visual Studio 中,打开后选择“创建新项目”。为项目命名,然后选择“ASP.NET Core Web Application”作为项目类型。

  • 接下来,选择项目模板“Web Application”并确保未选中“Enable Docker Support”。要开始创建项目,请单击“创建”。

Dotnet 项目设置

  • 创建项目后打开“Program.cs”文件,然后添加以下代码以添加 SignalR:
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
builder.Services.AddSignalR();
builder.Services.AddControllersWithViews();

</code></span></span>
  • 现在,将 SignalR 客户端库添加到我们的项目中。

  • 在“解决方案资源管理器”中,右键单击项目,然后选择“添加>客户端库”。

添加客户端库

  • 在 Add Client-Side Library 对话框中:
  1. 为 Provider 选择 unpkg。
  2. 输入 @microsoft/signalr@latest 作为库。
  3. 选择 Choose specific files(选择特定文件),展开 dist/browser 文件夹,然后选择 signalr.js 和 signalr.min.js。
  4. 将 目标位置 设置为 wwwroot/js/signalr/。
  5. 选择 Install (安装)。

客户端库

第 2 步:创建 Hub

  • 创建一个名为 Hubs 的文件夹。
  • 要创建新文件夹,请右键单击解决方案,然后单击添加,然后单击添加文件夹。(添加>添加文件夹)。

枢纽

  • 将此新创建的重命名为 Hubs。
  • 客户端和服务器之间的每个实时通信都将通过 Hub 进行管理。在我们项目的 “Hubs” 文件夹中,让我们构建一个名为 “ChatHub” 的新类。

添加集线器

flood 类替换为以下代码:

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace YourProjectName.Hubs
{
    public class ChatHub : Hub
    {
        public async Task Message(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
            //this will be listen by client using javascript.
        }
    }
}
</code></span></span>
  • 这将创建从 SignalR Hub 继承的新 Hub 类。我们定义了名为 Message 的方法,它接受两个字符串参数 user 和 message ,SendAsync 方法将消息发送到所有连接的客户端。

  • 但是,在使用 ChatHub 之前,我们必须在 Program.cs 中对其进行配置

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>//...
app.MapHub<ChatHub>("chatHub");
//...
</code></span></span>

注意:此行通过将“/chatHub”URL 映射到 ChatHub 类,将 SignalR 中间件配置为使用聊天中心。

第 3 步:创建 UI

  • 实现 Chat Hub 后,我们仍然需要为我们的聊天程序设计用户界面 (UI)。为了在本教程中进行实时通信,将使用带有一些 JavaScript 代码的基本 HTML 页面。

主 UI 页面

将以下代码添加到项目的“index.cshtml”文件中:

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>@{
Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>
        SignalR Chat
    </title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.13/signalr.min.js">
    </script>
</head>

<body>
    <div>
        <input id="username" placeholder="username" 
               type="text" />
        <input id="message" placeholder="message"
               type="text" />
        <button id="send-btn">
            Send
        </button>
    </div>
    <div id="chatBox">
    </div>
    <script>
        let connection = new signalR.HubConnectionBuilder()
                                    .withUrl("/chatHub").build();
        connection.on("ReceiveMessage", function (User, Message) {
            let encodedUser = $("<div />").text(user).html();
            let encodedMsg = $("<div />").text(message).html();
            $("#chatBox").append("<p><strong>" + encodedUser + "</strong>: " + encodedMsg + "</p>");
        });

        $("#send-btn").click(function () {
            let our_user = $("#username").val();
            let Message = $("#message").val();
            connection.invoke("Message", our_user, Message);
            $("#message").val("").focus();
        });


        connection.start().then(function () {
            console.log("Connected!");
        }).catch(function (err) {
            console.error(err.toString());
        });
    </script>
</body>

</html>
</code></span></span>

注意:此代码生成一个简单的用户界面 (UI),其中包含一个 “Send” 按钮、一个消息输入表单和一个用户名字段。此外,还会创建一个 ID 为“chatBox”的 div,这是显示聊天消息的位置。

  • 使用 URL“/chatHub”(我们在“Startup.cs”文件中映射到 ChatHub 类),我们在 JavaScript 代码中建立新的 SignalR 连接。每次将消息从服务器发送到客户端时触发的 “ReceiveMessage” 事件,然后由我们定义的函数处理。该消息使用此函数附加到 chatBox div 中。

  • 此外,我们为 “Send” 按钮构造了一个 click 事件处理程序,该处理程序使用 “Message” 方法将用户名和消息发送到服务器。最后,我们启动 SignalR 连接,并在建立连接后向控制台记录一条消息。

第 4 步:运行应用程序

  • 现在是启动应用程序的时候了 要在调试模式下启动程序,请按 F5。应用程序启动后,您应该能够查看带有输入字段和“发送”按钮的聊天 UI。
  • 输入您的姓名和消息后,单击“发送”。您的消息将在聊天窗口中弹出。导航到其他浏览器窗口中的同一 URL。发送消息并输入其他名称。该消息将出现在两个窗口中。

使用 dotnet 和 signalR 的实时聊天应用

恭喜,您刚刚使用 .NET Core 7 和 SignalR 构建了一个实时聊天应用程序!

标签:Core,聊天,创建,应用程序,SignalR,实时,NET,客户端
From: https://blog.csdn.net/u013528853/article/details/143683731

相关文章

  • 对 Wireshark、SolarWinds、Fiddler、TCPdump、NetworkMiner、Charles、JMeter、Fireb
    对Wireshark、SolarWinds、Fiddler、TCPdump、NetworkMiner、Charles、JMeter、Firebug、HTTPWatch和AntiARPSniffer等网络分析工具的详细对比分析,内容包括功能、特点、适用场景、平台支持等方面。表格总结了它们的主要区别与特点。工具名称功能适用场景平台支持优......
  • Opinion dynamics analysis for stubborn individuals in cooperation–competition n
    Opiniondynamicsanalysisforstubbornindividualsincooperation–competitionnetworksbasedonpath-dependenceframework[1]目录Opiniondynamicsanalysisforstubbornindividualsincooperation–competitionnetworksbasedonpath-dependenceframework[1]一、......
  • 支持多语言、多商店的商城,.Net7 + EF7领域驱动设计架构
    推荐一个跨平台、模块化、可扩展且超快速的开源一体化电子商务平台。01项目简介Smartstore支持桌面和移动平台、多语言、多商店、多货币的商城,并支持SEO优化,支持无限数量的产品和类别、报表、ESD、折扣、优惠券等等。还有一套全面的CRM和CMS、销售、营销、付款和物流处理......
  • 实现无感刷新Token技术:.Net Web API与axios的完美结合
    这是我之前分享在星球里面的课程,下面整理下,分享下这个无感刷新Token技术方案。我们都知道Token是有设置有效期的,为了安全都不会设置过长的有效期;但设置有效期太短,又会导致经常需要重新登录。这就需要无感刷新Token的方案,来提升用户体验。目前比较常用的方案是:双token机制。1......
  • C小题目:有一个一维数组score,放10个学生的成绩,求平均成绩。
    #include<stdio.h>intaverage(intx[],intlen){inti,sum=0;for(i=0;i<len;i++){sum+=x[i];printf("%d\n",x[i]);};inta=sum/len;printf("theaverageis%d\n",a);};intmain(){......
  • .NET 中的虚拟内存
    在.Net中,虚拟内存是由操作系统管理的地址空间,允许应用程序在可用物理内存(RAM)之上分配和使用更多的内存。C#程序(或.NET程序)运行在.NET公共语言运行时(CLR)上,CLR会利用虚拟内存来分配和管理对象,但具体的虚拟内存分配与管理则由操作系统来处理。C#和.NET中的虚拟内存概念......
  • C#/.NET/.NET Core技术前沿周刊 | 第 12 期(2024年11.01-11.10)
    前言C#/.NET/.NETCore技术前沿周刊,你的每周技术指南针!记录、追踪C#/.NET/.NETCore领域、生态的每周最新、最实用、最有价值的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿,助力技术成长与视野拓宽。欢迎投稿、推荐或自荐优质文章、项目、学习资源等......
  • 基于.NET开源、功能强大且灵活的工作流引擎框架
    前言工作流引擎框架在需要自动化处理复杂业务流程、提高工作效率和确保流程顺畅执行的场景中得到了广泛应用。今天大姚给大家推荐一款基于.NET开源、功能强大且灵活的工作流引擎框架:elsa-core。框架介绍elsa-core是一个.NET开源、免费(MITLicense)、功能强大且灵活的工作流......
  • 精选2款C#/.NET开源且功能强大的网络通信框架
    思维导航前言NetCoreServerTouchSocket优秀项目和框架精选DotNetGuide技术社区前言今天大姚给分享2个C#/.NET开源且功能强大的网络通信框架,希望可以帮助到有需要的同学。NetCoreServerNetCoreServer是一个.NET开源、免费(MITLicense)、快速、低延迟的异步套接字服......
  • asp.net程序设计1945消防宣传网站(源码)
    项目包含:源码、参考论文、讲解视频、说明文档请查看博主个人简介开发环境开发工具:VisualStudio2010或以上版本数据库:SQLServer2005或以上版本开发语言:c#操作系统:windows7或以上浏览器:GoogleChrome(推荐)、Edge、360浏览器消防工作是一项知识性、科学性、社会......