钢材料 网站建设 中企动力,国外代理ip地址和端口,网站开发过程的基本环节,网页设计案例收集一、前言
上次讲SignalR还是在《在ASP.NET Core下使用SignalR技术》文章中提到#xff0c;ASP.NET Core 1.x.x 版本发布中并没有包含SignalR技术和开发计划中。时间过得很快#xff0c;MS已经发布了.NET Core 2.0 Preview 2 预览版#xff0c;距离正式版已经不远了#xf…一、前言
上次讲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 version1.0 encodingutf-8?configurationpackageSourcesclear/add keyaspnetcidev valuehttps://dotnet.myget.org/F/aspnetcore-ci-dev/api/v3/index.json/add keyapi.nuget.org valuehttps://api.nuget.org/v3/index.json//packageSources/configuration
2.编辑项目文件csproj
添加上面提到的两个包的引用 PackageReference IncludeMicrosoft.AspNetCore.All Version2.0.0-preview3-26040 /PackageReference IncludeMicrosoft.AspNetCore.SignalR Version1.0.0-preview3-26037 /PackageReference IncludeMicrosoft.AspNetCore.SignalR.Http Version1.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.MapHubChat(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 htmlhtmlheadmeta charsetutf-8 /title/title/headbodyh1 idhead1/h1divselect idformatTypeoption valuejsonjson/optionoption valuelineline/option/selectinput typebutton idconnect valueConnect /input typebutton iddisconnect valueDisconnect //divh4To Everybody/h4form classform-inlinediv classinput-appendinput typetext idmessage-text placeholderType a message, name or group /input typebutton idbroadcast classbtn valueBroadcast /input typebutton idbroadcast-exceptme classbtn valueBroadcast (All Except Me) /input typebutton idjoin classbtn valueEnter Name /input typebutton idjoin-group classbtn valueJoin Group /input typebutton idleave-group classbtn valueLeave Group //div/formh4To Me/h4form classform-inlinediv classinput-appendinput typetext idme-message-text placeholderType a message /input typebutton idsend classbtn valueSend to me //div/formh4Private Message/h4form classform-inlinediv classinput-prepend input-appendinput typetext nameprivate-message idprivate-message-text placeholderType a message /input typetext nameuser idtarget placeholderType a user or group name /input typebutton idprivatemsg classbtn valueSend to user /input typebutton idgroupmsg classbtn valueSend to group //div/formul idmessage-list/ul/body/htmlscript srcsignalr-client.js/scriptscript srcutils.js/scriptscriptvar 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/ 三、最后 附上一个可用的Demohttps://github.com/maxzhang1985/AspNetCore.SignalRDemo GitHubhttps://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加速实战采用HTML5SignalR2.0(.Net)实现原生Web视频基于.NET SingalR,LayIM2.0实现的web聊天室
原文地址http://www.cnblogs.com/maxzhang1985/p/7118426.html .NET社区新闻深度好文微信中搜索dotNET跨平台或扫描二维码关注
