本文还有配套的精品资源，点击获取

简介：SignalR是一个用于实现实时Web应用程序的强大库，它支持多种传输方式如WebSocket、SSE、Forever Frame和Long Polling，确保了跨平台的实时通信。本教程将介绍如何使用SignalR创建一个简易的聊天室，包括服务器端Hub的设置、客户端连接的建立以及消息的发送和接收。特别关注于WebSocket技术在实现低延迟、高效率通信中的核心作用。此外，还涵盖了聊天室基础功能的实现，如用户身份验证、消息显示和群聊。

1. SignalR库简介

SignalR库的历史与发展

SignalR 是一个开源库，专为ASP.NET开发者设计，以支持实时Web功能。SignalR基于长轮询技术，后来增加了对WebSockets的支持。它在服务器和客户端之间建立持久连接，使得服务器能够推送消息到所有或特定的客户端。

SignalR的主要优势

SignalR 的主要优势在于其易于使用的API和自动回退机制，能够根据客户端和服务器之间的连接能力智能选择最佳的通信方式。它不仅支持浏览器客户端，还支持移动应用和桌面应用，使得开发者可以轻松实现实时功能，如聊天、实时通知、实时游戏等。

SignalR的适用场景

由于SignalR的灵活性和广泛的客户端支持，它特别适用于需要实时数据交换的应用程序。例如，它可以用于构建实时协作工具、电子商务网站上的实时库存更新、在线游戏，甚至可以用于在服务端更新信息时通知所有连接的客户端。

以上内容为SignalR库的基础知识和优势概述，接下来的章节会进一步深入探讨如何利用SignalR构建复杂的实时Web应用程序。

2. 实时Web应用程序构建

在本章中，我们将深入探讨实时Web应用程序的构建过程，这一领域在近年来随着网络技术的发展和用户对即时通讯的渴求而变得至关重要。实时Web技术的应用，让我们能够实现几乎无延迟的在线交流和数据同步。本章将重点介绍实时Web的需求、挑战、发展历程，并深入探讨SignalR在构建实时Web应用中的核心作用和特点。

2.1 实时Web技术概览

2.1.1 实时Web的需求和挑战

实时Web技术的需求源于用户对即时通信、数据更新、在线协作等方面的高度关注。这种需求促使开发者寻求新的技术手段来实现Web应用的实时功能。以下是实时Web需求的几个关键点：

• 即时通信： 用户希望在不刷新页面的情况下，能够实时接收和发送消息。
• 数据同步： 保持不同设备或客户端间的数据实时更新。
• 在线协作： 多用户实时在线编辑文档或共同完成任务。

挑战同样伴随需求而来，这些挑战包括但不限于：

• 网络延迟： 如何最小化数据传输的延迟。
• 可扩展性： 管理大量并发连接。
• 兼容性： 确保在不同设备和浏览器中保持实时功能。

2.1.2 实时Web技术的发展历程

实时Web技术的发展是一个渐进的过程，从最初的轮询（Polling）和长轮询（Long Polling）到今天的WebSocket技术，经历了多次重要的技术革新。

• 轮询技术： 最原始的方法是轮询，客户端定期向服务器请求数据。这种方法实现简单，但效率低下，因为它需要持续不断地发送HTTP请求。
• 长轮询： 相较于轮询，长轮询改善了效率，服务器只有在数据准备发送时才响应请求，从而减少了等待时间。
• Comet技术： Comet类似于长轮询，但更加灵活，支持在连接保持期间推送数据到客户端。
• WebSocket技术： WebSocket协议为实时Web应用提供了真正的全双工通道，支持持久连接，极大地降低了通信延迟。

2.2 SignalR在实时Web中的作用

2.2.1 SignalR的核心特性

SignalR是.NET平台上一个非常流行的库，用于实现实时Web功能。它封装了WebSocket和其他传输机制，为开发者提供了一个简便的API来创建实时双向通信。SignalR的核心特性包括：

