ASP.NET Core 2.0 SignalR 实践指南

随着.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");
    });
}
    

添加HUB类

创建一个名为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/
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485