杨中科 ASP.NETCORE 高级14 SignalR

1、什么是websocket、SignalR

服务器向客户端发送数据

1、需求：Web聊天;站内沟通。
2、传统HTTP：只能客户端主动发送请求
3、传统方案：长轮询（Long Polling）。缺点是？（1.客户端发送请求后，服务端要等到有数据返回，返回数据后，才方法连接。2.或者是每秒向服务器发送消息，询问是否有数据返回）
一台服务器，能处理得并发量是有限的，这种方式就会很消耗资源

WebSocket

1、WebSocket基于TCP 协议，支持二进制通信，双工通信。
2、性能和并发能力更强。
3、WebSocket 服务器独立于HTTP协议，不过我们一般仍然把WebSocket 服务器端部署到Web服务器上，因为可以借助HTTP 协议完成初始的握手（可选），并且共享HTTP服务器得端口（主要）。（好处是：不需要单独开放一个端口）

SignalR

1、ASP.NET Core SignalR（以下简称SignalR）是.NET Core平台中对WebSocket的封装，从而让开发人员可以更简单地进行WebSocket开发。
2、Hub（集线器），数据交换中心

SignalR中一个重要的组件是集线器（hub），它用于在WebSocket服务器端和所有客户端之间进行数据交换，所有连接到同一个集线器上的程序都可以互相通信。我们既可以通过集线器来完成服务器端向客户端的消息推送，也可以完成客户端之间的消息推送，当然WebSocket也允许客户端向服务器端发送消息。

SignalR使用场景

按照官方的说法，signal能够方便的为应用提供实时的服务器端和客户端双向通信功能，相当于服务器端能够观察到客户端的实时更新，并且将这个更新广播推送，这是一个很有用的功能。SignalR适用场景如下：

1、需要从服务器进行高频率更新的应用。 示例包括游戏、社交网络、投票、拍卖、地图和 GPS 应用。
2、仪表板和监视应用。 示例包括公司仪表板、即时销售更新或旅行警报。
3、协作应用。 协作应用的示例包括白板应用和团队会议软件。
4、需要通知的应用。 社交网络、电子邮件、聊天、游戏、旅行警报和很多其他应用都需使用通知。

2、基本SignalR项目

需要分别编写服务器端Hub和前端代码

1、创建Web API项目，创建一个继承自Hub类

public class ChatRoomHub:Hub
{
	public Task SendPublicMessage(String message)
	{
		string connId = this.Context.ConnectionId;
		string msg = $"{connId}{DateTime.Now}{message}";
		//某个客户端发送了消息msg 将他广播到其他客户端，广播模式项目中不可取
		//All 表示连接到的所有客户端
		return Clients.All.SendAsync("ReceivePublicMessage",msg);
	}
}

builder.Service.AddSignalR()
在 app.MapControllers() 之前调用
app.MapHub<ChatRoomHub>("/Hubs/ChatRoomHub") //默认还要启用CORS

新建WebAPI 项目

编写MyHub类

添加配置文件

2、跨域

在 app.MapControllers() 之前调用
app.MapHub(“/Hubs/ChatRoomHub”) //默认还要启用CORS

基本SignalR项目2
builder.Services.AddSignalR();stringl] urls = new[] {"http://localhost:3000" };
builder.Services.AddCors(options =>
options.AddDefaultPolicy(builder => 
builder.WithOrigins(urls)
	.AllowAnyMethod().AllowAnyHeader().AllowCredentials())
);
var app = builder.Build();//这里省略其他UsexxX代码

app.UseCors();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapHub<ChatRoomHub>("/Hubs/chatRoomHub");
app.MapControllers();

完整代码

using SignalRHttps.Hubs;

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

//跨域
string[] urls = new[] { "http://localhost:3000", "http://localhost:8080" };
builder.Services.AddCors(opt =>
                         {
    opt.AddDefaultPolicy(builder => builder.WithOrigins(urls).AllowAnyMethod().AllowAnyHeader().AllowCredentials());
});

// 引用SignalR
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

// 使用跨域
app.UseCors();

app.UseHttpsRedirection();


app.UseAuthentication();
app.UseAuthorization();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting(); // 路由中间件

// 将路径请求传入到SingalR.Hub类型中
// 泛型中的名字对应于Hubs文件夹下的类文件的名字
app.MapHub<ProgressHub>("/progressHub");

app.MapControllers(); // 路由配置
app.Run();

3、前端代码

项目目录下新建 FrontEnd

基本SignalR项目3
3、编写前端项目。
yarn create @vitejs/app 
项目名字安装SignalR的JavaScript客户端SDK:npm install@microsoft/signalr
<template>
<input type="text"v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress"/><div><ul>
<li v-for="(msg,index) instate.messages" :key="index">{{msg}}</li>
</ul></div>
</template>

打开cmd 执行命令



成功

编写页面

基本SignalR项目4
<script>
import { reactive,onMounted } from 'vue';
import * as signalR from '@microsoft/signalr';
let connection;
export default {name: 'Login',
setup() { const state = reactive({ userMessage: "", messages: [] });
const txtMsgOnkeypress = async function (e) {
	if (e.keyCode != 13) return;
	await connection.invoke("SendPublicMessage",state.userMessage); state.userMessage = ""; };
	onMounted(asyncfunction () {
	connection= newsignalR.HubConnectionBuilder()
	.withUrl('https://localhost:7112/Hubs/ChatRoomHub’)
	.withAutomaticReconnect().build();
	await connection.start();
connection.on('ReceivePublicMessage',msg =>{
state.messages.push(msg);
		});
		});
return { state, txtMsgOnkeypress };
	},
	}
</script>

效果图

3、SignalR的协议协商

协议协商

1、SignalR支持多种服务器推送方式:Websocket、Server-Sent Events、长轮询。默认按顺序尝试。
2、F12查看协商过程。
3、websocket和HTTP是不同的协议，为什么能用同一个端口
4、在【开发人员工具】的【网络】页签中看WebSocket通信过程。