• 简化了实时通信的实现： 开发者无需深入了解底层通信细节。
• 支持多种传输机制： 根据浏览器和服务器的能力，自动选择最佳通信方式。
• 易于扩展： 开发者可以自定义连接逻辑，扩展库的功能。
• 友好的API： 提供了直观的API，易于学习和使用。

2.2.2 与其他实时Web技术的对比分析

在众多实时Web技术中，SignalR凭借其独特的特性脱颖而出。让我们通过比较其他流行的实时Web技术，来更好地理解SignalR的优势和局限：

• 对比WebSocket： SignalR提供了比原生WebSocket更高的抽象层次，屏蔽了复杂性，使开发者可以专注于业务逻辑而不是底层通信。
• 对比Socket.IO： 一个在JavaScript社区广泛应用的库，SignalR与之相比，提供了对.NET生态的深入支持和与ASP.NET的无缝集成。
• 对比Ajax轮询/长轮询： SignalR无需手动管理连接的打开和关闭，减少了代码复杂度。

在本章的后续内容中，我们将进一步探索SignalR与WebSocket结合的案例分析，并展示如何优化实时Web应用程序以应对大规模用户交互。

3. WebSocket技术应用

3.1 WebSocket协议原理

3.1.1 协议的引入背景

在传统的HTTP协议中，每当客户端需要从服务器获取数据时，必须发起一个新的请求，并等待服务器的响应。这种请求-响应模型的缺点是无法实现服务器主动向客户端推送数据的功能，导致了实时通信的不足。为了填补这一空白，WebSocket应运而生。

WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务器主动向客户端发送数据。它为Web应用提供了一种几乎实时的双向通信能力，这是传统的HTTP请求响应模型无法实现的。

3.1.2 协议的工作流程和优势

WebSocket的工作流程分为连接建立和数据传输两个阶段。在连接建立阶段，客户端发起一个HTTP Upgrade请求，将连接升级为WebSocket协议。一旦连接成功建立，客户端和服务器就可以在TCP连接上自由发送消息。

WebSocket协议的优势在于： - 低延迟 : 由于是基于TCP连接，因此其通信延迟非常低。 - 全双工通信 : 可以实现客户端和服务器之间的双向通信。 - 减少开销 : 通过一个连接即可实现双向通信，减少了网络的开销。 - 更好的实时性 : 消息可以立即发送，不需要像轮询那样等待。

3.2 WebSocket在SignalR中的应用

3.2.1 SignalR的WebSocket支持

SignalR作为一个实时通信库，对WebSocket提供了原生支持。在客户端和服务器端代码中，SignalR抽象了WebSocket的复杂细节，使得开发者可以很容易地通过SignalR使用WebSocket进行通信。

在SignalR中，服务器端和客户端都有一套完整的API来支持WebSocket。开发者不需要关心底层连接的细节，只需要调用相应的API即可实现功能。

3.2.2 WebSocket的优化和兼容性处理

虽然WebSocket具有许多优势，但在某些老旧浏览器上可能不被支持。SignalR在实现WebSocket支持的同时，还提供了优雅的降级策略。当浏览器不支持WebSocket时，SignalR会自动切换到其他传输方式，比如Forever Frame或者Server-Sent Events。

SignalR还对WebSocket进行了优化，例如通过心跳机制保持连接，防止因为长时间无数据传输导致连接被网络设备关闭。

示例代码

下面是一个简单的SignalR Hub类使用WebSocket发送消息的例子：

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

客户端JavaScript代码连接Hub并接收消息：

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

connection.on("receiveMessage", (user, message) => {
    const msg = `${user} said ${message}`;
    $("#messages").append("<li>" + msg + "</li>");
});

connection.start().catch(function(err) {
    return console.error(err.toString());
});

在这段代码中， SendMessage 方法将消息广播到所有连接的客户端。客户端使用 connection.on 方法订阅 receiveMessage 事件，以接收服务器发送的消息。SignalR的这一机制大大简化了实时通信的实现过程。

SignalR使用WebSocket实现了高效、稳定且易于开发的实时通信机制，极大地推动了实时Web应用的发展。

4. Hub服务器端设置

