Asp-net-SignalR-實(shí)現(xiàn)服務(wù)端消息推送到Web端

ASignalR實(shí)現(xiàn)效勞端消息推送到Web端之前的文章介紹過ASignalR,

ASP.NETSignalR是一個(gè)ASP.NET下的類庫(kù)，可以在ASP.NET的Web工程中實(shí)現(xiàn)實(shí)時(shí)通信.

今天我們來實(shí)現(xiàn)效勞端消息推送到Web端,

首先回憶一下它抽象層次圖是這樣的:實(shí)際上ASignalR2實(shí)現(xiàn)效勞端消息推送到Web端,更加簡(jiǎn)單.為了獲取更好的可伸縮性,我們引入消息隊(duì)列,看如下根本流程圖:消息隊(duì)列MQ監(jiān)聽,在Website效勞端一收到消息,馬上通過Signalr推送播送到客戶端.

創(chuàng)立ASP.NETMVCWEBAPP,

從NuGet安裝SignalR2.12Install-Package具體實(shí)現(xiàn)代碼,是這樣的,我們?cè)黾右粋€(gè)空的Hub:publicclassFeedHub:Hub{publicvoidInit(){}}是簡(jiǎn)單的消息模型,標(biāo)題與正文屬性:

[Serializable]publicclassPushMessageModel{publicintId{get;set;}publicstringMSG_TITLE{get;set;}publicstringMSG_CONTENT{get;set;}}效勞端推送具體類,記錄日志,創(chuàng)立消息隊(duì)列實(shí)例,監(jiān)聽,等待收取消息.這里我們使用的是AcitveMQ的.net客戶端.ActiveMQListenAdapter是一個(gè)封裝過的對(duì)象.

