在使用前我们先了解一下什么是SignalR。

（一）初识

什么是SignalR

SignalR支持websockets实时通信，那什么又是websockets，这里使用我们所熟知的HTTP来对比,首先他们都基于TCP协议。

从表中我们看到websockets支持二进制通信，这就说明了性能和并发能力更强，其次websockets可以借助HTTP完成初始握手，并且共享HTTP的服务器端口，也就是说HTTP使用的80端口，那么websockets也同样可以使用80端口。 

SignalR的使用场景

1、各种软件主动发送推送信息（如手机通知栏中的各种广告和提示）

2、对软件的监控面板（如你进入到了移动app手机通知栏中显示你的话费余额等信息）

3、聊天应用

（二）.NET中使用SignalR

在.NET中微软有一个为 SignalR 应用程序提供类：

Microsoft.AspNetCore.SignalR

该类中有一个基类Hub类，我们需要创建一个方法继承自Hub这个类，在Web Api项目中我这里创建一个Myhub继承自Hub。这里需要引入命名空间：

using Microsoft.AspNetCore.SignalR;

public class Myhub : Hub
{
    public Task SendPublicMsg(string msg)
    {
        string msgToSend = msg;
        return Clients.All.SendAsync("publicMsgReceived", msgToSend);
    }
}

 这个方法的作用是前端输入什么，我们后端就返回什么，需要注意双引号中的内容我们后面需要使用（publicMsgReceived）。

接下来我们需要在program.cs文件中引入中间件调用SignalR。

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddSignalR();//调用SignalR
builder.Services.AddMemoryCache();

 同时在program.cs文件中需要配置一个访问地址。

app.MapHub<Myhub>("/Myhub")括号里面随便写这是一个地址名称，记住这个名称就行。

app.UseCors();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapHub<Myhub>("/Myhub");//后面前端使用的一个地址

app.MapControllers();

app.Run();

到这里后端就简单配置完成了。

（三）在VUE中使用后端配置的SignalR

 vue中使用我们首先要通过npm安装SignalR

npm install @microsoft/signalr

 在vue项目中引入

import * as signalR from '@microsoft/signalr';

在methods中我们定义两个方法一个用于连接后端生命周期调用，一个用于调用后端点击事件。

需要注意的三个地方：

1、.withUrl('https://localhost:44334/Myhub')括号里面的地址是后端的域名加上我们在program.cs文件中配置的访问地址。

2、this.connection.on('publicMsgReceived'，res=>{}）单引号中的名称是后端myhub类中双引号的名称。

3、this.connection.invoke('SendPublicMsg', this.sigtext)单引号中是后端myhub类中的SendPublicMsg方法。

<div id="Signa">
	<button @click="sendMessage">发送</button>
	<input type="text" v-model="sigtext"/>
	<p v-for="i in msgs">{{i}}</p>
</div>

data() {
	return {
		connection: null,
		sigtext:null,
		msgs: []
	}
},
methods: {
	startConnection() {
		//创建连接
		this.connection = new signalR.HubConnectionBuilder()
			.withUrl('https://localhost:44334/Myhub') // 替换为你的SignalR服务URL
			.withAutomaticReconnect() //断开自动连接
			.build();
					
		//注册
		this.connection.on('publicMsgReceived', res=>{
			this.msgs.push(res)
		});
				
		//开始连接
		this.connection.start();
	},
			
	//调用后端方法
	sendMessage() {
		this.connection.invoke('SendPublicMsg', this.sigtext)
	}

},
created() {
	this.startConnection();
}

到这里前后端的一个简单配置就完成了。