一、前言

上次讲SignalR还是在《在ASP.NET Core下使用SignalR技术》文章中提到，ASP.NET Core 1.x.x 版本发布中并没有包含SignalR技术和开发计划中。时间过得很快，MS已经发布了.NET Core 2.0 Preview 2 预览版，距离正式版已经不远了，上文中也提到过在ASP.NET Core 2.0中的SignalR将做为重要的组件与MVC等框架一起发布。它的开发团队也兑现了承诺，使用TypeScript对它的javascript客户端进行重写，服务端方面也会贴近ASP.NET Core的开发方式，比如会集成到ASP.NET Core依赖注入框架中。

二、环境搭建

要在ASP.NET Core 2.0中使用SignalR，要先引用Microsoft.AspNetCore.SignalR 、 Microsoft.AspNetCore.SignalR.Http 两个Package包。

目前ASP.NET Core 2.0与SignalR还都是Preview版本，所以NUGET上也找不到SignalR的程序包，想添加引用我们就得去MyGet上去找找。既然要用MyGet的话，就要为项目添加NuGet源了。

1.添加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>

2.编辑项目文件csproj

添加上面提到的两个包的引用：

    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0-preview3-26040" />

    <PackageReference Include="Microsoft.AspNetCore.SignalR" Version="1.0.0-preview3-26037" />

    <PackageReference Include="Microsoft.AspNetCore.SignalR.Http" Version="1.0.0-preview3-26037" />

我在这个示例里使用的是目前的最高,当然版本号每天都有可能发生变化，最新版本的SignalR，是不兼容.NET Core SDK 2.0 Preview 1中默认创建项目时Microsoft.AspNetCore.All这个包的版本的，这里也修改修改一下版本号为：Microsoft.AspNetCore.All 2.0.0-preview3-26040。

当然也可以用dotnet cli 来添加包引用：

dotnet add package Microsoft.AspNetCore.SignalR --version 1.0.0-preview3-26037 --source https://dotnet.myget.org/F/aspnetcore-dev/api/v3/index.json

dotnet add package Microsoft.AspNetCore.SignalR.Http --version 1.0.0-preview3-26037 --source https://dotnet.myget.org/F/aspnetcore-dev/api/v3/index.json

3.添加配置代码

我们需要在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");

    });

}

4.添加一个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}");

    }

}

5.客户端支持

　　在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>

<script src="signalr-client.js"></script>

<script src="utils.js"></script>

<script>

var isConnected = false;

function invoke(connection, method, ...args) {

    if (!isConnected) {

        return;

    }

    var argsArray = Array.prototype.slice.call(arguments);

    connection.invoke.apply(connection, argsArray.slice(1))

            .then(result => {

                console.log("invocation completed successfully: " + (result === null ? '(null)' : result));

                if (result) {

                    addLine('message-list', result);

                }

            })

            .catch(err => {

                addLine('message-list', err, 'red');

            });

}

function getText(id) {

    return document.getElementById(id).value;

}

let transportType = signalR.TransportType[getParameterByName('transport')] || signalR.TransportType.WebSockets;

document.getElementById('head1').innerHTML = signalR.TransportType[transportType];

let connectButton = document.getElementById('connect');

let disconnectButton = document.getElementById('disconnect');

disconnectButton.disabled = true;

var connection;

click('connect', event => {

    connectButton.disabled = true;

    disconnectButton.disabled = false;

    let http = new signalR.HttpConnection(`http://${document.location.host}/hubs`, { transport: transportType });

    connection = new signalR.HubConnection(http);

    connection.on('Send', msg => {

        addLine('message-list', msg);

    });

    connection.onClosed = e => {

        if (e) {

            addLine('message-list', 'Connection closed with error: ' + e, 'red');

        }

        else {

            addLine('message-list', 'Disconnected', 'green');

        }

    }

    connection.start()

        .then(() => {

            isConnected = true;

            addLine('message-list', 'Connected successfully', 'green');

        })

        .catch(err => {

            addLine('message-list', err, 'red');

        });

});

click('disconnect', event => {

    connectButton.disabled = false;

    disconnectButton.disabled = true;

    connection.stop()

        .then(() => {

            isConnected = false;

        });

});

click('broadcast', event => {

    let data = getText('message-text');

    invoke(connection, 'Send', data);

});

click('join-group', event => {

    let groupName = getText('message-text');

    invoke(connection, 'JoinGroup', groupName);

});

click('leave-group', event => {

    let groupName = getText('message-text');

    invoke(connection, 'LeaveGroup', groupName);

});

click('groupmsg', event => {

    let groupName = getText('target');

    let message = getText('private-message-text');

    invoke(connection, 'SendToGroup', groupName, message);

});

click('send', event => {

    let data = getText('me-message-text');

    invoke(connection, 'Echo', data);

});

</script>

值得注意的是，你可能会发现，目前找不到signalr-client.js这个文件，它是怎么来的呢，有两种方式：

第1种是通过下载SignalR的源代码，找到Client-TS项目，对TypeScript进行编译可以得到。

第2种比较简单通过Npm可以在线获取：

npm install signalr-client --registry https://dotnet.myget.org/f/aspnetcore-ci-dev/npm/

三、最后