4.1 Hub的概念和功能

4.1.1 Hub的定义和用途

Hub在SignalR中扮演着中心枢纽的角色，它允许客户端和服务器之间进行双向通信。Hub通过简化远程过程调用（RPC）的方式，让开发者可以像调用本地方法一样调用服务器端的方法，而不必担心底层的通信细节。

定义

Hub是一个特殊的SignalR类，它继承自 Microsoft.AspNetCore.SignalR.Hub 。它提供了一个连接点，客户端可以调用服务器端的方法，同时服务器也可以调用客户端的方法。Hub的主要作用是封装通信的逻辑，提供一种简单的方式以实现客户端和服务器之间的交互。

用途

Hub的主要用途包括但不限于： - 实现消息广播功能 - 提供点对点的消息传递 - 管理客户端连接状态 - 处理复杂的业务逻辑，例如在线游戏、实时投票等

Hub通过为每个连接提供一个上下文环境，使得通信过程更加简洁明了。开发者可以利用Hub来实现各种实时应用，例如聊天室、协同工作空间、实时通知系统等。

4.1.2 Hub与SignalR其他组件的关系

SignalR通过多种组件共同协作实现完整的实时通信功能。Hub作为核心组件，与其他组件相辅相成，共同构成一个完整的实时通信系统。

Hub与其他组件的协作

• Connection : 定义了客户端与服务器之间单个连接的抽象。每个客户端连接都会关联到一个特定的Hub实例。
• Group : 允许将连接分组，可以同时向一组连接发送消息，而无需单独向每个连接发送。
• PersistentConnection : 是一个低级别的抽象，允许处理来自客户端的连接请求而不需要Hub。它主要用于实现自定义的协议。
• Scaleout : 允许多个服务器实例间共享消息。当服务器扩展到多个实例时，Scaleout组件保证消息可以在所有实例中广播或发送给特定的组。
• Protocol : SignalR使用JSON作为通信协议，确保了跨平台的兼容性。Hub通过Protocol组件发送和接收消息。

通过这些组件的互相配合，SignalR提供了一个强大而灵活的实时通信框架，而Hub提供了一种更高级的方式来处理复杂的业务逻辑和数据交互。

4.2 构建和配置Hub服务器端

4.2.1 编写服务器端代码的最佳实践

编写Hub服务器端代码时，应当遵循一些最佳实践来确保代码的可维护性和性能。

遵循单一职责原则

每个Hub类应当只负责一组相关的功能，避免Hub变得过于臃肿。如果发现Hub开始处理与实时通信不直接相关的逻辑，那么这些逻辑应当被重构到服务层。

使用异步编程

Hub的某些方法可能会涉及I/O操作，如数据库访问或文件系统操作。应当使用异步版本的方法来避免阻塞线程，从而提升系统的响应性能。

public async Task SendMessageToClient(string message)
{
    await Clients.All.SendAsync("ReceiveMessage", message);
}

管理连接和组

Hub提供了管理客户端连接和组的方法。应当合理使用这些方法，例如，当用户断开连接时，应当确保从相关的组中移除该用户。

public async Task AddToGroup(string connectionId, string groupName)
{
    await Groups.AddToGroupAsync(connectionId, groupName);
}

异常处理

Hub方法应当处理可能出现的异常，确保异常被适当记录，并且不影响其他客户端的通信。

4.2.2 配置服务器环境和连接管理

为了确保Hub服务器端正常工作，需要进行一系列的配置和管理，包括服务器环境设置和连接状态的管理。

环境配置

在配置服务器环境时，需要确保SignalR库已经安装并正确引用。同时，根据应用场景选择合适的中间件进行配置，例如使用 UseSignalR() 在ASP.NET Core中配置Hub路由。

app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/chatHub");
});

连接管理

连接管理涉及到客户端连接的生命周期。Hub提供了一些事件（如 OnConnectedAsync 和 OnDisconnectedAsync ），可以在客户端连接时触发特定的逻辑。

