在ASP.NET CORE 2.0使用SignalR技术
一、前言
上次讲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.jsondotnet 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 SignalR 高可用设计
ASP.NET SignalR 2.0入门指南
SignalR SelfHost实时消息,集成到web中,实现服务器消息推送
ASP.NET WebHooks Receivers 介绍-WebHooks 让其变得便捷
Signalr系列之虚拟目录详解与应用中的CDN加速实战
采用HTML5+SignalR2.0(.Net)实现原生Web视频
基于.NET SingalR,LayIM2.0实现的web聊天室
原文地址:http://www.cnblogs.com/maxzhang1985/p/7118426.html
.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注
在ASP.NET CORE 2.0使用SignalR技术相关推荐
- ASP.NET Core 2.1带来SignalR、Razor类库
随着.NET Core 2.1的发布,微软推出了 ASP.NET Core 2.1.这是一个强大的版本,包括实时通信库SignalR,更新的模板使GDPR更容易遵守,并且针对Angular.React ...
- ASP.NET Core 5.0新增功能摘要
.NET5.0发布了大半个月,从.NET Core3.1的平滑迁移体验令人心旷神怡,改个targetframework就完成迁移,不要太轻松!然而,ASP.NET Core5.0也有很多有意思的改变, ...
- [翻译] ASP.NET Core 3.0 的新增功能
全文翻译自微软官方文档英文版 What's new in ASP.NET Core 3.0 本文重点介绍了 ASP.NET Core 3.0 中最重要的更改,并提供相关文档的连接. Blazor Bl ...
- [译]ASP.NET Core 2.0 部分视图
问题 如何在ASP.NET Core 2.0中使用部分视图来重用页面的公共部分? 答案 新建一个空项目,在Startup中添加MVC服务和中间件: public void ConfigureServi ...
- Amazing ASP.NET Core 2.0
前言 ASP.NET Core 的变化和发展速度是飞快的,当你发现你还没有掌握 ASP.NET Core 1.0 的时候, 2.0 已经快要发布了,目前 2.0 处于 Preview 1 版本,意味着 ...
- ASP.NET Core 2.0 : 三. 项目结构
ASP.NET Core 2.0 : 三. 项目结构 原文:ASP.NET Core 2.0 : 三. 项目结构 本章我们一起来对比着ASP.NET Framework版本看一下ASP.NET Cor ...
- .NET Core ASP.NET Core 1.0在Redhat峰会上正式发布
众所周知,Red Hat和微软正在努力使.NET Core成为Red Hat企业版Linux (RHEL)系统上的一流开发平台选项.这个团队已经一起工作好几个月了,RHEL对.NET有许多需求.今天在 ...
- diskgeniusv4.4.0_.NET Core 3.0及ASP.NET Core 3.0前瞻
(给DotNet加星标,提升.Net技能) 转自:LineZerocnblogs.com/linezero/p/netcore3 前几天微软发布了< .NET Core 3.0 Preview ...
- ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现
from:https://damienbod.com/2015/12/13/asp-net-5-mvc-6-api-documentation-using-swagger/ 代码生成工具: https ...
最新文章
- Go 中切片索引与 Python 中列表索引的差异
- Memcached在Asp.net下的应用
- PHP 权威代码风格规范
- BZOJ 2561: 最小生成树(最小割)
- python怎么安装matplotlib-[Python]一步步安装numpy,matplotlib
- golang中的栈帧
- hdu区域赛在线热身赛 暨 第十二场组队赛
- React使用antd Table生成层级多选组件
- 命名空间跟作用域是什么关系_魏如萱许光汉首次合唱新歌《什么跟什么有什么关系》_娱乐频道...
- java中的time_java中的Time处理
- 微课|中学生可以这样学Python(5.6.2节):生成器推导式
- 如何修改Myeclipse中代码的字体大小?
- 运动目标跟踪(九)--Struck跟踪原理
- JAVA--scjp证书。
- selenium 确实是好东西,使用selenium-server 加快执行速度,对速度有很大提升,同时可以拆分服务,进行集群部署。
- 位运算实现求一个数的相反数
- VOS3000怎样给对接网关设置按主叫号码计费
- HEVC中的Merge Mode——x265代码getInterMergeCandidates()函数解析
- NB-IoT 的“前世今生” 1
- 再见了,MySQL之父!