[轉貼] 認識 SignalR 建立 realtime 網頁

2013061008:59
出處:
http://www.dotblogs.com.tw/jasonyah/archive/2013/05/26/.net-realtime-web-application-use-signalr.aspx


前言

最近打算利用假日或是空弦時間讓自己學些平常工作上用不到的東西,也算是讓自己增廣見聞吧,至於為什麼會叫做「悠閒 Coding 系列」呢?因為個人覺得學習就是應該是輕輕鬆鬆的,反而在緊繃的情況下學會的東西真的沒辦法扎根。看最近點部落上 SignalR 文章還滿火紅的,尤其是 饅頭的一系列 SignalR文章 ,所以首戰篇我們就來個 SignalR 實戰練習吧,剛好過些日子台中 Study4 的月份主題也會介紹到 SingnalR 這方面的應用,趁這個機會寫個文章記錄自己的學習歷程。

認識 SignalR

以往在建置網站時如果希望建立即時(realtime)的網站,通常都是透過 Client 定時重整頁面或是定時利用 Ajax 跟 Server 端要資料,但這樣的方法可能會造成 Server 的 Loading 太重,而且那並不合乎我們即時的觀念,應當是當 Server 更新時就 "主動" 發送訊息給 Client 端來做更新,才能符合所謂的 RealTime 網站。而 SignalR 主要功能就是協助我們解決這些問題,當然在 SignalR 之前也有許多 Solution 可以來解決這項問題,像是 Html 5 的 Server Side 與 Web Socket 方法、 以及其他像是 Long Polling 等 ,往往在實作上不是太複雜不然就是對於瀏覽器支援度不佳,而 SignalR 是基於 .Net 平台上能快速建置出支援即時通訊(real-time)的應用程式的一種 Solution 。

想像一下股票的即時資訊網站,我們希望獲得的是最即時且快速的資訊,如果我們每秒都跟 Server 端要一次資料,一個人的時候會沒什麼感覺,倘若今天是100個人同時取得股票資訊,Server 一定無法負荷,產生的結果大概就像前陣子很夯的「鍵盤攻擊」那樣.... ,寫了一支程式打自己的 Server。透過 SingnalR 則可以完全解決這個問題,運作原理就是當使用者進入頁面時就馬上建立起一條連線通道,這條通道就是負責來做資料的傳遞 ,並當 Server 更新時就馬上透過這個管道將資料傳遞給前端頁面做更新,而不用每次都跟 Server Request 資料。

另外在小朱前輩的文章也有寫到,SingalR 在做資料傳遞時是以 JSON 為基礎,所以也可以相容大多的瀏覽器而且也非常輕量化,然而如果是較老的瀏覽器(IE6、IE7)就無法直接支援,可能還是得透過外部的 JSON Parser 來處理。

透過 SignalR 建立即時聊天室

這邊我們就已一個最簡單的聊天室來跟大家介紹,而需求也非常清楚就是聊天嘛 ~ 當使用者進入聊天後建立起連線,當使用者發送訊息時,所有在聊天室的人都可以即時同步訊息。

而開始之前為了嚇跑大家,我們先來點輕鬆的,照著步驟做完後的完成圖如下:

1.一開始我們建立一個 ASP.NET 空白 Web Application 專案。

2.透過 NuGet 來安裝 SignalR 套件

3.透過 Nuget 好處就是會自動幫我們安裝需要的參考以及相關檔案。

5.新增一個 SignalR Hub 類別且命名為 codingChatHub.cs ,用來實作 Server 端的程式。

6.我們稍微修改一下 Hub 的程式碼:

01public class codingChatHub : Hub
02{
03    public void Hello(string name)
04    {
05        //這邊會傳入name參數
06        //呼叫所有連線狀態中頁面上的 javascript function => hello
07        //透過server端呼叫client的javascript function
08 
09        string message = "歡迎使用者" + name + "加入聊天室";
10        Clients.All.hello(message);
11    }
<td style="border-width:0px 0px 0px 3px !important;margin:0px !important;padding:0px 0px 0px 0.5em !important;left:auto !important;top:auto !important;width:auto !important;height:auto !important;text-align:left;right:auto !important;color:rgb(0, 0, 0);line-height:1.1em !important;font-family:Consolas, Courier, monospace !important;font-size:1em !important;font-style:normal;font-weight:normal;vertical-align:top !important;border-left-color:rgb(108, 226, 108);border-left-style:solid;float:none;min-height:inherit !important


12

拇指姑娘

mini

cafsc1906

峰峰

大胖齡

yoyo媽

年齡不詳

吟先

老李

比比寶貝

Julia Wu

亞日

企鵝王子

盒子小幫手

tonew1983

FanGg