[关闭]
@a604572782 2015-11-20T00:07:19.000000Z 字数 3008 阅读 2422

一步一步学习SignalR进行实时通信_8_案例2

SignalR

前言

这讲分析一个案例，在一个画板上画画实时在其他客户端上显示。

配置Hub

在Startup中进行配置：

  1. public void Configuration(IAppBuilder app)
  2. {
  3.     app.MapSignalR();
  4. }

建立DrawingHub

  1. public class Drawing : Hub
  2. {
  3.     private const int BoardWidth = 300, BoardHeight = 300;
  4.     private static int[,] _buffer = new int[BoardWidth, BoardHeight];
  5.     public Task BroadcastPoint(int x, int y)
  6.     {
  7.         if (x < 0) x = 0;
  8.         if (x >= BoardWidth) x = BoardWidth - 1;
  9.         if (y < 0) y = 0;
  10.         if (y >= BoardHeight) y = BoardHeight - 1;
  11.         int color = 0;
  12.         int.TryParse(Clients.Caller.color, out color);
  13.         _buffer[x, y] = color;
  14.         return Clients.Others.DrawPoint(x, y, Clients.Caller.color);
  15.     }
  16.     public Task BroadcastClear()
  17.     {
  18.         _buffer = new int[BoardWidth, BoardHeight];
  19.         return Clients.Others.Clear();
  20.     }
  21.     public override Task OnConnected()
  22.     {
  23.         return Clients.Caller.Update(_buffer);
  24.     }
  25. }

用一个二位数组来缓存画板,一共就三个方法
1. 当客户端连接时调用Update()方法刷新整个画板
2. BroadcastClear()是点击清除按钮时讲整个画板擦出
3. 最后一个就是画画方法,客户端按下鼠标画画时,调用该方法进行绘制。

页面

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Drawing board</title>
  5.     <script src="Scripts/jquery-1.6.4.min.js"></script>
  6.     <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
  7.     <script src="/signalr/js"></script>
  8.     <script src="Scripts/DrawingBoard.js"></script>
  9.     <style>
  10.         div {
  11.             margin: 3px;
  12.         }
  13.         canvas {
  14.             border: 2px solid #808080;
  15.             cursor: default;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div>
  21.         <div>
  22.             <label for="color">Color: </label>
  23.             <select id="color">
  24.             </select>
  25.         </div>
  26.         <canvas id="canvas" width="300" height="300"></canvas>
  27.         <div>
  28.             <button id="clear">Clear canvas</button>
  29.         </div>
  30.     </div>
  31. </body>
  32. </html>

页面非常简单,一个选择颜色的下拉框,一个画板,和一个清除按钮。

javascript

  1. $(function () {
  2. //初始化
  3.     var colors = ["black", "red", "green", "blue", "yellow", "magenta", "white"];
  4.     var canvas = $("#canvas");
  5.     var colorElement = $("#color");
  6.     for (var i = 0; i < colors.length; i++) {
  7.         colorElement.append(
  8.             "<option value='" + (i + 1) + "'>" + colors[i] + "</li>"
  9.         );
  10.     }
  11.     //画板鼠标事件
  12.     var buttonPressed = false;
  13.     canvas.mousedown(function () {
  14.             buttonPressed = true;
  15.         })
  16.         .mouseup(function () {
  17.             buttonPressed = false;
  18.         })
  19.         .mousemove(function (e) {
  20.             if (buttonPressed) {
  21.                 setPoint(e.offsetX, e.offsetY, colorElement.val());
  22.             }
  23.         });
  24.     var ctx = canvas[0].getContext("2d");
  25.     //画画
  26.     function setPoint(x, y, color) {
  27.         ctx.fillStyle = colors[color - 1];
  28.         ctx.beginPath();
  29.         ctx.arc(x, y, 2, 0, Math.PI * 2);
  30.         ctx.fill();
  31.     }
  32.     //清除
  33.     function clearPoints() {
  34.         ctx.clearRect(0, 0, canvas.width(), canvas.height());
  35.     }
  36.     $("#clear").click(function () {
  37.         clearPoints();
  38.     });
  39.     //signalR
  40.     var hub = $.connection.drawingBoard;
  41.     //缓存颜色
  42.     hub.state.color = colorElement.val(); 
  43.     var connected = false;
  44.     //改变颜色
  45.     colorElement.change(function () {
  46.         hub.state.color = $(this).val();
  47.     });
  48.     //当连接时且鼠标按下时调用
  49.     canvas.mousemove(function (e) {
  50.         if (buttonPressed && connected) {
  51.             hub.server.broadcastPoint(
  52.                 Math.round(e.offsetX), Math.round(e.offsetY)
  53.             );
  54.         }
  55.     });
  56.     $("#clear").click(function () {
  57.         if (connected) {
  58.             hub.server.broadcastClear();
  59.         }
  60.     });
  61.     hub.client.clear = function () {
  62.         clearPoints();
  63.     };
  64.     hub.client.drawPoint = function (x, y, color) {
  65.         setPoint(x, y, color);
  66.     };
  67.     //更新整个画板
  68.     hub.client.update = function (points) {
  69.         if (!points) return;
  70.         for (var x = 0; x < 300; x++) {
  71.             for (var y = 0; y < 300; y++) {
  72.                 if (points[x][y]) {
  73.                     setPoint(x, y, points[x][y]);
  74.                 }
  75.             }
  76.         }
  77.     };
  78.     $.connection.hub.start()
  79.         .done(function () {
  80.             connected = true;
  81.         });
  82. });

实现效果

结束语

简单的讲了一个小案例。
源码下载
本文发布至作业部落

参考文献

SignalR Programming in Microsoft ASP.NET pdf 下载

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注