原文:
一步一步学习SignalR进行实时通信_8_案例2
一步一步学习SignalR进行实时通信\_8_案例2
SignalR
前言
这讲分析一个案例，在一个画板上画画实时在其他客户端上显示。
配置Hub
在Startup中进行配置：
public void Configuration(IAppBuilder app){app.MapSignalR();}
建立DrawingHub
public class Drawing : Hub{private const int BoardWidth = 300, BoardHeight = 300;private static int[,] _buffer = new int[BoardWidth, BoardHeight];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 = new int[BoardWidth, BoardHeight];return Clients.Others.Clear();}public override Task OnConnected(){return Clients.Caller.Update(_buffer);}}
用一个二位数组来缓存画板,一共就三个方法
1. 当客户端连接时调用Update()方法刷新整个画板
2.BroadcastClear()是点击清除按钮时讲整个画板擦出
3. 最后一个就是画画方法,客户端按下鼠标画画时,调用该方法进行绘制。
页面
<!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.0.0.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>
页面非常简单,一个选择颜色的下拉框,一个画板,和一个清除按钮。
javascript
$(function () {//初始化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();});//signalRvar hub = $.connection.drawingBoard;//缓存颜色hub.state.color = colorElement.val();var connected = false;//改变颜色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();}});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]);}}}};$.connection.hub.start().done(function () {connected = true;});});
实现效果
