這是微軟官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻譯，這裏是第四篇：開始使用SignalR 2.0
原文： Getting Started with SignalR 2.0
PS.前面的那篇從SignalR1.0升級爲2.0跳過了……只有幾步，有興趣的同學可以自己 去看 。
概述
本教程展示瞭如何使用SignalR2.0構建一個基於瀏覽器的聊天室程序。你將把SignalR庫添加到一個空的ASP.NET Web應用程序中，創建用於發送消息到客戶端的集線器(Hubs)類，創建一個HTML頁面讓用戶在該頁面上發送和接收聊天信息。對於如何在MVC5環境中中創建一個聊天室，請參閱 Getting Started with SignalR 2.0 and MVC 5。
SignalR是一個開源的.Net庫，用於構建需要實時用戶交互或實時數據更新的Web應用程序。比如社交應用，多用戶在線遊戲，商務協作，新聞，天氣，金融或更新應用程序。以上通常被成爲實時應用程序。
SignalR簡化構建實時應用程序的過程。它包括一個ASP.NET服務器庫和一個JavaScript客戶端庫，使其更易於管理客戶端到服務器端的連接並推送內容更新到客戶端。您可以將SignalR庫添加到現有的ASP.NET應用程序以獲得實時功能。
本教程將演示以下SignalR開發任務：
- 添加SignalR庫到ASP.NET Web應用程序
- 建立一個集線器類來推送更新內容到客戶端
- 建立一個.Net開放Web接口(OWIN)啓動類來配置應用程序
- 在網頁中使用SignalR jQuery庫發送和顯示更新消息
下面的屏幕截圖顯示了在瀏覽器中運行的聊天應用程序，每個新加入聊天室的用戶都可以隨意發言。
設置項目
本節說明如何使用VS2013及SignalR 2.0庫來創建一個空的ASP.NET WEB引用程序並向其中添加SignalR，以創建聊天室。
1.在VS2013中創建一個新的WEB應用程序。
2.在新的ASP.NET項目窗口中，選擇空項目並確定創建。
3.在解決方案資源管理器中，右擊該項目，選擇添加—新建項，選擇SignalR集線器類(v2)，命名爲ChatHub.cs並添加，如下圖：
這一步將創建ChatHub類，並將一組SignalR腳本和程序集引用添加到項目中。
注意：您還可以通過NuGet來添加SignalR到項目中，通過打開工具—庫軟件包管理器—包管理器控制檯 ，並運行一個命令：
install-package Microsoft.AspNet.SignalR
如果您使用包管理器控制檯來添加SignalR，請在添加後再執行創建ChatHub類這一步。
4.在解決方案資源管理器中，展開腳本文件夾，可以看到項目已經添加了jQuery及SignalR的JS引用。
5.用編輯你的ChatHub文件，刪除Hello方法並添加Send方法，如下面的代碼：
using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the broadcastMessage method to update clients.
Clients.All.broadcastMessage(name, message);
}
}
}6.在解決方案資源管理器中，右擊該項目，然後單擊添加—新建項—OWIN啓動類，將類命名爲Startup並添加。
7.在啓動類的 配置方法中添加SignalR的映射，如下面的代碼：
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR(); } } }
8.在解決方案資源管理器中，右鍵單擊該項目，然後單擊添加—新建項—HTML頁面，命名爲index.html並添加。
9.用下面的代碼替換掉HTML中的。
DOCTYPE html>
<html>
<head>
<title>SignalR Simple Chattitle>
<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 src="Scripts/jquery-1.6.4.min.js" >script>
<script src="Scripts/jquery.signalR-2.0.2.min.js">script>
<script src="signalr/hubs">script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('注意：如果你使用包管理器來安裝了SignalR，請覈對腳本目錄中的SignalR腳本文件名和上面HTML中代碼所引用的是否一致，比如下圖：
11.保存全部項。
運行示例
1.按下F5在調試模式下運行該項目，如果一切正常，HTML會在瀏覽器中打開並提示一個對話框。
2.輸入用戶名並確定。
3.複製這個瀏覽器中的URL，打開一個新的瀏覽器實例，在另一個瀏覽器中，輸入一個新用戶名。
4.在每個瀏覽器實例中添加評論併發送，評論將被髮送到所有瀏覽器的頁面中。
注意：這個簡單的聊天室沒有在服務器上維護一個聊天上下文，所有發送的評論將實時廣播給打開了頁面的所有瀏覽器，所以新加入的用戶無法看到以前的歷史記錄。
5.在解決方案資源管理器中，檢查正在運行的應用程序的腳本文件，你可以看到SignalR庫動態生成的Hub腳本文件，該文件管理jQuery腳本和服務器代碼之間的通訊。
回顧
SignalR聊天室程序演示了兩個基本的SignalR開發任務：在服務器端創建一個集線器作爲主要協調對象，並使用SignalR和jQuery來發送和接收評論。
SignalR集線器(Hub)
在代碼示例中的ChatHub類派生自Microsoft.AspNet.SignalR.Hub類。是最通常的建立SignalR應用程序的方法就是從Hub類派生。 你可以創建你的集線器類的公共方法，然後從網頁中的腳本調用它們來訪問這些方法。
這本示例中，客戶端調用ChatHub.Send來發送新評論。反之，集線器通過調用Clients.All.broadcastMessage來將新評論發送至所有客戶端。
Send方法演示了使用集線器的概念：
- 在集線器上建立公共方法，使客戶端可以調用它們。
- 使用使用Microsoft.AspNet.SignalR.Hub.Clients動態屬性訪問連接到該集線器的所有客戶端。
- 調用客戶端方法（比如broadcastMessage函數）來更新客戶端。
SignalR和jQuery
HTML頁面展示瞭如何使用SignalR jQuery庫與SignalR集線器通訊，即定義了一個代理引用集線器，聲明一個函數可以讓服務器推送內容到客戶端，並且開始實時連接以發送消息到集線器上。
下面的代碼定義了一個集線器代理的引用。
var chat = $.connection.chatHub;
注意：在JS中引用服務器類及成員應當使用駝峯(camel)式拼寫法。改代碼示例使用chatHub引用了服務器端的ChatHub。
下面的代碼演示瞭如何創建一個回調函數，服務器上的集線器類調用這個函數來推送內容並更新到每個客戶端。前兩行代碼表示將輸入的內容進行HTML編碼，作爲一個簡單的防止腳本注入的方法。
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('下面的代碼顯示瞭如何打開與集線器的連接。該代碼啓動連接，然後傳遞一個函數來處理HTML頁面上發送按鈕的點擊事件。
$.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();
});
});注意：此方法可確保SignalR在事件句柄處理之前就建立好通訊連接。
下一步
您已經瞭解到SignalR框架是如何構建起一個實時Web應用程序的，您還了解並演練了幾個開發任務：添加SignalR庫到Web應用程序中，創建一個集線器類及如何從集線器發送、接收消息。
要了解更多，請參閱以下連接：
作者： 帕特里克·弗萊徹 -帕特里克·弗萊徹是ASP.NET開發團隊的程序員，作家，目前正在SignalR項目工作。