ASP.NET Core 2.0中SignalR安装报错及C#/前端使用咨询

嘿，我来帮你搞定这两个问题——先解决你当前卡壳的NuGet包报错，再一步步教你前后端配置SignalR。

一、解决NuGet包安装报错问题 #

你遇到的这个错误核心原因很明确：你选的是针对传统.NET Framework的SignalR包，但你的项目是ASP.NET Core 2.0（基于NETCoreApp v2.0），两者框架不兼容。ASP.NET Core有自己独立的SignalR包，和老版本的Microsoft.AspNet.SignalR完全是两套东西。

按照下面的步骤操作就能解决：

• 先卸载所有已经安装的、和传统SignalR相关的NuGet包（比如Microsoft.AspNet.SignalR、Microsoft.AspNet.SignalR.Core这类前缀的）
• 安装正确的ASP.NET Core SignalR包：针对2.0版本，你需要安装Microsoft.AspNetCore.SignalR，版本要选2.0.x系列（比如2.0.3，和你的项目框架版本匹配）。可以通过NuGet包管理器搜索安装，或者在Package Manager Console里执行命令：

  Install-Package Microsoft.AspNetCore.SignalR -Version 2.0.3
  

• 最后确认你的项目文件（.csproj）里的TargetFramework配置是<TargetFramework>netcoreapp2.0</TargetFramework>，没有同时引用.NET Framework的框架。

二、ASP.NET Core 2.0 使用SignalR的完整配置（C#后端 + HTML/JS前端） #

搞定包的问题后，我们来配置前后端的SignalR功能，以常见的聊天场景为例：

后端配置（C#） #

1. 配置Startup.cs
   打开Startup.cs，先在ConfigureServices方法中注册SignalR服务：

   public void ConfigureServices(IServiceCollection services)
   {
       // 保留你原有的其他服务配置（比如AddMvc()等）
       services.AddSignalR();
   }
   

   然后在Configure方法中添加SignalR的路由映射：

   public void Configure(IApplicationBuilder app, IHostingEnvironment env)
   {
       // 保留你原有的中间件配置（比如UseStaticFiles()、UseMvc()等）
       app.UseSignalR(routes =>
       {
           routes.MapHub<ChatHub>("/chatHub"); // ChatHub是你要创建的Hub类，/chatHub是前端连接的路径
       });
   }
   

2. 创建Hub类
   在项目中新建一个类（比如命名为ChatHub），继承自Microsoft.AspNetCore.SignalR.Hub，定义前端可以调用的方法，以及后端推送给前端的逻辑：

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

前端配置（HTML/JS） #

1. 引入SignalR客户端脚本
   你可以通过npm安装@aspnet/signalr包（版本选2.0.x），然后把node_modules/@aspnet/signalr/dist/browser/signalr.js复制到项目的wwwroot/lib/signalr目录下，之后在HTML中引用：

   <script src="~/lib/signalr/dist/browser/signalr.js"></script>
   

2. 编写前端交互代码
   下面是一个简单的聊天页面示例，包含输入框、发送按钮和消息列表：

   <div>
       <input type="text" id="userInput" placeholder="输入你的用户名" />
       <input type="text" id="messageInput" placeholder="输入消息内容" />
       <button onclick="sendMessage()">发送消息</button>
       <ul id="messagesList"></ul>
   </div>
   
   <script>
       // 初始化SignalR连接
       const connection = new signalR.HubConnectionBuilder()
           .withUrl("/chatHub") // 对应后端MapHub配置的路径
           .build();
   
       // 监听后端推送的ReceiveMessage事件，收到消息后更新页面
       connection.on("ReceiveMessage", (user, message) => {
           const li = document.createElement("li");
           li.textContent = `${user}: ${message}`;
           document.getElementById("messagesList").appendChild(li);
       });
   
       // 启动连接，处理可能的错误
       connection.start().catch(err => console.error(err.toString()));
   
       // 发送消息到后端的SendMessage方法
       function sendMessage() {
           const user = document.getElementById("userInput").value;
           const message = document.getElementById("messageInput").value;
           connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
           // 清空消息输入框
           document.getElementById("messageInput").value = "";
       }
   </script>
   

内容的提问来源于stack exchange，提问作者Frens