　　附上一个可用的Demo：https://github.com/maxzhang1985/AspNetCore.SignalRDemo

　　GitHub：https://github.com/maxzhang1985/YOYOFx 如果觉还可以请Star下，欢迎一起交流。

　　.NET Core 开源学习群：214741894

在ASP.NET CORE 2.0使用SignalR技术的更多相关文章

asp.net core 2.0集成signalr
在博客园也很多年了,一直未曾分享过什么东西,也没有写过博客,但自己也是汲取着博客园的知识成长的: 这两天想着不能这么无私,最近.NET CORE貌似挺流行的,闲来无事也自己搞了个asp.net cor ...
ASP.NET CORE 2.0 Uses SignalR Technology
https://www.codeproject.com/Articles/1208322/ASP-NET-CORE-Uses-SignalR-Technology
ASP.NET Core 2.0 SignalR 示例
# 一.前言上次讲SignalR还是在<[在ASP.NET Core下使用SignalR技术](http://dotnet.ren/2017/02/21/%E5%9C%A8ASP-NET-Co ...
asp.net core 2.0 webapi集成signalr
asp.net core 2.0 webapi集成signalr 在博客园也很多年了,一直未曾分享过什么东西,也没有写过博客,但自己也是汲取着博客园的知识成长的: 这两天想着不能这么无私,最近.N ...
升级 ASP.NET Core 3.0 设置 JSON 返回 PascalCase 格式与 SignalR 问题
由于一些 JS 组件要求 JSON 格式是 PascalCase 格式,新版本 ASP.NET Core 3.0 中默认移除了 Newtonsoft.Json ,使用了微软自己实现的 System.T ...
ASP.NET 5 已死 - 隆重介绍 ASP.NET Core 1.0 和 .NET Core 1.0
还没正式登场就死了?不能怪我标题党,是大神Scott在他博客上这么说的,我只是翻译了一下. 在1月20号最新的ASP.NET Community Standup视频中,微软aspnet开发组的大帅哥 ...
ASP.NET 5已终结，迎来ASP.NET Core 1.0和.NET Core 1.0 转
作者:yourber 命名是非常困难的事情,微软这次为了和ASP.NET4.6做区分,采用了全新的命名方式ASP.NET Core 1.0,它是一个全新的框架. ASP.NET 在过去的 15 年里是 ...
[翻译] ASP.NET Core 3.0 的新增功能
ASP.NET Core 3.0 的新增功能全文翻译自微软官方文档英文版 What's new in ASP.NET Core 3.0 本文重点介绍了 ASP.NET Core 3.0 中最重要的更 ...
推荐：【视频教程】ASP.NET Core 3.0 入门
墙裂推荐了,免费,通俗易懂,唯一可惜的就是不是我录的,更可惜的是人家录制完了快半年了我还没看完... 版权归原作者所有,建议新手还是边看边实践吧,要不然过完一遍发现自己啥也没学会,不要眼高手低 [视频 ...

随机推荐

【JAVAWEB学习笔记】02_HTML&CSS
//--------------纯文本版------------------------------------------------- 今日新增单词(更多属性查看手册) form:表单 (要提交的 ...
webapi “ObjectContent`1”类型未能序列化内容类型“application/xml; charset=utf-8”的响应正文。
今天在来一发 webapi的一个知识点相信用过webapi的对这个错误已经看在眼里痛在心里了把我百度也搜了一下看了一下然后发现他们的解决办法并没有什么软用. 然后想起来当时上学的 ...
swift pod第三方OC库使用use_frameworks!导致#import提示无法找到头文件
以MBProgressHUD为例子 swift中Podfile文件一般都会加上use_frameworks! 这样就可以直接通过import MBProgressHUD来访问MBProgressHUD ...
html学习笔记 - 列表
 <ul type = square> <li><a href="https://www.baidu.com"& ...
教育类APP开发现新增长，多款APP该如何突围？
"十二五"以来,国家共出台相关的重大教育政策文件741个,而进入到"十三五"时期教育领域综合改革深入推进的关键期,不断促进教育现代化的实现.加快迈入人力资源强国 ...
countDownLatch和cyclicBarrier
< Effecit In Java >说过,从java 1.5发现版本开始, 就不建议使用wait和notify,它们使用比较困难,可以使用更高级并发工具来替代. 图一所说的同步器是指那些 ...
Java如何转换protobuf-net中的bcl.DateTime对象
一.定义DateTime Message 参考文档:https://github.com/mgravell/protobuf-net/blob/master/src/Tools/bcl.proto m ...
js写插件教程
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
python爬虫从入门到放弃（九）之实例爬取上海高级人民法院网开庭公告数据
通过前面的文章已经学习了基本的爬虫知识,通过这个例子进行一下练习,毕竟前面文章的知识点只是一个一个单独的散知识点,需要通过实际的例子进行融合分析网站其实爬虫最重要的是前面的分析网站,只有对要爬取 ...
简化布隆过滤器——BitMap
简化布隆过滤器--BitMap 前言前段开发项目试就发现,一部分的代码实现存在着一些性能上的隐患.但当时忙于赶进度和由于卡发中的不稳定因素,想了许多解决方案也没有机会实施.最近,正好趁个机会进行一系 ...

在ASP.NET CORE 2.0使用SignalR技术