public override async Task OnConnectedAsync()
{
    await Clients.All.SendAsync("ReceiveMessage", $"{Context.ConnectionId} connected");
    await base.OnConnectedAsync();
}

public override async Task OnDisconnectedAsync(Exception exception)
{
    await Clients.All.SendAsync("ReceiveMessage", $"{Context.ConnectionId} disconnected");
    await base.OnDisconnectedAsync(exception);
}

通过这些最佳实践和配置管理，可以确保Hub服务器端的功能和性能达到最佳状态，为客户端提供稳定、高效的实时通信服务。

在下一章节中，我们将继续深入了解如何使用JavaScript/TypeScript客户端与SignalR服务器进行交互，并探讨客户端与服务器之间的通信机制。

5. JavaScript/TypeScript客户端交互

5.1 客户端与服务器通信机制

5.1.1 SignalR客户端库的安装和配置

在构建实时Web应用时，客户端与服务器之间的通信至关重要。SignalR通过提供一个丰富的客户端库来简化这一过程，使得开发人员能够轻松地实现双向通信。

SignalR客户端库可以通过npm（Node Package Manager）进行安装。在项目中，首先确保已经安装了npm，然后在项目目录下执行以下命令：

npm install @microsoft/signalr

安装完成后，就可以在JavaScript或TypeScript代码中引入SignalR客户端库了。

// 引入SignalR客户端库
const signalR = require('@microsoft/signalr');

客户端库提供了一个 HubConnectionBuilder 类，用于构建与服务器的连接。以下是一个构建连接并配置的示例代码：

// 创建Hub连接
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")  // 设置服务器上的Hub端点
    .configureLogging(signalR.LogLevel.Information) // 配置日志级别
    .build();

// 定义连接状态变更的事件处理函数
connection.onclose(async () => {
    await new Promise(resolve => setTimeout(resolve, 5000));
    await connection.start();
});

// 开始连接服务器
connection.start().catch(err => console.error('Connection failed:', err));

在上述代码中， withUrl 方法用于指定SignalR Hub的服务器端点， configureLogging 方法用于设置日志级别，以便于调试时跟踪连接过程中的问题。 onclose 方法用于定义连接关闭后的行为，在此处我们使用一个延时后尝试重新连接服务器。最后， connection.start() 用于启动与服务器的连接。

5.1.2 客户端连接和消息传输原理

一旦客户端库被配置并启动了与服务器的连接，它就会自动处理与SignalR服务器之间的消息传输。客户端库内部使用了HTML5的 EventSource 或 WebSocket 等技术来实现持久的连接。

客户端通过调用Hub的方法来发送消息，并监听从服务器接收消息的回调。例如，发送一条消息到服务器端的Hub方法 sendMessage 可以写为：

async function sendMessage(message) {
    try {
        await connection.invoke('sendMessage', message);
    } catch (error) {
        console.error('Error sending message:', error);
    }
}

其中 invoke 方法用于调用服务器端的Hub方法，并可以发送数据。对于服务器端的响应，SignalR客户端库允许开发人员注册回调函数来处理：

// 注册回调函数来处理从服务器接收的消息
connection.on('receiveMessage', function(message) {
    console.log(message);
});

此处， on 方法用于监听服务器端Hub触发的 receiveMessage 事件。当该事件被触发时，回调函数就会执行，并打印出接收到的消息。

5.2 使用JavaScript/TypeScript实现交互

5.2.1 编写客户端逻辑代码

在客户端实现交互逻辑，通常涉及用户界面和事件监听。以下是一个简单的聊天室示例，它使用SignalR客户端库来发送和接收消息。

<!-- HTML页面结构 -->
<div id="chat-container">
    <input type="text" id="message-input" placeholder="Type your message here" />
    <button onclick="sendMessage()">Send</button>
    <div id="chat-log"></div>
</div>

