SignalR服务器端消息推送

某些场景下，需要服务端向客户端发送请求。.net中采用封装了WebSocet的SignalR进行消息的处理。WebSocket独立于http，但是WebSocket服务器一般都部署在Web服务器上，所以需要借助http完成初始握手，并共享http的端口。

SignalR基本使用

SignalR中一个重要的组件就是集线器hub，他用于在WebSocket服务器端和所有客户端之间进行数据交换，所有连接到同一个集线器上的程序都可以互相通信。

1. 创建一个继承自Hub的类（Microsoft.AspNetCore.SignalR命名空间）的类，所有客户端和服务器都通过这个集线器进行通信。

public class ChatRoomHub:Hub
{
    public Task SendPublicMessage(string message)
    {
		string connId = this.Context.ConnectionId;//获得发送消息端的连接ID
		string msg = $"{connId} {DateTime.Now}:{message}";
        //发送到连接到集线器的所有客户端上
		return Clients.All.SendAsync("ReceivePublicMessage", msg);
    }
}

2. 编辑Program.cs，在builder.Build之前调用

builder.Services.AddSignalR();
//如果是前后端分离项目，WebSocket初始化握手需要通过http，所以启用跨域
string[] urls = new[] { "http://localhost:3000" };
builder.Services.AddCors(options =>
    options.AddDefaultPolicy(builder => builder.WithOrigins(urls)
        .AllowAnyMethod().AllowAnyHeader().AllowCredentials())
);
var app = builder.Build();
app.UseCors();
//在MapControllers之前调用，启用中间件
//当客户端通过SignalRq请求/Hubs/ChatRoomHub时，由ChatRoomHub处理
app.MapHub<ChatRoomHub>("/Hubs/ChatRoomHub");
app.MapControllers();

3. 前端vue组件

<template>
  <div>
    <input type="text" v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress" />
    <div> <ul> <li v-for="(msg,index) in state.messages" :key="index" >{{msg}}</li> </ul>
    </div>
  </div>
