引言
在现代web开发中常常需要消息的及时性或者说数据的实时性，现在WebSocket的出现让这样的需求变得简单，而现实中也出现了对WebSocket的一些封装或者扩展，Signalr的底层采用的是优先websocket实现，同时兼顾其它方式，在asp.net core中我们就可以使用Signalr来进行服务器端的主动推送来实现将数据实时推送到客户端，我们使用一个简单的例子来了解下SignalR的使用。
新建项目
我们新建一个asp.net core web的项目，我这里使用的是VS2019版本，名称自己随意起，然后我们先安装项目中依赖的一些js，服务端项目自带，我们按照我的截图一步步来（以下案例来自微软官方），在本地测试通过
- 右击项目打开添加-客户端库
我们在弹出的窗口提供程序选择unpkg，然后在库中填入@aspnet/signalr@1，回车
这个地方我么选择压缩的或者不压缩的都可以，在生产环境下使用压缩的就可以了。下面我们先进行服务端一些代码的编写
- 新建一个继承自Hub类，这是Signalr所需要的
我这里新建一个Myhub文件夹，然后新建了一个ChatHub类，代码内容很简单，如下（记得添加using Microsoft.AspNetCore.SignalR;命名空间）
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
namespace WebApp.MyHub
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
//广播消息
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
ChatHub 类继承自 SignalR Hub 类。 Hub 类管理连接、组和消息。可通过已连接客户端调用 SendMessage，以向所有客户端发送消息。
- 配置 SignalR
在asp.net core中我们需要配置一下Signalr，我们在ConfigureServices中加入
services.AddSignalR();
然后在Configure中加入（在app.UseMvc之前加入）
app.UseSignalR(routes =>
{
routes.MapHub<ChatHub>("/chatHub");
});
以上就是我们服务端的所有代码，接下来我们简单的写一个客户端
- 新建index.html
在wwwroot文件夹下创建一个index.html和chat.js
引入signalr.js和chat.js
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-2"> </div>
<div class="col-6">
用户<input type="text" id="userInput" class="form-control" />
<br />
消息<input type="text" id="messageInput" class="form-control" />
<br />
<br />
<br />
<input type="button" id="sendButton" value="发送消息" class="btn btn-success" />
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6"> </div>
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
<script src="./lib/@aspnet/signalr/dist/browser/signalr.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
//chat.js
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//建立连接之前，按钮不可用
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
//var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + ":" + message;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
到此为止，一个简单的SignalR客户端和服务端就实现了，接下来我们启动测试一下项目，如下图
我们打开三个标签测试结果
如下图所示，发送的消息实时的传到了客户端并进行了展示，我们可以将更多的数据放到消息中传递，Signalr或者说webSocket的应用非常广泛，大屏展示，实时发送通知，服务器硬件监测以及聊天应用都可以实现。由于我本人也是第一次接触，更深入的内容还需要在项目中慢慢学习。
总结
最近工作共遇到了很多新的知识点，必须要一点一点，仔细的琢磨，慢慢深入到核心技术，选择适合自己的来学习，可能现在国内学习C#的人不是很多，但是学习依然是值得学习了，不断的总结经验，提升自己，希望大家共同进步！