英文渣水平,大夥湊合着看吧……javascript
這是微軟官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻譯,這裏是第六篇: SignalR 自託管主機css
原文:SignalR Self-Hosthtml
PS.前面的那篇在MVC5上使用SignalR跳過了……MVC5跟HTML的實現徹底同樣,只是將HTML的腳本放在View裏面了,這裏就跳過了。有興趣的同窗能夠本身去看。java
SignalR服務器一般在IIS的ASP.NET應用程序上承載,但它也可使用自託管庫來做爲自託管的主機(就像控制檯應用或者Windows服務那樣)。與SignalR 2.0同樣,自託管庫是基於.Net開放式Web接口(OWIN)來構建的。OWIN定義了.Net Web服務器和Web應用程序之間的抽象接口,將Web應用程序從服務器上解耦,使得OWIN能夠在IIS以外創建自託管主機。jquery
爲何不在IIS中託管?參考如下理由:程序員
若是爲了性能考慮而是用SignalR自託管主機,建議對IIS中承載的應用程序進行測試,以肯定性能確實獲得了提升。web
在本教程中,您將建立託管在控制檯應用程序中的服務器,固然將其承載在Windows服務及Azure工做角色中也是可行的。跨域
1.以管理員權限運行VS2013,新建一個控制檯應用程序,命名爲"SignalRSelfHost"並肯定。瀏覽器
2.打開程序包管理器控制檯。安全
3.在控制檯中輸入如下命令:
Install-Package Microsoft.AspNet.SignalR.SelfHost
此命令將SignalR自託管庫添加到項目中。
4.繼續在控制檯中輸入如下命令:
Install-Package Microsoft.Owin.Cors
此命令將OWIN核心庫添加到項目中,由於SignalR主機與網頁客戶端之間在不一樣的域中運行,該庫將用於跨域支持。因爲SignalR服務和Web客戶端運行在不一樣的端口上,這意味若是想在這些組件間進行通信,則必須啓動這些組件中的跨域功能。
5.替換Program.cs中的代碼:
1 using System; 2 using Microsoft.AspNet.SignalR; 3 using Microsoft.Owin.Hosting; 4 using Owin; 5 using Microsoft.Owin.Cors; 6 7 namespace SignalRSelfHost 8 { 9 class Program 10 { 11 static void Main(string[] args) 12 { 13 // This will *ONLY* bind to localhost, if you want to bind to all addresses 14 // use http://*:8080 to bind to all addresses. 15 // See http://msdn.microsoft.com/en-us/library/system.net.httplistener.aspx 16 // for more information. 17 string url = "http://localhost:8080"; 18 using (WebApp.Start(url)) 19 { 20 Console.WriteLine("Server running on {0}", url); 21 Console.ReadLine(); 22 } 23 } 24 } 25 class Startup 26 { 27 public void Configuration(IAppBuilder app) 28 { 29 app.UseCors(CorsOptions.AllowAll); 30 app.MapSignalR(); 31 } 32 } 33 public class MyHub : Hub 34 { 35 public void Send(string name, string message) 36 { 37 Clients.All.addMessage(name, message); 38 } 39 } 40 }
上面的代碼包含了三個類:
6.編譯並運行,服務器的地址將顯示在控制檯窗口中。
7.若是執行失敗,除了發生System.Reflection.TargetInvocationException錯誤,你須要以管理員權限從新運行VS2013並執行。
8.在進行下一步前,關閉控制檯應用程序。
在本節中,您將使用同入門教程一致的JS客戶端。咱們只進行一項修改,即定義集線器的URL,做爲自託管主機,服務器並不必定在相同的URL做爲鏈接地址(因爲反向代理及負載平衡),因此URL須要顯示定義。
1.在解決方案資源管理器中,添加ASP.NET Web應用程序,命名爲"JavascriptClient",而後肯定。
2.以空模板建立項目。
3.在包管理器控制檯中,在默認項目的下拉列表中選擇「JavascriptClient」項目,並執行如下命令:
Install-Package Microsoft.AspNet.SignalR.JS
此命令安裝客戶端所須要的SignalR及jQuery庫。
4.添加一個新的HTML頁面,命名爲Default.HTML。
5.用下面的代碼替換HTML中的內容,一樣須要確認代碼中腳本引用的版本路徑是否一致。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>SignalR Simple Chat</title> 5 <style type="text/css"> 6 .container { 7 background-color: #99CCFF; 8 border: thick solid #808080; 9 padding: 20px; 10 margin: 20px; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="container"> 16 <input type="text" id="message" /> 17 <input type="button" id="sendmessage" value="Send" /> 18 <input type="hidden" id="displayname" /> 19 <ul id="discussion"></ul> 20 </div> 21 <!--Script references. --> 22 <!--Reference the jQuery library. --> 23 <script src="Scripts/jquery-1.6.4.min.js"></script> 24 <!--Reference the SignalR library. --> 25 <script src="Scripts/jquery.signalR-2.0.2.min.js"></script> 26 <!--Reference the autogenerated SignalR hub script. --> 27 <script src="http://localhost:8080/signalr/hubs"></script> 28 <!--Add script to update the page and send messages.--> 29 <script type="text/javascript"> 30 $(function () { 31 //Set the hubs URL for the connection 32 $.connection.hub.url = "http://localhost:8080/signalr"; 33 34 // Declare a proxy to reference the hub. 35 var chat = $.connection.myHub; 36 37 // Create a function that the hub can call to broadcast messages. 38 chat.client.addMessage = function (name, message) { 39 // Html encode display name and message. 40 var encodedName = $('<div />').text(name).html(); 41 var encodedMsg = $('<div />').text(message).html(); 42 // Add the message to the page. 43 $('#discussion').append('<li><strong>' + encodedName 44 + '</strong>: ' + encodedMsg + '</li>'); 45 }; 46 // Get the user name and store it to prepend to messages. 47 $('#displayname').val(prompt('Enter your name:', '')); 48 // Set initial focus to message input box. 49 $('#message').focus(); 50 // Start the connection. 51 $.connection.hub.start().done(function () { 52 $('#sendmessage').click(function () { 53 // Call the Send method on the hub. 54 chat.server.send($('#displayname').val(), $('#message').val()); 55 // Clear text box and reset focus for next comment. 56 $('#message').val('').focus(); 57 }); 58 }); 59 }); 60 </script> 61 </body> 62 </html> 63
注意此行代碼聲明瞭SignalR的基礎鏈接URL。
$.connection.hub.url = "http://localhost:8080/signalr";
6.在解決方案上右擊,設置多個啓動項目爲啓動。
7.在Default.Html上右擊,選擇設爲起始頁。
8.運行該項目,將彈出控制檯服務器及Web頁面,若是Web頁面在控制檯服務器啓動前就執行,你須要從新刷新一次頁面。
9.你能夠輸入用戶名,打開多個瀏覽器來進行多用戶的聊天室測試了。
做者:帕特里克·弗萊徹-帕特里克·弗萊徹是ASP.NET開發團隊的程序員,做家,目前正在SignalR項目工做。