</template>
<script>
import * as signalR from '@microsoft/signalr'
export default {
  data() {
    return {
      name: "Login",
      state: {
        userMessage: "",
        messages: [],
      },
      connection: "",
    };
  },
  mounted() {
    this.connectInit();
  },
  methods: {
    async txtMsgOnkeypress(e) {
      if (e.keyCode != 13) return;
        //invoke调用集线器的方法，后面的方法名为集线器中定义的方法名
      await this.connection.invoke("SendPublicMessage", this.state.userMessage);
      this.state.userMessage = "";
    },
    async connectInit() {
        //创建客户端到服务端的连接
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl("http://localhost:7112/Hubs/ChatRoomHub")//服务端的地址
        .withAutomaticReconnect()//断开后重新连接，但是ConnectionId会改变
        .build();//构建完成一个客户端到集线器的连接
      await this.connection.start();//启动连接
        //用on来检测服务器使用SendAsync方法发送的消息，注意名称要相同
      this.connection.on("ReceivePublicMessage", (msg) => {
        this.state.messages.push(msg);
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>

SignalR分布部署

假设聊天室被部署到两台服务器上，客户端1、2在A服务器，客户端3、4在B服务器上，此时，1只能和2通信，3只能和4通信。微软提供了Redis服务器来解决这个问题。

1. Nugt安装Microsoft.AspNetCore.SignalR.StackExchangeRedis
2. 在Program.cs中的builder.Services.AddSignalR()后面加上

//第一个参数为redis服务器连接字符串
builder.Services.AddSignalR().AddStackExchangeRedis("127.0.0.1", options =>
{
    options.Configuration.ChannelPrefix = "Test1_";
});

SignalR身份验证

要求只有通过验证的用户才能连接集线器。

使用步骤如下（身份验证部分可参考(8.2 JWT(代替Session)）：

1. 在配置系统中配置一个名字为JWT的节点，配置相应的节点，并且创建一个JWTOption类。
2. NuGet安装Microsoft.AspNetCore.Authentication.JwtBearer
3. 对JWT进行配置在builder.Build之前添加

services.Configure<JWTOptions>(builder.Configuration.GetSection("JWT"));//实体配置类
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)//配置授权的各种属性
.AddJwtBearer(x => //配置JWT的承载
{
    //配置JWT绑定到JWTOptions新的实例，返回一个JWTOptions实例
	JWTOptions? jwtOpt = builder.Configuration.GetSection("JWT").Get<JWTOptions>();
	byte[] keyBytes = Encoding.UTF8.GetBytes(jwtOpt.SigningKey);
	var secKey = new SymmetricSecurityKey(keyBytes);
	x.TokenValidationParameters = new()//设置令牌验证参数
	{
		ValidateIssuer = false,
		ValidateAudience = false,
		ValidateLifetime = true,
		ValidateIssuerSigningKey = true,
		IssuerSigningKey = secKey
	};
     x.Events = new JwtBearerEvents
        {
            OnMessageReceived = context =>
            {
                //JWT默认放到了Authorization请求头中，但是WebSocket不支持请求头，
                //所以将JWT放到了URL中，然后在服务器中检测URL中的JWT
                var accessToken = context.Request.Query["access_token"];
                var path = context.HttpContext.Request.Path;
                if (!string.IsNullOrEmpty(accessToken) &&
                    (path.StartsWithSegments("/Hubs/ChatRoomHub")))
                {
                    //如果请求URL中有JWT并且请求路径为集线器
                    //就把JWT复制给Token,这样就可以直接解析和使用JWT了
                    context.Token = accessToken;
                }
                return Task.CompletedTask;
            }
        };
});

4. 在Program.cs中的app.UseAuthorization()前面加上app.UseAuthentication(),解决跨域和MapHub

 builder.Services.AddSignalR();
 //如果是前后端分离项目，WebSocket初始化握手需要通过http，所以启用跨域
 string[] urls = new[] { "http://localhost:3000" };
 builder.Services.AddCors(options =>
     options.AddDefaultPolicy(builder => builder.WithOrigins(urls)
         .AllowAnyMethod().AllowAnyHeader().AllowCredentials())
 );
 var app = builder.Build();
 app.UseCors();
 //在MapControllers之前调用，启用中间件
 //当客户端通过SignalRq请求/Hubs/ChatRoomHub时，由ChatRoomHub处理
 app.MapHub<ChatRoomHub>("/Hubs/ChatRoomHub");
 app.UseAuthentication();
 app.UseAuthorization();
 app.MapControllers();

5. 在控制类中增加登陆并且创建JWT的操作方法 （参考8.2 JWT(代替Session)）

6. 在集线器类上增加[Authorize]

    [Authorize]
    public class ChatRoomHub:Hub
    {
        public Task SendPublicMessage(string message)
        {
            //可以直接拿到name
            string name = this.Context.User!.FindFirst(ClaimTypes.Name)!.Value;
            string msg = $"{name} {DateTime.Now}:{message}";
            return Clients.All.SendAsync("ReceivePublicMessage", msg);
        }
    }
//[Authorize]可以加到集线器类上，也可以加到类中某个方法上
//如果加到方法上，则任意客户端可以连接到集线器，只是不能调用那个方法，这样不推荐

7. 前端页面

<template>
  <div>
    <fieldset>
      <legend>登录</legend>
      <div>
        用户名：<input  type="text"  v-model="state.loginData.name"  />
      </div>
      <div>
        密码：<input  type="password" v-model="state.loginData.password" >
      </div>
      <div>
        <input type="button" value="登录" v-on:click="loginClick" />
      </div>
    </fieldset>
    公屏： <input type="text"  v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress" />
    <div>  <ul> <li v-for="(msg,index) in state.messages"  :key="index"  >{{msg}}</li> </ul>
    </div>
  </div>
</template>
<script>
import * as signalR from "@microsoft/signalr";
import axios from 'axios';
export default {
  data() {
    return {
      connection: '',
      state: {
        accessToken: "",
        userMessage: "",
        messages: [],
        loginData: { name: "", password: "" },
        privateMsg: { destUserName: "", message: "" },
      },
    };
  },
  methods: {
    async startConn() {
        const transport = signalR.HttpTransportType.WebSockets;
        //skipNegotiation跳过协商
        //transport强制采用的通信方式
        const options = { skipNegotiation: true, transport: transport };
        //将JWT传递给服务器端
        options.accessTokenFactory = () => this.state.accessToken;
      this.connection = new signalR.
      HubConnectionBuilder()
                    .withUrl('http://localhost:7173/Hubs/ChatRoomHub', options)
                    .withAutomaticReconnect().build();
      try {
        await this.connection.start();
      } catch (err) {
        alert(err);
        return;
      }
      this.connection.on("ReceivePublicMessage", (msg) => {
        this.state.messages.push(msg);
      });
      alert("登陆成功可以聊天了");
    },
    async loginClick() {
    
    const {data:resp} = await axios.post('http://localhost:7173/api/Identity/Login',
                    this.state.loginData);
                    console.log(resp);
                this.state.accessToken = resp.data;
                this.startConn();
    },
    async txtMsgOnkeypress(e) {
      if (e.keyCode != 13) return;
      try {
        await this.connection.invoke(
          "SendPublicMessage",
          this.state.userMessage
        );
      } catch (err) {
        alert(err);
        return;
      }
      this.state.userMessage = "";
    }
    
  },
};
</script>
<style scoped>
</style>

针对部分客户端的消息推送

之前使用了Clients.All.SendAsync向连接到当前集线器的所有客户端进行消息推送，但是某些场景需要针对特定用户进行消息推送。

进行客户端筛选的时候，有3个筛选参数，ConnectionId，组以及用户ID。

另外集线器（Hub）有一个Groups属性，他可以对组成员进行管理。在将连接加入到组中的时候，如果组不存在则自动创建，注意，当客户端重连之后，需要将连接重新加入组。

集线器（Hub）的Clients属性可以对当前集线器用户进行筛选。

基于上面的代码，增加向特定客户端发送消息的功能

1. 集线器类中增加

       //参数包含目标用户名
	public async Task<string> SendPrivateMessage(string destUserName, string message)
        {
            User? destUser = UserManager.FindByName(destUserName);//获取目标用户
            if (destUser == null)
            {
                return "DestUserNotFound";
            }
            string destUserId = destUser.Id.ToString();//目标用户的id
            string srcUserName = this.Context.User!.FindFirst(ClaimTypes.Name)!.Value;//发送端的用户
            string time = DateTime.Now.ToShortTimeString();
        	//过滤出目标用户，并发送消息
            await this.Clients.User(destUserId).SendAsync("ReceivePrivateMessage",
                srcUserName, time, message);
            return "ok";
        }

2. 前端页面增加私聊功能

//在template中增加
...
<div>
      私聊给<input
        type="text"
        v-model="state.privateMsg.destUserName"
      />
      说<input
        type="text"
        v-model="state.privateMsg.message"
        v-on:keypress="txtPrivateMsgOnkeypress"
      />
</div>

<script>
    //增加私聊接收方法
    ...
this.connection.on("ReceivePrivateMessage", (srcUser, time, msg) => {
        this.state.messages.push(srcUser + " " + time + "===" + msg);
      });
    //增加私聊发送方法
    ...
async txtPrivateMsgOnkeypress(e) {
      if (e.keyCode != 13) return;
      const destUserName = this.state.privateMsg.destUserName;
      const msg = this.state.privateMsg.message;
      try {
        const ret = await connection.invoke(
          "SendPrivateMessage",
          destUserName,
          msg
        );
        if (ret != "ok") {
          alert(ret);
        }
      } catch (err) {
        alert(err);
        return;
      }
      state.privateMsg.message = "";
    }
</script>

注意：SignalR不会消息持久化，如果目标用户不在线就收不到消息，再次上线仍然收不到。如果需要持久化，则需要自行保存在数据库

外部向集线器推送消息

不通过集线器向客户端发送消息。

实现新增一个用户，向聊天室所有客户端推送欢迎xxx的消息。

1. 在控制器中通过构造函数注入IHubContext服务，并向连接到ChatRoomHub集线器中的客户端推送消息。

public class Test1Controller : ControllerBase
    {
		private readonly IHubContext<ChatRoomHub> hubContext;
		public Test1Controller(IHubContext<ChatRoomHub> hubContext)
		{
			this.hubContext = hubContext;
		}
}

2. 为控制器增加一个用于新增用户的操作。

		[HttpPost]
		public async Task<IActionResult> AddUser(AddNewUserRequest req)
		{
			//这里省略执行用户注册的代码
			await hubContext.Clients.All.SendAsync("UserAdded", req.UserName);
			return Ok();
		}

3. 在前端增加UserAdded的监听代码

this.connection.on("UserAdded", (userName) => {
        this.state.messages.push("系统消息：欢迎" + userName + "加入我们!");
      });

注意：IHubContext不能向“当前连接的所有客户端（Caller）”、“除了当前连接之外的客户端”推送消息（others），因为实在集线器之外调用，所以请求不在一个SignalR连接中，也就没有SignalR连接的概念

建议：在使用SignalR的时候，Hub类中不应该有数据库操作等比较好事的操作，Hub类只应该用于消息发布，且SignalR客户端给服务器端传递消息的时间不能超过30s，否则会报错