<script src="signalr-client-library.js"></script>
<script>
    // 在页面加载完毕时启动SignalR连接
    document.addEventListener('DOMContentLoaded', function() {
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chatHub")
            .build();

        connection.on("receiveMessage", function(message) {
            // 将接收到的消息添加到聊天日志中
            const chatLog = document.getElementById('chat-log');
            chatLog.innerHTML += `<div>${message}</div>`;
        });

        connection.start().catch(err => console.error('Connection failed:', err));

        window.sendMessage = async function() {
            const messageInput = document.getElementById('message-input');
            const message = messageInput.value;
            await connection.invoke('sendMessage', message);
            messageInput.value = ''; // 清空输入框
        };
    });
</script>

在这个例子中， sendMessage 函数在用户点击“Send”按钮时被调用。它获取用户输入的消息并发送到服务器。同时，当服务器发送消息时， receiveMessage 回调函数会被触发，更新页面上的聊天日志。

5.2.2 处理客户端事件和状态

SignalR客户端库不仅提供了消息传输的基础机制，还提供了丰富的事件和状态处理功能。这些功能可以帮助开发人员了解连接的当前状态，并在连接过程中发生的事件进行响应。

// 监听连接状态变更事件
connection.onreconnecting(error => {
    console.log('Connection lost - reconnecting');
});

connection.onreconnected(async connectionId => {
    console.log(`Connection reconnected! Connected with connection ID ${connectionId}`);
});

// 监听连接错误事件
connection.onerror((error) => {
    console.error('Connection error:', error);
});

在此代码段中， onreconnecting 事件在连接丢失并尝试重新连接时触发， onreconnected 事件在成功重新连接后触发。 onerror 事件则用于捕获连接过程中发生的错误。

通过这样的状态和事件处理，开发人员可以实现用户体验的优化，例如在连接失败时向用户显示错误信息，并在连接恢复后通知用户。

客户端与服务器的交互是构建实时Web应用的关键部分。通过SignalR客户端库，开发人员可以轻松地处理连接的建立、消息的发送和接收、以及连接状态的管理。本章节通过代码实例和详细解释，揭示了客户端交互的实现方式和最佳实践，为构建高性能的实时应用提供了必要的技术支撑。

6. 消息发送与接收机制

随着实时Web应用的普及，开发者们不断地寻求更高效、更可靠的消息传递方式。SignalR作为一个成熟的实时通信库，提供了一套完整的解决方案。在深入探讨SignalR消息发送与接收机制之前，我们需要先了解其背后的传输模型。

6.1 消息传递模型

6.1.1 发送和接收消息的机制

SignalR在设计时着重于简化实时通信的复杂性，它封装了底层传输细节，为开发者提供了一套简洁的API用于消息的发送和接收。在SignalR中，消息传递主要依赖于连接的概念，客户端与服务器通过连接来交换信息。服务器端的Hub是消息的分发中心，客户端的连接通过Hub来发送和接收消息。

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

在上述代码中， SendMessage 方法是Hub的一个异步方法，它通过调用 Clients.All.SendAsync 方法，将消息发送给所有连接的客户端。这里的“所有客户端”就是消息的目标接收者。

6.1.2 消息格式和序列化过程

SignalR支持JSON和二进制消息格式，这取决于开发者的选择。默认情况下，SignalR使用JSON作为消息格式，因为它具有较好的跨平台兼容性。当使用JSON消息格式时，SignalR会自动进行序列化和反序列化过程。开发者只需要关注传递的数据对象，不需要关心序列化的细节。

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

connection.on("ReceiveMessage", (user, message) => {
    const msg = `${user}: ${message}`;
    console.log(msg);
});

// 开启连接
connection.start();

在JavaScript客户端的代码中， on 方法注册了消息接收的事件处理器，当服务器向客户端发送消息时，该处理器会被触发。

6.2 消息管理优化

6.2.1 消息传输的性能优化

实时应用通常面临高频率、小数据量的消息传输需求，SignalR内置了消息压缩和批处理机制以优化性能。消息压缩能够减少传输的数据量，而批处理则能够减少往返次数（RTT），提高消息传输效率。

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR(options =>
        {
            // 启用消息压缩
            options.EnableDetailedErrors = true;
        });
    }
}

