說明：開發的案例為Hub（集線器）
一、開發環境
VS2013 ，window10
二、步驟
打開vs創建一個新的解決方案，添加一個空的WebForm項目。
使用NuGet添加引用。命令：PM> instal-package Microsoft.AspNet.SignalR 或者 工具->NuGet程序包管理器->管理解決方案的NuGet程序包，里搜索和添加
三、添加Default.aspx頁面
頁面中首先引用jquery 1.6.4 及以上版本庫
添加引用jquery.signalR-2.2.1.min.js 庫
添加script引用 /signalr/js
以上為引用為必須，並且順序不可調整， /signalr/js 依賴與jquery.signalR-2.2.1.min.js庫，並且是動態生成的（即：不存在該文件）
Default.aspx頁面的html代碼如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Drawing board</title> <script src="Scripts/jquery-1.6.4.min.js"></script> <script src="Scripts/jquery.signalR-2.2.1.min.js"></script> <script src="/signalr/js"></script> <script src="Scripts/DrawingBoard.js"></script> <style> div { margin: 3px; } canvas { border: 2px solid #808080; cursor: default; } </style> </head> <body> <div> <div> <label for="color">Color: </label> <select id="color"> </select> </div> <canvas id="canvas" width="300" height="300"></canvas> <div> <button id="clear">Clear canvas</button> </div> </div> </body> </html>
頁面實現功能描述：實現簡單畫板的多個頁面同步功能。
代碼中 #canvas為畫板所用標簽 ，#color 為畫筆顏色選項，#clear為清除畫板的按鈕
Scripts/DrawingBoard.js 代碼為Hub客戶端必要的邏輯。代碼如下：
$(function () { /////////////////////////////////////////////////////////////// // Standard drawing board functionalities /////////////////////////////////////////////////////////////// var colors = ["black", "red", "green", "blue", "yellow", "magenta", "white"]; var canvas = $("#canvas"); var colorElement = $("#color"); for (var i = 0; i < colors.length; i++) { colorElement.append( "<option value='" + (i + 1) + "'>" + colors[i] + "</li>" ); } var buttonPressed = false; canvas .mousedown(function () { buttonPressed = true; }) .mouseup(function () { buttonPressed = false; }) .mousemove(function (e) { if (buttonPressed) { setPoint(e.offsetX, e.offsetY, colorElement.val()); } }); var ctx = canvas[0].getContext("2d"); function setPoint(x, y, color) { ctx.fillStyle = colors[color-1]; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); } function clearPoints() { ctx.clearRect(0, 0, canvas.width(), canvas.height()); } $("#clear").click(function () { clearPoints(); }); /////////////////////////////////////////////////////////////// // SignalR specific code /////////////////////////////////////////////////////////////// var hub = $.connection.drawingBoard; hub.state.color = colorElement.val(); // Accessible from server var connected = false; // UI events colorElement.change(function () { hub.state.color = $(this).val(); }); canvas.mousemove(function (e) { if (buttonPressed && connected) { hub.server.broadcastPoint( Math.round(e.offsetX), Math.round(e.offsetY) ); } }); $("#clear").click(function () { if (connected) { hub.server.broadcastClear(); } }); // Event handlers hub.client.clear = function () { clearPoints(); }; hub.client.drawPoint = function (x, y, color) { setPoint(x, y, color); }; hub.client.update = function (points) { if (!points) return; for (var x = 0; x < 300; x++) { for (var y = 0; y < 300; y++) { if (points[x][y]) { setPoint(x, y, points[x][y]); } } } }; // Voila! $.connection.hub.start() .done(function () { connected = true; }); });
js中關於本文核心代碼表述：
var hub = $.connection.drawingBoard; 固定寫法，創建集線器代理工具（此處只能意會）
hub.state.color = colorElement.val(); // 畫筆顏色參數，類似於url傳遞querystring 參數，可查看下文中C#代碼理解
var connected = false; //狀態標志
hub.state.color = $(this).val(); //設置參數值，同上文
hub.server.broadcastPoint(Math.round(e.offsetX), Math.round(e.offsetY)); //調用服務器端的服務方法 BroadcastPoint ，在花瓣上打印一個點
注解：服務端的方法在web端調取時候需要第一個字幕小寫開頭，詳情請自行百度
hub.server.broadcastClear(); //調用服務端清空畫板服務方法
hub.client.clear = function () {
clearPoints(); //客戶端清除
};
hub.client.drawPoint
hub.client.update
注解：以上兩條請參考上文中解釋
$.connection.hub.start() //開始建立鏈接
.done(function () { //暫忘記了
connected = true;
});
四、添加啟動類
根目錄下添加 Startup.cs文件，代碼如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Owin; namespace Test { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } }
注解： app.MapSignalR();用於注冊默認服務
五、添加Hub服務
根目錄下添加DrawingBoard.cs 代碼如下：
using System.Threading.Tasks; using Microsoft.AspNet.SignalR; namespace DrawingBoard { public class DrawingBoard : Hub { private const int BoardWidth = 300, BoardHeight = 300; private static int[,] _buffer = GetEmptyBuffer(); public Task BroadcastPoint(int x, int y) { if (x < 0) x = 0; if (x >= BoardWidth) x = BoardWidth - 1; if (y < 0) y = 0; if (y >= BoardHeight) y = BoardHeight - 1; int color = 0; int.TryParse(Clients.Caller.color, out color); _buffer[x, y] = color; return Clients.Others.DrawPoint(x, y, Clients.Caller.color); } public Task BroadcastClear() { _buffer = GetEmptyBuffer(); return Clients.Others.Clear(); } public override Task OnConnected() { return Clients.Caller.Update(_buffer); } private static int[,] GetEmptyBuffer() { var buffer = new int[BoardWidth, BoardHeight]; return buffer; } } }
邏輯並不復雜，就是轉發客戶端傳遞進來的數據給其他客戶端，請自行理解。
開發中遇到的問題：
配置錯誤，開始時候使用web.config配置，發現報錯了具體錯誤已經丟失，發現是 Startup 配置錯誤，Startup.cs可以立即為默認的必須的存在的。推測可以使用web.config配置為其他啟動類，但是未測試。
具體請關注后續文章。
運行效果圖：
請注意：本文中代碼摘自ASP.NET SignalR 編程實踐一書 豆瓣鏈接：https://book.douban.com/subject/26378222/