一、前言

上次讲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技术的更多相关文章

  1. asp.net core 2.0集成signalr

    在博客园也很多年了,一直未曾分享过什么东西,也没有写过博客,但自己也是汲取着博客园的知识成长的: 这两天想着不能这么无私,最近.NET CORE貌似挺流行的,闲来无事也自己搞了个asp.net cor ...

  2. ASP.NET CORE 2.0 Uses SignalR Technology

    https://www.codeproject.com/Articles/1208322/ASP-NET-CORE-Uses-SignalR-Technology

  3. ASP.NET Core 2.0 SignalR 示例

    # 一.前言 上次讲SignalR还是在<[在ASP.NET Core下使用SignalR技术](http://dotnet.ren/2017/02/21/%E5%9C%A8ASP-NET-Co ...

  4. asp.net core 2.0 webapi集成signalr

    asp.net core 2.0 webapi集成signalr   在博客园也很多年了,一直未曾分享过什么东西,也没有写过博客,但自己也是汲取着博客园的知识成长的: 这两天想着不能这么无私,最近.N ...

  5. 升级 ASP.NET Core 3.0 设置 JSON 返回 PascalCase 格式与 SignalR 问题

    由于一些 JS 组件要求 JSON 格式是 PascalCase 格式,新版本 ASP.NET Core 3.0 中默认移除了 Newtonsoft.Json ,使用了微软自己实现的 System.T ...

  6. ASP.NET 5 已死 - 隆重介绍 ASP.NET Core 1.0 和 .NET Core 1.0

    还没正式登场就死了?不能怪我标题党,是大神Scott在他博客上这么说的,我只是翻译了一下. 在1月20号最新的ASP.NET Community Standup视频中,微软aspnet开发组的大帅哥 ...

  7. ASP.NET 5已终结,迎来ASP.NET Core 1.0和.NET Core 1.0 转

    作者:yourber 命名是非常困难的事情,微软这次为了和ASP.NET4.6做区分,采用了全新的命名方式ASP.NET Core 1.0,它是一个全新的框架. ASP.NET 在过去的 15 年里是 ...

  8. [翻译] ASP.NET Core 3.0 的新增功能

    ASP.NET Core 3.0 的新增功能 全文翻译自微软官方文档英文版 What's new in ASP.NET Core 3.0 本文重点介绍了 ASP.NET Core 3.0 中最重要的更 ...

  9. 推荐:【视频教程】ASP.NET Core 3.0 入门

    墙裂推荐了,免费,通俗易懂,唯一可惜的就是不是我录的,更可惜的是人家录制完了快半年了我还没看完... 版权归原作者所有,建议新手还是边看边实践吧,要不然过完一遍发现自己啥也没学会,不要眼高手低 [视频 ...

随机推荐

  1. 如何获取url中文件的后缀名

    这是今天给学生解答问题的时候学生问的一个问题,我就在班级里给学生整体讲了一下,现在做一下分享,大家一起学习!! $url = 'http://www.sina.com.cn/abc/de/fg.php ...

  2. 学习笔记TF011:多层神经网络

    线性回归.对数几率回归模型,本质上是单个神经元.计算输入特征加权和.偏置视为每个样本输入特征为1权重,计算特征线性组合.激活(传递)函数 计算输出.线性回归,恒等式(值不变).对数几率回归,sigmo ...

  3. 2017年PHP培训机构排名

    2017年PHP培训机构排名 PHP培训属于IT培训的一个领域.随着互联网的火爆,PHP也变得异常火爆.通过对PHP培训机构的调查与了解,到底学员选择哪一家的PHP培训机构才能够学到真正的技术,PHP ...

  4. java zip4j 内存文件和磁盘文件 压缩和加密

    经常服务器需要对文件进行压缩,网络上流传较多的是从磁盘文件中来压缩成zip文件.但是常常服务器的文件存放在内存中,以byte[]形式存储在内存中.这个时候就不能使用网络上流传的常用方法了,这里就需要对 ...

  5. CCS Debug Assertion Failed

    下载安装CCS7.1后编译工程时报错,如下: 本来以为这种情况是由于CCS没有安装成功所导致的,但尝试安装其他版本时也发生同样的问题. 于是登录到 TI的wiki 上查找原因,在安装栏下说明: Ens ...

  6. Oracle体系结构之进程

    Oracle体系结构之进程 一.概述 Oracle中的每个进程都要执行一个特定的任务(或者一组任务),每个进程都会为自己分配内存(PGA)来完成它的任务.一个Oracle实例主要有以下3类进程: (1 ...

  7. 一位菜鸟的java 最基础笔记

    java的特性 简单性(Simple). 结构体系中立(Architecture Neutral). 面向对象(Object Oriented). 易于移植(Portable). 分布式(Distri ...

  8. GPU编程--kernels(2)

    "如何区分不同的数据单位单位呢?" "如何确定程序是在CPU端执行,还是GPU端执行呢?" "如何确定要调用的GPU线程数呢?" 下面举一个 ...

  9. 使用SQL语句使数据从坚向排列转化成横向排列(排班表)

    知识重点: 1.extract(day from schedule01::timestamp)=13 Extract 属于 SQL 的 DML(即数据库管理语言)函数,同样,InterBase 也支持 ...

  10. hibernate操作步骤(代码部分)

    1.加载hibernate的核心配置文件 2.创建SessionFactory对象 3.使用SessionFactory创建Session对象 4.开启事务(手动开启) 5.写具体逻辑crud,增删改 ...