ASP.NET CORE 6.0实现SignalR

KysonDu

已于 2023-07-25 15:47:20 修改

阅读量1.2k

点赞数 3

文章标签： asp.net 后端

于 2023-07-25 15:31:19 首次发布

本文链接：https://blog.csdn.net/weixin_41140260/article/details/131919103

版权

当使用ASP.NET Core Web API与SignalR结合，可以实现实时通信功能。以下是一些详细步骤：

步骤一：创建ASP.NET Core Web API项目

1. 打开Visual Studio，选择创建新项目。
2. 选择“ASP.NET Core Web API”模板，并为项目命名。
3. 点击“创建”按钮来创建项目。

步骤二：安装SignalR包（可不用安装，SignalR已经内置在Microsoft.AspNetCore.App包中）

1. 在解决方案资源管理器中，右键单击项目，并选择“管理NuGet程序包”。
2. 在NuGet包管理器中，搜索并安装Microsoft.AspNetCore.SignalR包。

步骤三：添加SignalR服务

1. 打开Startup.cs文件。
2. 在ConfigureServices方法中，添加以下代码：

builder.Services.AddSignalR();

步骤四：配置SignalR终结点

1. 在Configure方法中，添加以下代码：

```csharp
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    endpoints.MapHub<ChatHub>("/chatHub"); // 替换"ChatHub"为你的Hub类名
});
```

置顺序上需要先调用 app.UseRouting()，然后再调用 app.UseEndpoints()
步骤五：创建SignalR的Hub类

1. 在项目中创建一个继承自Microsoft.AspNetCore.SignalR.Hub的类，例如ChatHub.cs。
2. 在Hub类中，可以定义各种客户端可以调用的方法，例如：

```csharp
    /// <summary>
    /// ChatHub 继承自 Hub,用于定义客户端可以调用的方法
    /// </summary>
    public class ChatHub : Hub
    {
        // 定义了 SendMessage 方法,客户端可以调用该方法
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
```

步骤六：使用SignalR

1. 在控制器中，注入IHubContext，并使用它来与SignalR Hub进行通信，例如：

```csharp
    [ApiController]
    [Route("[controller]")]
    public class SignalRController : ControllerBase
    {
        private readonly IHubContext<ChatHub> _hubContext;

        public SignalRController(IHubContext<ChatHub> hubContext)
        {
            _hubContext = hubContext;
        }

        [HttpPost("messages")]
        public async Task SendMessage(string user, string message)
        {
            // 通过 HubContext 调用客户端的方法
            await _hubContext.Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
```

2. 在客户端代码中，建立与SignalR的连接并处理服务器推送的消息，例如：

```javascript
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); // 替换"/chatHub"为你的Hub终结点
connection.on("ReceiveMessage", function (user, message) {
    console.log(user + " 发送消息：" + message);
});
connection.start().then(function () {
    console.log("与服务器连接成功!");
});
```

完整HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <!-- 显示消息的列表 -->
    <ul id="messagesList"></ul>

    <!-- 发送消息的表单 -->
    <form id="chatForm">
        <input type="text" id="messageInput" />
        <button type="button" id="btn">发送</button>
    </form>
    <script>
        // 使用 HubConnectionBuilder 创建 hub 连接
        const connection = new signalR.HubConnectionBuilder()// 创建一个 SignalR Hub 连接建造者
            .withUrl("/chatHub")// 设置要连接的 Hub 的 URL
            .build();// 构建出 Hub 连接对象

        // 在连接上监听服务端的 ReceiveMessage 方法
        connection.on("ReceiveMessage", (user, message) => {
            // 接收到消息时打印输出
            console.log(`Received message from ${user}: ${message}`);
            const msg = document.createElement('li');
            msg.textContent = `${user}: ${message}`;
            document.getElementById('messagesList').appendChild(msg);
        });

        // 开始连接
        connection.start().then(() => {
            // 连接成功则打印日志
            console.log("SignalR connection established.");
        });

        $("#btn").click(function () {
            connection.invoke('SendMessage', 'Web Client', $("#messageInput").val());
        })
    </script>
</body>
</html>

以上就是使用ASP.NET Core Web API和SignalR实现实时通信的详细步骤。希望对你有所帮助！

KysonDu

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET CORE 6.0实现SignalR

1. 在项目中创建一个继承自Microsoft.AspNetCore.SignalR.Hub的类，例如ChatHub.cs。当使用ASP.NET Core Web API与SignalR结合，可以实现实时通信功能。以上就是使用ASP.NET Core Web API和SignalR实现实时通信的详细步骤。2. 在NuGet包管理器中，搜索并安装Microsoft.AspNetCore.SignalR包。1. 在解决方案资源管理器中，右键单击项目，并选择“管理NuGet程序包”。步骤六：使用SignalR。
复制链接

扫一扫