publicclassMQHubsConfig{privatestaticILoggerlog=newLogger("MQHubsConfig");///<summary>///Registersthemqlistenandhubs.///</summary>publicstaticvoidRegisterMQListenAndHubs(){varactivemq=Megadotnet.MessageMQ.Adapter.ActiveMQListenAdapter<PushMessageModel>.Instance(MQConfig.MQIpAddress,MQConfig.QueueDestination);activemq.MQListener+=m=>{log.InfoFormat("從MQ收到消息{0}",m.MSG_CONTENT);GlobalHost.ConnectionManager.GetHubContext<FeedHub>().Clients.All.receive(m);};activemq.ReceviceListener<PushMessageModel>();}}上面有一句關(guān)鍵代碼GlobalHost.ConnectionManager.GetHubContext<FeedHub>().Clients.All.receive(m);

這里使用了GetHubContext方法后,直接來播送消息.需要在MVCApplication下加載:publicclassMvcApplication:{protectedvoidApplication_Start(){AreaRegistration.RegisterAllAreas();FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);RouteConfig.RegisterRoutes(RouteTable.Routes);BundleConfig.RegisterBundles(BundleTable.Bundles);MQHubsConfig.RegisterMQListenAndHubs();}}同時(shí)需要增加一個(gè)Starup.cs,用于Owin[assembly:OwinStartup(typeof(RealTimeApp.Startup))]namespaceRealTimeApp{publicclassStartup{publicvoidConfiguration(IAppBuilderapp){//Anyconnectionorhubwireupandconfigurationshouldgohereapp.MapSignalR();}}}接下來是客戶端App.js:functionApp(){varinit=function(){Feed();$.=true;$.().done(function(){console.log("Connected!");$(document).trigger("Connected");}).fail(function(){console.log("CouldnotConnect!");});};init();};Feed.js具體與SignalR.js通信,創(chuàng)立名為receive的function,與效勞端對(duì)應(yīng)functionFeed(){varchat=undefined;varinit=function(){//Referencetheauto-generatedproxyforthehub.chat=$.connection.feedHub;//Createafunctionthatthehubcancallbacktodisplaymessages.=function(item){varselector="ul.feed-listli[data-id="+item.Id+"]";if(!($(selector).length>0)){$("ul.feed-list").prepend($(".feed-template").render(item));$("ul.feed-listli:gt(3)").remove();}$.messager.show({title:'Tips',msg:item.MSG_CONTENT,showType:'show'});};//Starttheconnection.$.().done(function(){();});};init();};上面的javascript代碼與效勞端有通信,具體看如下列圖:在Index.cshtml,

我們需要引用SignalR客戶端JS,放置hubs,這里我們使用了jsrender,

easyui.js來呈現(xiàn)推送的消息.@modeldynamic@sectionScripts{<linkhref="/Content/themes/default/window.css"rel="stylesheet"/><linkhref="~/Content/themes/default/progressbar.css"rel="stylesheet"/><linkhref="~/Content/themes/default/linkbutton.css"rel="stylesheet"/><scriptsrc="~/Scripts/jquery.signalR-2.1.2.min.js"></script><!--ReferencetheautogeneratedSignalRhubscript.--><scriptsrc="~/signalr/hubs"></script><scriptsrc="~/Scripts/jsrender.js"></script><scriptsrc="~/Scripts/jquery.easyui.min-1.4.1.js"></script>@Scripts.Render("~/Scripts/project.js")<scripttype="text/javascript">$(document).ready(function(){varapp=newApp();});</script>}<divclass="row-fluid"><divclass="span8"><divclass="widget"><divclass="widget-header"><h2>Feed</h2></div><divclass="widget-content"><ulclass="span12feed-list"></ul></div></div></div></div><scriptclass="chat-template"type="text/x-jquery-tmpl"><li><p>{{>Message}}</p></li></script><scriptclass="feed-template"type="text/x-jquery-tmpl"><lidata-id="{{>Id}}"><divclass="row-fluid"><divclass="span8"><h3>{{>MSG_CONTENT}}</h3></div></div></li></script>上代碼效勞端引用js的Script.Render,需要在BundleConfig.cs中參加以下代碼:bundles.Add(newScriptBundle("~/Scripts/project.js").IncludeDirectory("~/Scripts/Project","*.js",false));同時(shí)我們構(gòu)建一個(gè)WebAPI來發(fā)送需要推送的消息,片斷代碼:///<summary>///SendMessage///</summary>///<paramname="messagemodel">Themessagemodel.</param>///<returns></returns>[HttpPost]publicIHttpActionResultSendMessage(PushMessageModelmessagemodel){returnSendToServer(messagemodel);}///<summary>///Sendstoserver.///</summary>///<paramname="messagemodel">Themessagemodel.</param>///<returns></returns>privateIHttpActionResultSendToServer(PushMessageModelmessagemodel){if(ModelState.IsValid){if(messageRepository.SendMessage(messagemodel)){log.Debug("發(fā)送成功！");returnOk();}else{log.ErrorFormat("發(fā)送失敗！{0}",messagemodel);returnContent(HttpStatusCode.ExpectationFailed,newException("sendmessageerror"));}}else{log.ErrorFormat("參數(shù)驗(yàn)證失?。0}",messagemodel);returnContent(HttpStatusCode.BadRequest,ModelState);}}發(fā)送消息到ActiveMQ的關(guān)鍵代碼:publicclassMessageRepository:IMessageRepository{privatestaticILoggerlog=newLogger("MessageRepository");///<summary>///發(fā)送消息///</summary>///<paramname="messagemodel"></param>///<returns></returns>publicboolSendMessage(PushMessageModelmessagemodel){varactivemq=newActiveMQAdapter<PushMessageModel>(MQConfig.MQIpAddress,MQConfig.QueueDestination);returnactivemq.SendMessage<PushMessageModel>(messagemodel)>0;}}如果您需要運(yùn)行DEMO程序,需要構(gòu)建基于ActiveMQ的消息隊(duì)列,

運(yùn)行效果是這樣的,我們?cè)谝粋€(gè)靜態(tài)html中,發(fā)送一個(gè)ajax到webapi效勞端,

發(fā)送后另一個(gè)website網(wǎng)站收到后,列表更新,并在右下角彈出框IE的控制臺(tái)輸出:HTML1300:Navigationoccurred.

File:Index

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Clientsubscribedtohub'feedhub'.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Negotiatingwith'/signalr/negotiate?clientProtocol=1.4&connectionData=%5B%7B%22name%22%3A%22feedhub%22%7D%5D'.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Thisbrowserdoesn'tsupportSSE.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Bindingtoiframe'sloadevent.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Iframetransportstarted.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:foreverFrametransportselected.Initiatingstartrequest.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Thestartrequestsucceeded.Transitioningtotheconnectedstate.

[11:05:25GMT+0800(ChinaStandardTime)]SignalR:Nowmonitoringkeepalivewithawarningtimeoutof13