C# BS訊息推送 SignalR Hubs環境搭建與開發（二）
阿新 • • 發佈：2019-01-03
原文:
C# BS訊息推送 SignalR Hubs環境搭建與開發（二）
1. 前言
本文是根據網上前人的總結得出的。
環境： SignalR2.x，VS2015，Win10
2. 開始開發
1）新建一個MVC專案，叫做SignalRDemo
2）安裝SignalR包
Install-Package Microsoft.AspNet.SignalR
Install-Package Microsoft.AspNet.SignalR.Client
安裝完包後會有相應的引用和js檔案
3）新建startup檔案，用來啟動SignalR
程式碼如下：
using System; using System.Threading.Tasks; using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRDemo.SignalR.StartupSignalR))] namespace SignalRDemo.SignalR { public class StartupSignalR { public void Configuration(IAppBuilder app) {// 有關如何配置應用程式的詳細資訊，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR();//啟動SignalR } } }
4）新建Hub類，MyHub。此類的作用是用來與客戶端的連線。
可以看到[HubName("myHub")]的註解，是用來與前端JS做繫結
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks;using System.Web; using Microsoft.AspNet.SignalR; using Microsoft.AspNet.SignalR.Hubs; namespace SignalRDemo.SignalR { [HubName("myHub")] public class MyHub : Hub { //當連線hub例項時被呼叫 public override Task OnConnected() { string connId = Context.ConnectionId; return base.OnConnected(); } //當失去連線或連結超時時被呼叫 public override Task OnDisconnected(bool stopCalled) { //stopCalled=true時，客戶端關閉連線 //stopCalled=false時，出現連結超時 return base.OnDisconnected(stopCalled); } //重新連線時被呼叫 public override Task OnReconnected() { return base.OnReconnected(); } } }
上面已經新建了與前端連線類。下面我們開始不同的呼叫方式
至此，我們建立環境已經結束。
3. 不同調用方式
1）前端呼叫後端
前端html：
myHub是HubName註解屬性。2個js一定要引用：Jquery、SignalR。scripts中有src='/SignalR/hubs'，其中SignalR是我們伺服器端的資料夾，hubs是不存在的資料夾。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8"/> <script src="/scripts/jquery-1.10.2.min.js"></script> <!--Reference the SignalR library. --> <script src="/scripts/jquery.signalR-2.2.1.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src='/SignalR/hubs'></script> <!--Add script to update the page and send messages.--> <script type='text/javascript'> $(function () { //引用自動生成的代理，myHub是HubName註解屬性 var myHub = $.connection.myHub; //開始連線 $.connection.hub.start().done(function () { //客戶端傳送資訊到伺服器 myHub.server.Send($.connection.hub.id); }); }); </script> </head> <body> </body> </html>
後端MyHub類中，新增方法：
//客戶端傳送資訊到伺服器 public void Send(string message) { }
訪問html，就能直接呼叫Send方法了。
至此，前端呼叫後端，結束。
2）後端主動呼叫前端
前端程式碼，增加了後端呼叫前端JS
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8"/> <script src="/scripts/jquery-1.10.2.min.js"></script> <!--Reference the SignalR library. --> <script src="/scripts/jquery.signalR-2.2.1.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src='/SignalR/hubs'></script> <!--Add script to update the page and send messages.--> <script type='text/javascript'> $(function () { //引用自動生成的代理，myHub是HubName註解屬性 var myHub = $.connection.myHub; //後端呼叫前端 myHub.client.serverSend2Client = function (message) { console.log("serverSend2Client message=" + message); }; //開始連線 $.connection.hub.start().done(function () { //客戶端傳送資訊到伺服器 myHub.server.send($.connection.hub.id); console.log("connection.hub.id=" + $.connection.hub.id); }); }); </script> </head> <body> </body> </html>
後端程式碼：
我們新建一個Notifier的靜態類，好處是讓其他類可以靈活地呼叫，你也可以把方法寫在Hub類中
serverSend2Client方法是與前端繫結的JS方法，可以看到前端也有此方法。
public static class Notifier { private static readonly IHubContext Context = GlobalHost.ConnectionManager.GetHubContext<MyHub>(); public static void ServerSend2ClientMethod(string connectionId, string message) { //註冊後端與前端的方法serverSend2Client。connectionId是判斷髮送給哪個前端 Context.Clients.Client(connectionId).serverSend2Client(message); } }
我們在Controller中，新增程式碼，達到，後端主動呼叫前端的目的。
注意，connectionId在後端與前端後可以獲取。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SignalRDemo.SignalR; namespace SignalRDemo.Controllers { public class DefaultController : Controller { // GET: Default public ActionResult Index() { //接收connId，connId是前端與後端連通的唯一標識 string connId = Request["connId"] ?? ""; //呼叫 後端主動呼叫前端的方法 Notifier.ServerSend2ClientMethod(connId, Math.Round(1000.0) + ""); return View(); } } }
至此，後端主動呼叫前端程式碼結束。
程式碼下載地址GitHub https://github.com/cjt321/SignalRDemo
如果你的部署是負載均衡，多臺伺服器，可以檢視Redis與SignalR的配置。C# BS訊息推送 負載均衡-SignalR&Redis的配置（三）
可以關注本人的公眾號，多年經驗的原創文章共享給大家。
