Hello SignalR

這次要介紹的是ASP.NET SignalR library，它可以讓我們很簡單的寫出Real-time的網頁程式，原本要使用web socket在那寫的老半天，又要考慮到跨平台所帶來的影響，而使用了SignalR就不需要再考慮這些了，因為它都可以幫你處理，詳細的原理可以參考【SignalR 再次超越你對 Web 的想像 - 建立即時互動的 Web】這篇，在這篇裡我會demo一個簡單的即時通訊網頁。

平台

• .NET Framework 4.5
• C#
• SignalR 2.0
• Visual Studio 2012
• Windows 8

實作(借用Tutorial: Getting Started with SignalR 2.0的例子)

Step 1

開啟WebSocket通訊協定

控制台>程式集>程式和功能>開啟或關閉Windows功能>Internet Information Service>World Wide Web功能>應用程式開發功能>勾選【WebSocket通訊協定】

Step 2

新增ASP.NET空白Web應用程式

選取【.NET Framework 4.5】>選取【ASP.Net空白Web應用程式】>按下【確定】

Step 3

安裝SignelR

開啟【套件管理器主控台】>鍵入【install-package Microsoft.AspNet.SignalR】>按【Enter】

Step 4

建立SignalR Hub 類別

方案總管中在方案上按【滑鼠右鍵】>【加入】>【新增項目】>【SignalR Hub 類別】>【新增】

在這個類別中我們可以撰寫signalR要做的函式，先把下面的code覆蓋初始的code : 

這裡不是很懂吧，沒關係，之後的說明會詳細解說。

Step 5

建立OWIN Startup類別

建立一個類別，將下列程式碼貼上 : 

OWIN為Open Web Interface for .NET的簡稱，簡單的來說就是可以把原本預設的server做變更，像是.NET通常都是使用IIS，使用了OWIN我們就可以任意的決定我們的server side要給誰處理，在SignalR中我們就要把後端交給SignalR Hub運作。

Step 6

建立.html及.js

Chat.html :
main.js :

注意 : Chat.html中script的載入順序一定要先jQuery再SignalR再<script src="signalr/hubs"></script>，signalr/hubs這個資料夾只有再run time的時候才會動態產生，它是SignalR用在jQuery及server端溝通上的管理。

Step 7

將Chat.html設為起始頁

Chat.html按【右鍵】>【設定為起始頁】

Demo

輸入名字

開啟多個Chat.html

開始聊天嘍

程式運作說明

利用chat.server.send(name, message);去叫ChatHub中的send method，然後ChatHub會用Clients.All.broadcastMessage(name, message);去叫用client中的broadcastMessage將資訊傳給client

參考資料

SignalR 再次超越你對 Web 的想像 - 建立即時互動的 Web

Tutorial: Getting Started with SignalR 2.0