前端VUE2.0/3.0
后端NET8.0/NET6.0
框架Furion
前端安装SignalR通信库,下面任意一条安装指令都可以,根据项目自行选择
npm install @microsoft/signalr
yarn add @microsoft/signalr
前端使用
<script>
import { HubConnectionBuilder } from '@microsoft/signalr';
const connection = new HubConnectionBuilder().withUrl('http://localhost:5000/chatHub').build();
connection.start()//启动连接
connection.on('需要订阅的主题', 消息处理方法(有1个参数))//订阅主题
</script>
后端使用
在Startup文件中注册服务
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();//添加即时通信
}
在Startup文件中设置服务
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors("localhost:5000");
app.UseCorsAccessor();
app.UseAuthentication();
app.UseAuthorization();
app.UseInject(string.Empty);
app.UseEndpoints(endpoints =>
{
//注册集线器
endpoints.MapHub<ChatHub>("/chatHub").RequireCors(t=>t.SetIsOriginAllowed((host)=>true).AllowAnyMethod().AllowAnyHeader().AllowCredentials());
endpoints.MapControllers();
});
}
创建一个你自己的Hub类,我这里叫ChatHub
public class ChatHub : Hub
{
}
在其他服务中使用SignalR发布主题
public class OutService:IDynamicApiController,ITransient
{
private readonly IHubContext<ChatHub> _hubContext;
public OutService(IHubContext<ChatHub> hubContext)
{
_hubContext = hubContext;
}
/// <summary>
/// 测试发布主题
/// </summary>
/// <param name="user">主题</param>
/// <param name="message">消息</param>
/// <returns></returns>
[HttpPost("send/log")]
public async Task SendLog(string user,string message)
{
await _hubContext.Clients.All.SendAsync(user, message);
}
}
问题:前端通过SignalR连接后端时CORS报错(跨域)
解决方案
1.注册时配置跨域(注意顺序)
app.UseRouting();
app.UseCors("localhost:5000");
2.设置MapHub跨域
app.UseEndpoints(endpoints =>
{
//注册集线器
endpoints.MapHub<ChatHub>("/chatHub").RequireCors(t=>t.SetIsOriginAllowed((host)=>true).AllowAnyMethod().AllowAnyHeader().AllowCredentials());
endpoints.MapControllers();
});
通过以上设置就能完美解决跨域问题