SignalR jQuery

用ASP.NET SignalR建置即時聊天系統

陳傑雄 2016/07/06 13:13:31

0 3963

主題：	用ASP.NET SignalR建置即時聊天系統
文章簡介：	介紹如何使用ASP.NET SignalR建置一個即時聊天系統，通過簡單的介紹，讓您可以快速建置即時聊天系統
作者：	陳傑雄
版本/產出日期：	V1.0/2016.07.05

1. 前言

• 本教學展示如何使用ASP.NET SignalR來建置一個即時聊天系統。您只需要新增一個空的ASP.NET Web應用程式，建置一個HTML頁面發送並顯示聊天訊息。

• 本教學使用的軟體本版本：Visual Studio 2015 / .NET Framework 4.5.2 / ASP.NET SignalR 2.2.0。

2. 目的

• 藉由本教學初步了解ASP.NET SignalR架構以及如何與用戶端連線溝通。

• 了解如何利用在ASP.NET SignalR架構下開發即時交互或資料更新的Web應用程式。

3. 開始前準備

本架構建立於以下版本的環境：

• .Net Framework 4.5.2

• .Net MVC 5

• IIS 8

• Visual Studio 2015 with updates

• ASP.NET SignalR 2.2.0

4. 本文

4.1、本教學將展示下列的ASP.NET SignalR的開發工作：

• 如何將SignalR函式庫加入ASP.NET Web Application。

• 如何建立一個Hub class來將訊息內容廣播推送報用戶端。

• 如何建立OWIN Startup class來配置應用程式。

• 使用Web page內的SignalR jQuery函式庫來發送訊息和顯示從hub傳來的更新訊息。

下面的畫面顯示Web和Windows用戶端運行中的聊天應用程式。每個新使用者可以發送訊息，並顯示聊天室成員的即時聊天訊息。

4.2、在Visual Studio中新增一個Web Application專案。

4.3、在新的ASP.NET專案視窗中，如下圖畫面選擇「空白」範本、勾選「Web API」，並取消勾選「雲端中的主機」。

4.4、在「方案總管」瀏覽視窗中，右鍵點擊專案，選擇「加入」>「SignalR Hub類別(v2)」，命名為ServiceHub.cs並加入專案中，這樣就能建立一個ServiceHub類別，並自動在專案中加入一組Script檔和SignalR的參考。

Note：如果您還沒有安裝過SignalR套件，可以開啟「工具」>「NUGet封裝管理員」>「套件管理器主控台」，並執行指令：

Install-Package Microsoft.AspNet.SignalR

您必須先安裝SignalR套件，之後才能建立SignalR Hub類別。

4.5、在「方案總管」瀏覽視窗中，展開「Scripts」節點，您可以看見JQuery和SignalR的script函式庫已在其中。

4.6、接下來，更新ServiceHub類別中的程式碼如下。

4.7、在預設狀況下，SignalR hub是被設定為不允許外部網域存取。

這意思是說：假如您的SignalR hub(Web API)是運行在https://www.abc.com網域下，但用戶端卻從https://www.xyz.com試圖連線，這將會發生HTTP 500錯誤。要修復這個問題，我們必需配置Owin去接受cross-domain的requests。如果您還沒有安裝過Owin.Cors套件，可以開啟「工具」>「NUGet封裝管理員」>「套件管理器主控台」，並執行指令：

Install-Package Microsoft.Owin.Cors

然後，在「方案總管」瀏覽視窗中，右鍵點擊專案，選擇「加入」>「OWIN類別」，命名為Startup.cs並按「新增」加入專案中。

4.8、修改Startup類別的內容如下。

4.9、在「方案總管」瀏覽視窗中，右鍵點擊專案，選擇「加入」>「HTML頁面」，命名為index.html並按「新增」加入專案中，並將它「設定為起始頁」。

4.10、將index.html預設的內容修改如下。

4.11、全部儲存後運行專案，網頁會先顯示對話視窗，要求您輸入名字。

輸入名字後，網址列複製URL貼到另一個開啟的瀏覽器，一樣會顯示一個對話視窗，請輸入另一個不同的名字。

如此可以模擬不同使用者即時聊天的狀況，如下圖所示。

5. 程式碼說明

至此，我們已經完成了SignalR即時聊天系統的開發工作，以下我們來解說一下程式碼：

5.1、 SignalR Hubs：

在這個簡單的範例碼中，ServiceHub是從Microsoft.AspNet.SignalR.Hub類別衍生的類別。從Microsoft.AspNet.SignalR.Hub類別衍生是建立SignalR應用程式很好用的方法，讓我們可以在我們的hub類別建立public方法，然後透過client畫面中的script來呼叫它們存取這些方法。

在程式碼中，用戶端呼叫ServiceHub.BroadcastToGroup方法來發出訊息。然後hub反過來透過呼叫Cliens.Group(group).newMessage將訊息發送到group的所有用戶端。

BroadcastToGroup方法示範幾個核心概念：

• 宣告public方法，以便用乎端可以呼叫。

• 使用Microsoft.AspNet.SignalR.Hub.Clients動態屬性來存取所有連線到該hub的用戶端。

• 在用戶端呼叫伺服器函式(例如BroadcastToGroup函式)來發送訊息並廣播更新所有用戶端的顯示的訊息。