版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011127019/article/details/90789812
一、定义Hub集线器
在Asp.Net Core Web项目中已经内置了SignalR的类库可以直接使用。
public class CountService
{
private int _count = 0;
public int getLastestCount()
{
return _count++;
}
}
public class CountHub : Hub
{
private readonly CountService _countService;
public CountHub(CountService countService)
{
_countService = countService;
}
public async Task GetLatestCount()
{
int count;
do
{
count = _countService.getLastestCount();
Thread.Sleep(1000);
await Clients.All.SendAsync("ReceiveUpdate", count);
} while (count < 10);
await Clients.All.SendAsync("Finished");
}
}
二、配置启用SignalR
1.注册SignalR
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
//添加SignalR
services.AddSingleton<CountService>();
services.AddSignalR();
}
2.使用配置SignalR的集线器
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.UseMvc();
//配置SignalR
app.UseSignalR(routes => routes.MapHub<CountHub>("/count"));
}
3.定义操作控制器,响应处理
[Route("api/[controller]")]
[ApiController]
public class CountController : ControllerBase
{
//接受集线器,用于通知客户端
private readonly IHubContext<CountHub> _countHub;
public CountController(IHubContext<CountHub> countHub)
{
_countHub = countHub;
}
[HttpPost]
public async Task<IActionResult> Post()
{
await _countHub.Clients.All.SendAsync("someFunc", new { random = "abcd" });
return Accepted(1);
}
}
三、添加客户端使用库
1.在vs中右键添加signarl客户端库,输入@aspnet/signalr@1
2.引用类库文件到html中,编写js链接代码,处理操作逻辑
3.执行操作定义代码:
<script src="@aspnet/signalr/dist/browser/signalr.js"></script>
<script>
var connection = new signalR.HubConnectionBuilder()
.withUrl("/count")
.build();
//定义操作
connection.on('someFunc', function (obj) {
showText("sumeFunc:" + JSON.stringify(obj));
});
connection.on('ReceiveUpdate', function (update) {
showText("update:" + JSON.stringify(update));
});
connection.on('Finished', function () {
//关闭连接
connection.stop();
console.info('关闭连接');
});
connection.start().catch(function (err) {
connection.error(err);
});
function showText(str) {
$('#resultOne').append(str).append('<br />');
}
//执行提交操作
$('#btnOne').click(function () {
$.post('/api/count', { text: $('#txtOne').val() }, function (res) {
console.info(res);
});
});
$('#btnTwo').click(function () {
//客户端调用服务端
connection.invoke('getLatestCount').catch(function (err) {
console.error(err);
});
});
</script>
更多: