從如今開始相關文章請到: http://lko2o.com/moonjavascript
接着上一篇:《ASP.NET SignalR系列》第三課 SignalR的支持平臺css
1、概述
SignalR經常依託於ASP.NET應用程序運行於IIS中,但它還能夠自我託管(好比做爲console winform、Windows service).只要咱們使用self-host庫就能夠了.html
該庫向全部的SignalR 2庫同樣,構建於OWIN (Open Web Interface for .NET).OWIN定義了一個在.NET web 服務端和web 應用程序的抽象.java
OWIN解耦了從服務端來的web 應用程序,這使得OWIN對於子託管web應用程序於本身的進程中得以表現得很完美.jquery
不託管於IIS的緣由有:git
- IIS的環境不能構建,好比一個已經存在的服務端程序(沒有運行於IIS)
- IIS的性能開銷須要注意的地方
- signalr功能須要添加到一個現有的應用程序，好比運行在 Windows Service, Azure worker role, 或者 其餘進程
若是咱們處於性能緣由考慮使用self-host,咱們推薦將程序同時在IIS中運行測試,來看看性能的具體好處.web
本教程包含如下部分：跨域
- 建立服務端
- 用 JavaScript 客戶端訪問服務端
2、建立服務端
在本教程中，您將建立託管在一個控制檯應用程序的服務端,固然服務端可以託管於其餘任何形式的進程,如Windows service or Azure worker role.安全
若是你要看如何託管於Windows Service, 能夠去看看這裏Self-Hosting SignalR in a Windows Service.微信
1.用VS建立一個名爲 "SignalRSelfHost" 的控制檯項目;
2.在程序包管理器控制檯,輸入以下命令
Install-Package Microsoft.AspNet.SignalR.SelfHost
3.輸入以下命令:
Install-Package Microsoft.Owin.Cors
該庫將提供跨域支持,這對於那些SignalR的服務端和客戶端不在同一個域下的程序而言是必須的.
4.控制檯代碼
using System; using Microsoft.AspNet.SignalR; using Microsoft.Owin.Hosting; using Owin; using Microsoft.Owin.Cors; namespace SignalRSelfHost { class Program { static void Main(string[] args) { // This will *ONLY* bind to localhost, if you want to bind to all addresses // use http://*:8080 to bind to all addresses. // See http://msdn.microsoft.com/en-us/library/system.net.httplistener.aspx // for more information. string url = "http://localhost:8080"; using (WebApp.Start(url)) { Console.WriteLine("Server running on {0}", url); Console.ReadLine(); } } } class Startup { public void Configuration(IAppBuilder app) { app.UseCors(CorsOptions.AllowAll); app.MapSignalR(); } } public class MyHub : Hub { public void Send(string name, string message) { Clients.All.addMessage(name, message); } } }
上面的代碼包括三個類:
-
Program,包含程序的主方法.在這個方法中,類型爲Startup的web應用程序啓動於指定的URL (http://localhost:8080). 若是須要更加安全一點,能夠支持SSL. 請去這裏看看How to: Configure a Port with an SSL Certificate
- Startup, 該類含有SignalR服務端的配置(該教程使用的惟一的配置是用來調用
UseCors),MapSignalR爲全部形式的Hub對象建立了路由規則.
-
MyHub, SignalR的Hub 類是程序要提供給客戶端的. 該類就一個方法, Send, 客戶端能夠用來發送消息給其餘客戶端.
5.編譯並運行程序.
6.若是程序出現這樣的異常: System.Reflection.TargetInvocationException was unhandled, 你須要重啓 Visual Studio ,須要administrator 權限.
3、用javascript客戶端訪問服務端
1.建立項目
2.使用空模板
3.初始化客戶端須要的東西
Install-Package Microsoft.AspNet.SignalR.JS
4.初始化客戶端須要的東西
5.客戶端代碼
<!DOCTYPE html> <html> <head> <title>SignalR Simple Chat</title> <style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px; } </style> </head> <body> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"></ul> </div> <!--Script references. --> <!--Reference the jQuery library. --> <script src="Scripts/jquery-1.6.4.min.js"></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.1.0.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="http://localhost:8080/signalr/hubs"></script> <!--Add script to update the page and send messages.--> <script type="text/javascript"> $(function () { //Set the hubs URL for the connection $.connection.hub.url = "http://localhost:8080/signalr"; // Declare a proxy to reference the hub. var chat = $.connection.myHub; // Create a function that the hub can call to broadcast messages. chat.client.addMessage = function (name, message) { // Html encode display name and message. var encodedName = $('<div />').text(name).html(); var encodedMsg = $('<div />').text(message).html(); // Add the message to the page. $('#discussion').append('<li><strong>' + encodedName + '</strong>: ' + encodedMsg + '</li>'); }; // Get the user name and store it to prepend to messages. $('#displayname').val(prompt('Enter your name:', '')); // Set initial focus to message input box. $('#message').focus(); // Start the connection. $.connection.hub.start().done(function () { $('#sendmessage').click(function () { // Call the Send method on the hub. chat.server.send($('#displayname').val(), $('#message').val()); // Clear text box and reset focus for next comment. $('#message').val('').focus(); }); }); }); </script> </body> </html>
6.將客戶端和服務端同時運行,咱們就能夠運行了.
7.下載代碼:
點擊下載