目录

一、.net6api接口

二、vue3前端

三、WPF客户端

此案例分为3部分。首先创建.net6api接口，然后使用前端vue3进行聊天，再使用wpf客户端进行聊天，并且互通聊天。

一、.net6api接口

1.首先建立一个能正常运行的api，然后增加ChatHub

2.ChatHub.cs代码

其中注释已经写了，目前的功能是全部发送消息和1对1发送消息，也可以建立组，进行组发送消息。

官网参考

使用 ASP.NET Core SignalR 中的中心 | Microsoft Learn

ASP.NET Core SignalR JavaScript 客户端 | Microsoft Learn

using Microsoft.AspNetCore.SignalR;
using System.Security.Cryptography;namespace SignalRApi.Controllers
{public class ChatHub : Hub{private static Dictionary dicUsers = new Dictionary();public override Task OnConnectedAsync()    //登录{Console.WriteLine($"ID:{Context.ConnectionId} 已连接");   //控制台记录var cid = Context.ConnectionId;//根据id获取指定客户端var client = Clients.Client(cid);//向指定用户发送消息//client.SendAsync("Self", cid);//像所有用户发送消息Clients.All.SendAsync("ReceivePublicMessageLogin", $"{cid}加入了聊天室");        //界面显示登录return base.OnConnectedAsync();}public override Task OnDisconnectedAsync(Exception? exception)       //退出的时候{Console.WriteLine($"ID:{Context.ConnectionId} 已断开");var cid = Context.ConnectionId;//根据id获取指定客户端var client = Clients.Client(cid);//向指定用户发送消息//client.SendAsync("Self", cid);//像所有用户发送消息Clients.All.SendAsync("ReceivePublicMessageLogin", $"{cid}离开了聊天室");        //界面显示登录return base.OnDisconnectedAsync(exception);}/// 
/// 向所有客户端发送消息/// 
/// /// /// public async Task SendPublicMessage(string user, string message){                                                     //string user,await Clients.All.SendAsync("ReceivePublicMessage", user, message);   //ReceiveMessage 提供给客户端使用}/// 
/// 用户登录，密码就不判断了/// 
/// public void Login(string userId)     //对应前端的invoke{if (!dicUsers.ContainsKey(userId)){dicUsers[userId] = Context.ConnectionId;}Console.WriteLine($"{userId}登录成功，ConnectionId={Context.ConnectionId}");//向所有用户发送当前在线的用户列表Clients.All.SendAsync("dicUsers", dicUsers.Keys.ToList());   //对应前端的on}public void ChatOne(string userId, string toUserId, string msg)     //用户  发送到的用户      发送的消息{string newMsg = $"{userId}对你说{msg}";//组装后的消息体//如果当前用户在线if (dicUsers.ContainsKey(toUserId)){Clients.Client(dicUsers[toUserId]).SendAsync("ChatInfo", newMsg);}else{//如果当前用户不在线，正常是保存数据库，等上线时加载，暂时不做处理}}}
}

3.Program.cs代码

一定要写指定的ip地址，否则报错

Cannot send data if the connection is not in the 'Connected' State 

using SignalRApi.Controllers;var builder = WebApplication.CreateBuilder(args);// Add services to the container.builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddSignalR();   //增加AddSignalR
string[] urls = new[] { "http://localhost:3000" };       //此处一定要写指定的ip地址，地址是前端的ip地址，坑了我1天的时间
builder.Services.AddCors(options =>options.AddDefaultPolicy(builder => builder.WithOrigins(urls).AllowAnyMethod().AllowAnyHeader().AllowCredentials())
);
var app = builder.Build();// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{app.UseSwagger();app.UseSwaggerUI();
}
app.UseCors(); //增加跨域问题
app.UseHttpsRedirection();app.UseAuthorization();app.MapControllers();
app.MapHub("/api/chat");  //前端访问的地址，2边要统一就行了
app.Run();

4.效果

控制器不取消的话，如图所示

地址后面增加字符串，弹框如下，那么api就算是完成了 

补充说明：如果调试的时候可以使用，实际用的时候，发布Nginx，或者IIS，其中iis要下载安装运行时。

二、vue3前端

1.首先使用HBuilder X建立一个可以运行的vue3程序

然后安装下面@microsoft/signalr，不需要安装@aspnet/signalr，因为前者更加新，后者已经淘汰了。

npm init -y
npm install @microsoft/signalr

2.代码

ui 界面随便做一下，主要看效果就行了

3.运行效果

此时把api运行起来，然后运行vue3项目。

可以1对所有人说，也可以1对1说

三、WPF客户端

1.首先建立一个wpf程序，其实winform也可以

为了简单，wpf就不使用mvvm的方式了，只为实现效果

2.安装Microsoft.AspNetCore.SignalR.Client

3.建立界面

为了方便简单，界面按照vue3的界面做

界面代码 

账号:密码:登录发送给某人:发送内容:发送所有人发送到个人

后台代码，此处代码可以看vue3怎么调用的就行了，照猫画虎即可，这只是普通的写法，还可以使用属性变化，加上MVVM。

using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Interop;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace SignalRWPF
{/// 
/// Interaction logic for MainWindow.xaml/// 
public partial class MainWindow : Window{private HubConnection hubConnection;public MainWindow(){InitializeComponent();//rtbtxt.AppendText("4444");}private void btnLogin_Click(object sender, RoutedEventArgs e){//此处和VUE3界面是一样的，参照写就行了。//1.初始化InitInfo();//2.连接Link();//3.监听Listen();//4.登录Login();}/// 
/// 初始化/// 
private void InitInfo(){hubConnection = new HubConnectionBuilder().WithUrl("http://127.0.0.1:5196/api/chat").WithAutomaticReconnect().Build();hubConnection.KeepAliveInterval = TimeSpan.FromSeconds(5);}List LoginUser;string msgContent;/// 
/// 监听数据的变化/// 
private void Listen(){hubConnection.On>("dicUsers", msg =>{LoginUser = msg;string s = string.Empty;foreach (string item in msg){s += item + "用户登录" + Environment.NewLine;}rtbtxt.AppendText(s);});  //匿名方法  真实环境中，此处使用的是属性变化，不要使用赋值的方式hubConnection.On("ReceivePublicMessageLogin", msg => { msgContent = msg; rtbtxt.AppendText(msg + Environment.NewLine); });hubConnection.On("ReceivePublicMessage", (user, msg) => { msgContent = msg; rtbtxt.AppendText(user + "说：" + msg + Environment.NewLine); });  //匿名方法hubConnection.On("ChatInfo", msg => { msgContent = msg; rtbtxt.AppendText(msg + Environment.NewLine); });}/// 
/// 连接/// 
private async void Link(){try{await hubConnection.StartAsync();}catch (Exception ex){MessageBox.Show(ex.Message);}}private void Login(){hubConnection.InvokeAsync("Login", user.Text);}private void btnSendAll_Click(object sender, RoutedEventArgs e){hubConnection.InvokeAsync("SendPublicMessage", user.Text, content.Text);}private void btnSendOne_Click(object sender, RoutedEventArgs e){hubConnection.InvokeAsync("ChatOne", user.Text, toUser.Text, content.Text);}}
}

4.效果

同时打开api，打开2个窗体，然后进行对话。 

至此，所有代码就完成了，那么我们把api，vue，wpf都运行起来，然后进行聊天演示。

源码：

https://gitee.com/602874946/signal-rs