随着.NET Core 2.0的发布,SignalR作为其中的重要组成部分,也迎来了新的发展。SignalR是一个库,允许开发者在服务器端和客户端之间建立实时的双向通信。在.NET Core 2.0中,SignalR被重新设计,以更好地支持跨平台开发。本文将详细介绍如何在ASP.NET Core2.0中使用SignalR技术,包括环境搭建、代码实现以及客户端支持。
要使用ASP.NET Core2.0中的SignalR,首先需要引用以下两个包:
Microsoft.AspNetCore.SignalR
Microsoft.AspNetCore.SignalR.Http
目前,ASP.NET Core2.0和SignalR都处于预览版本,因此无法直接通过NuGet找到SignalR包。要添加引用,需要访问MyGet,并为项目添加NuGet源。
在程序的根目录下,创建一个新的NuGet.Config文件,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<clear />
<add key="aspnetcidev" value="https://dotnet.myget.org/F/aspnetcore-ci-dev/api/v3/index.json" />
<add key="api.nuget.org" value="https://api.nuget.org/v3/index.json" />
</packageSources>
</configuration>
在项目的csproj文件中添加对上述两个包的引用:
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
<PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-alpha1-final" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.Http" Version="0.0.1-alpha" />
在Startup类的ConfigureServices方法中添加以下代码:
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
}
在Startup类的Configure方法中添加以下代码:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles();
app.UseSignalR(routes =>
{
routes.MapHub<Chat>("hubs");
});
}
创建一个名为Chat的HUB类,代码如下:
public class Chat : Hub
{
public override async Task OnConnectedAsync()
{
await Clients.All.InvokeAsync("Send", $"{Context.ConnectionId} joined");
}
public override async Task OnDisconnectedAsync(Exception ex)
{
await Clients.All.InvokeAsync("Send", $"{Context.ConnectionId} left");
}
public Task Send(string message)
{
return Clients.All.InvokeAsync("Send", $"{Context.ConnectionId}: {message}");
}
public Task SendToGroup(string groupName, string message)
{
return Clients.Group(groupName).InvokeAsync("Send", $"{Context.ConnectionId}@{groupName}: {message}");
}
public async Task JoinGroup(string groupName)
{
await Groups.AddAsync(Context.ConnectionId, groupName);
await Clients.Group(groupName).InvokeAsync("Send", $"{Context.ConnectionId} joined {groupName}");
}
public async Task LeaveGroup(string groupName)
{
await Groups.RemoveAsync(Context.ConnectionId, groupName);
await Clients.Group(groupName).InvokeAsync("Send", $"{Context.ConnectionId} left {groupName}");
}
public Task Echo(string message)
{
return Clients.Client(Context.ConnectionId).InvokeAsync("Send", $"{Context.ConnectionId}: {message}");
}
}
在wwwroot目录下创建一个名为chat.html的HTML静态文件,内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<h1 id="head1"></h1>
<div>
<select id="formatType">
<option value="json">json</option>
<option value="line">line</option>
</select>
<input type="button" id="connect" value="Connect"/>
<input type="button" id="disconnect" value="Disconnect"/>
</div>
<h4>To Everybody</h4>
<form class="form-inline">
<div class="input-append">
<input type="text" id="message-text" placeholder="Type a message, name or group"/>
<input type="button" id="broadcast" class="btn" value="Broadcast"/>
<input type="button" id="broadcast-exceptme" class="btn" value="Broadcast (All Except Me)"/>
<input type="button" id="join" class="btn" value="Enter Name"/>
<input type="button" id="join-group" class="btn" value="Join Group"/>
<input type="button" id="leave-group" class="btn" value="Leave Group"/>
</div>
</form>
<h4>To Me</h4>
<form class="form-inline">
<div class="input-append">
<input type="text" id="me-message-text" placeholder="Type a message"/>
<input type="button" id="send" class="btn" value="Send to me"/>
</div>
</form>
<h4>Private Message</h4>
<form class="form-inline">
<div class="input-prepend input-append">
<input type="text" name="private-message" id="private-message-text" placeholder="Type a message"/>
<input type="text" name="user" id="target" placeholder="Type a user or group name"/>
<input type="button" id="privatemsg" class="btn" value="Send to user"/>
<input type="button" id="groupmsg" class="btn" value="Send to group"/>
</div>
</form>
<ul id="message-list">
</ul>
</body>
</html>
值得注意的是,可能会发现这个文档中没有signalr-client.js,它是怎么来的呢?有两种方式:
第一种方式是下载SignalR源代码,找到Client-TS项目,编译TypeScript即可获得。
npm install signalr-client --registry https://dotnet.myget.org/f/aspnetcore-ci-dev/npm/