SignalR介紹與Asp.net,前臺即時通訊【轉】

     SignalR 是一個asp.net異步庫,它提供廣播消息到多個client端的機制。 SignalR能用來持久客戶端與服務端的鏈接,讓咱們便於開發一些實時的應用,例如聊天室在線預訂系統,股票交易等實時應用。這能夠顯著下降服務器的負 載確保沒有沒必要要的請求從重複客戶端請求。 SignalR是非微軟的正式開源項目。
它實現了Long Polling的模式,可看下面圖示:

longPollingjavascript

傳統的 AJAX 應用不一樣之處在於:html

1. 服務器端會阻塞請求直到有數據傳遞或超時才返回。
2. 客戶端 JavaScript 響應處理函數會在處理完服務器返回的信息後,再次發出請求,從新創建鏈接。
3. 當客戶端處理接收的數據、從新創建鏈接時,服務器端可能有新的數據到達;這些信息會被服務器端保存直到客戶端從新創建鏈接,客戶端會一次把當前服務器端全部的信息取回。 前端

  
下面咱們來經過一個簡單的小例,首先經過NuGet安裝它:java

Install-Package SignalR jquery

在Server端,建立一個MyChat的Class繼承自SignalR.Hubs.Hub類 :

json

    public class MyChat : Hub
    {
        /// <summary>
        /// Sends the specified message.
        /// </summary>
        /// <param name="message">The message.</param>
        public void Send(string message)
        {
            // Call the addMessage method on all clients         
            Clients.addMessage(message);
        }
    }


如今來看前端頁面,引用相應的客戶端Js腳本,建立鏈接,綁定事件。 服務器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dev home</title>
</head>
<body>
    <script src="../Scripts/jquery-1.7.2.js"></script>
    <script src="../Scripts/jquery.signalR-0.5.2.js"></script>
    <script src="/signalr/hubs" type="text/javascript"></script>
    <div>
        <script type="text/javascript">
            var chat;
            $(function () {
                // Created proxy            
                chat = $.connection.myChat;
                // Assign a function to be called by the server        
                chat.addMessage = onAddMessage;
                // Register a function with the button click               
                $("#broadcast").click(onBroadcast);
                // Start the connection        
                $.connection.hub.start();
            });
            function onAddMessage(message) {
                // Add the message to the list         
                $('#messages').append('<li>' + message + '</li>');
            }
            function onBroadcast() {
                // Call the chat method on the server           
                chat.send($('#message').val());
            }       
        </script>
        <input type="text" id="message" />
        <input type="button" id="broadcast" value="send" />
        <ul id="messages">
        </ul>
    </div>
</body>
</html>


運行後,咱們能夠看到每次點擊Button就會把當前的信息廣播到全部客戶端。 使用Fiddler 結果是,當咱們提交cc字符串的Request RAW:
app

POST http://localhost:17347/signalr/send?transport=longPolling&connectionId=8eaf7e6b-f0e9-414a-8e97-68ad7ff02e2b HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:17347/mytest/MyChat.html
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host: localhost:17347
Content-Length: 131
Connection: Keep-Alive
Pragma: no-cache

data=%7B%22hub%22%3A%22MyChat%22%2C%22method%22%3A%22Send%22%2C%22args%22%3A%5B%22cc%22%5D%2C%22state%22%3A%7B%7D%2C%22id%22%3A1%7D

 

Response RAW:asp.net

 

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 19 Jul 2012 03:12:28 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: application/json
Connection: Close
Content-Length: 66

{"State":{},"Result":null,"Id":"1","Error":null,"StackTrace":null}
 

而後從Fiddler中看第3個會話顯示HTTP一直在保持鏈接, 上面文本是其中第2個會話的RAW.
異步

IEfiddle
 

基於Long Polling,客戶端發出的請求到服務器端沒有回覆,直到有數據返回。 Web客戶端保留掛起狀態只有等到服務器返回一些有效的響應才關閉鏈接。這正是今天咱們想要的 --— 潛在減輕的 Web 服務器的壓力。

但願對您Web開發有幫助.

 

轉、留做學習

轉自:http://www.cnblogs.com/wintersun/archive/2012/07/19/2599020.html

相關文章
相關標籤/搜索