在上述代码中， AddSignalR 方法配置了SignalR服务，启用了消息压缩功能。压缩通常在消息大小大于一定阈值时自动启用，但开发者也可以通过设置来强制启用。

6.2.2 处理消息排队和冲突解决策略

为了处理消息的排队和潜在的冲突，SignalR提供了一种基于优先级的消息处理机制。开发者可以根据消息的重要性为它们分配不同的优先级，这样在发送消息时，可以按顺序进行处理。此外，SignalR还提供了自动重连机制，以解决网络不稳定时的连接问题。

public class MyHub : Hub
{
    public override async Task OnConnectedAsync()
    {
        // 连接建立时的处理逻辑
    }

    public override async Task OnDisconnectedAsync(Exception exception)
    {
        // 连接断开时的处理逻辑
    }
}

Hub类中的 OnConnectedAsync 和 OnDisconnectedAsync 方法分别在连接建立和断开时被调用，为消息排队和冲突处理提供了扩展点。

通过本章的介绍，我们深入理解了SignalR的消息发送与接收机制，以及如何通过优化策略来提高消息传输的效率和可靠性。这些技术的运用，能显著提升实时Web应用程序的性能和用户体验。在下一章中，我们将通过构建一个聊天室功能来实践这些理论知识，并解决实际开发中可能遇到的问题。

7. 聊天室基础功能实现

7.1 用户身份验证机制

用户身份验证是聊天室应用中至关重要的一个环节，它确保了用户数据的私密性和平台的安全性。在这一部分，我们将深入探讨如何在SignalR驱动的聊天应用中实现用户身份验证机制。

7.1.1 用户登录与权限控制

SignalR本身并不直接提供身份验证机制，它需要与ASP.NET Core Identity或其他身份验证框架配合使用。在开始编写用户登录代码之前，需要在服务器端配置Identity服务，并为用户创建一个登录模型。

// 在Startup.cs中配置服务
public void ConfigureServices(IServiceCollection services)
{
    services.AddIdentity<ApplicationUser, IdentityRole>(options => {
        // 配置登录相关的选项
    })
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddDefaultTokenProviders();

    services.AddSignalR();
}

// 登录控制器示例
[ApiController]
[Route("api/[controller]")]
public class LoginController : ControllerBase
{
    private readonly UserManager<ApplicationUser> _userManager;
    private readonly SignInManager<ApplicationUser> _signInManager;

    public LoginController(UserManager<ApplicationUser> userManager, SignInManager<ApplicationUser> signInManager)
    {
        _userManager = userManager;
        _signInManager = signInManager;
    }

    [HttpPost("login")]
    public async Task<ActionResult> Login([FromBody] LoginViewModel model)
    {
        var user = await _userManager.FindByNameAsync(model.Username);
        if (user == null)
        {
            return Unauthorized();
        }

        var result = await _signInManager.CheckPasswordSignInAsync(user, model.Password, lockoutOnFailure: false);
        if (result.Succeeded)
        {
            // 创建SignalR连接ID和Token
            var connectionId = ...; // 获取或生成连接ID
            var token = ...; // 生成Token

            // 将用户信息与连接ID关联起来
            HttpContext.Items["ConnectionId"] = connectionId;
            HttpContext.Items["Token"] = token;

            return Ok(new { ConnectionId = connectionId, Token = token });
        }

        return Unauthorized();
    }
}

在上述代码中，我们使用 UserManager 和 SignInManager 进行用户验证，并在登录成功后返回给客户端一个 ConnectionId 和 Token 。

7.1.2 身份验证过程中的安全性考量

在身份验证机制的实施过程中，安全性是不可忽视的因素。使用HTTPS协议来加密客户端与服务器之间的通信数据是非常必要的。此外，在生成Token时，应该使用安全的随机数生成方法，并且Token应当包含足够的信息来防止伪造。

在客户端接收到 ConnectionId 和 Token 后，它将使用这些信息建立SignalR连接。在建立连接时，需要验证Token，并且应该在连接中实现一些回调来处理诸如连接断开、重连等场景。

7.2 消息显示和群聊功能

聊天室的核心功能之一是群聊功能，允许用户实时地发送和接收消息。我们将介绍如何利用SignalR实现群聊功能，并保证消息显示的实时性和准确性。

7.2.1 实时消息展示的前端实现

在客户端JavaScript代码中，我们可以创建一个SignalR Hub连接，并处理消息接收事件。这通常涉及到使用 signalR 库以及创建一个Hub连接。

// 客户端JavaScript代码
const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub") // Hub的路由地址
    .configureLogging(signalR.LogLevel.Information)
    .build();

connection.on('ReceiveMessage', function (user, message) {
    // 在页面上显示接收到的消息
    const messageElement = document.createElement('div');
    messageElement.innerText = `${user}: ${message}`;
    messagesList.appendChild(messageElement);
});

async function connect() {
    try {
        await connection.start();
        console.log('SignalR Connected.');
    } catch (err) {
        console.log(err);
    }
}

connect();

// 发送消息的函数
async function sendMessage(messageText) {
    try {
        await connection.invoke('SendMessage', messageText);
    } catch (err) {
        console.log(err);
    }
}

在上述代码中，我们连接到了 /chatHub 路由下的SignalR Hub，并注册了一个回调函数来处理接收到的消息。用户发送消息时，通过调用 sendMessage 函数调用Hub的 SendMessage 方法。

7.2.2 群聊功能的设计和实现

SignalR Hub支持群组功能，这可以方便地实现群聊功能。Hub可以将客户端连接分组，并允许向特定组发送消息。

// 在Hub中实现群组发送消息的方法
public class ChatHub : Hub
{
    public async Task SendMessage(string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", Context.UserIdentifier, message);
    }

    public async Task SendMessageToGroup(string groupName, string message)
    {
        await Clients.Group(groupName).SendAsync("ReceiveMessage", Context.UserIdentifier, message);
    }

    public async Task AddToGroup(string groupName)
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
    }
}

在Hub中， SendMessageToGroup 方法可以向指定的群组发送消息。此外， AddToGroup 方法可以将用户加入到特定的群组中。客户端需要在连接建立后调用 AddToGroup 方法来加入相应的聊天室。

7.2.3 消息历史记录与管理

消息历史记录是聊天应用中常见的一个功能，它可以让用户查看之前的聊天记录。消息历史记录的实现可以通过数据库来存储消息，并在连接时加载一定数量的历史消息。

// 假设使用Entity Framework Core
public class Message
{
    public int Id { get; set; }
    public string FromUserId { get; set; }
    public string Content { get; set; }
    public DateTime TimeStamp { get; set; }
}

// Hub中的方法加载历史消息
public async Task LoadHistory(string groupName)
{
    var messages = _context.Messages
        .Where(m => m.GroupName == groupName)
        .OrderByDescending(m => m.TimeStamp)
        .Take(100) // 假设加载最近的100条消息
        .Select(m => new { m.FromUserId, m.Content })
        .ToList();

    await Clients.Group(groupName).SendAsync("LoadHistory", messages);
}

在Hub中， LoadHistory 方法可以从数据库获取特定群组的历史消息，并将它们发送给所有连接的客户端。客户端需要在连接后调用这个方法来获取历史消息，并将其显示给用户。

通过上述方法，我们构建了一个基本的聊天室应用，实现了用户身份验证、实时消息显示以及群聊功能的设计和实现。在实际应用中，还需要考虑扩展性、异常处理和用户界面的友好性等因素。

本文还有配套的精品资源，点击获取

简介：SignalR是一个用于实现实时Web应用程序的强大库，它支持多种传输方式如WebSocket、SSE、Forever Frame和Long Polling，确保了跨平台的实时通信。本教程将介绍如何使用SignalR创建一个简易的聊天室，包括服务器端Hub的设置、客户端连接的建立以及消息的发送和接收。特别关注于WebSocket技术在实现低延迟、高效率通信中的核心作用。此外，还涵盖了聊天室基础功能的实现，如用户身份验证、消息显示和群聊。

本文还有配套的精品资源，点击获取