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

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

SignalR

前言

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

配置Hub

在Startup中进行配置：

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

建立DrawingHub

    1. public class Drawing : Hub
    1. {
    1.     private const int BoardWidth = 300, BoardHeight = 300;
    1.     private static int[,] _buffer = new int[BoardWidth, BoardHeight];
    1.     public Task BroadcastPoint(int x, int y)
    1.     {
    1.         if (x < 0) x = 0;
    1.         if (x >= BoardWidth) x = BoardWidth - 1;
    1.         if (y < 0) y = 0;
    1.         if (y >= BoardHeight) y = BoardHeight - 1;
    1.         int color = 0;
    1.         int.TryParse(Clients.Caller.color, out color);
    1.         _buffer[x, y] = color;
    1.         return Clients.Others.DrawPoint(x, y, Clients.Caller.color);
    1.     }
    1.     public Task BroadcastClear()
    1.     {
    1.         _buffer = new int[BoardWidth, BoardHeight];
    1.         return Clients.Others.Clear();
    1.     }
    1.     public override Task OnConnected()
    1.     {
    1.         return Clients.Caller.Update(_buffer);
    1.     }
    1. }

用一个二位数组来缓存画板,一共就三个方法

1. 当客户端连接时调用Update()方法刷新整个画板

2. BroadcastClear()是点击清除按钮时讲整个画板擦出

3. 最后一个就是画画方法,客户端按下鼠标画画时,调用该方法进行绘制。

页面

    1. <!DOCTYPE html>
    1. <html xmlns="http://www.w3.org/1999/xhtml">
    1. <head>
    1.     <title>Drawing board</title>
    1.     <script src="Scripts/jquery-1.6.4.min.js"></script>
    1.     <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
    1.     <script src="/signalr/js"></script>
    1.     <script src="Scripts/DrawingBoard.js"></script>
    1.     <style>
    1.         div {
    1.             margin: 3px;
    1.         }
    1.         canvas {
    1.             border: 2px solid #808080;
    1.             cursor: default;
    1.         }
    1.     </style>
    1. </head>
    1. <body>
    1.     <div>
    1.         <div>
    1.             <label for="color">Color: </label>
    1.             <select id="color">
    1.             </select>
    1.         </div>
    1.         <canvas id="canvas" width="300" height="300"></canvas>
    1.         <div>
    1.             <button id="clear">Clear canvas</button>
    1.         </div>
    1.     </div>
    1. </body>
    1. </html>

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

javascript

    1. $(function () {
    1. //初始化
    1.     var colors = ["black", "red", "green", "blue", "yellow", "magenta", "white"];
    1.     var canvas = $("#canvas");
    1.     var colorElement = $("#color");
    1.     for (var i = 0; i < colors.length; i++) {
    1.         colorElement.append(
    1.             "<option value='" + (i + 1) + "'>" + colors[i] + "</li>"
    1.         );
    1.     }
    1.     //画板鼠标事件
    1.     var buttonPressed = false;
    1.     canvas.mousedown(function () {
    1.             buttonPressed = true;
    1.         })
    1.         .mouseup(function () {
    1.             buttonPressed = false;
    1.         })
    1.         .mousemove(function (e) {
    1.             if (buttonPressed) {
    1.                 setPoint(e.offsetX, e.offsetY, colorElement.val());
    1.             }
    1.         });
    1.     var ctx = canvas[0].getContext("2d");
    1.     //画画
    1.     function setPoint(x, y, color) {
    1.         ctx.fillStyle = colors[color - 1];
    1.         ctx.beginPath();
    1.         ctx.arc(x, y, 2, 0, Math.PI * 2);
    1.         ctx.fill();
    1.     }
    1.     //清除
    1.     function clearPoints() {
    1.         ctx.clearRect(0, 0, canvas.width(), canvas.height());
    1.     }
    1.     $("#clear").click(function () {
    1.         clearPoints();
    1.     });
    1.     //signalR
    1.     var hub = $.connection.drawingBoard;
    1.     //缓存颜色
    1.     hub.state.color = colorElement.val(); 
    1.     var connected = false;
    1.     //改变颜色
    1.     colorElement.change(function () {
    1.         hub.state.color = $(this).val();
    1.     });
    1.     //当连接时且鼠标按下时调用
    1.     canvas.mousemove(function (e) {
    1.         if (buttonPressed && connected) {
    1.             hub.server.broadcastPoint(
    1.                 Math.round(e.offsetX), Math.round(e.offsetY)
    1.             );
    1.         }
    1.     });
    1.     $("#clear").click(function () {
    1.         if (connected) {
    1.             hub.server.broadcastClear();
    1.         }
    1.     });
    1.     hub.client.clear = function () {
    1.         clearPoints();
    1.     };
    1.     hub.client.drawPoint = function (x, y, color) {
    1.         setPoint(x, y, color);
    1.     };
    1.     //更新整个画板
    1.     hub.client.update = function (points) {
    1.         if (!points) return;
    1.         for (var x = 0; x < 300; x++) {
    1.             for (var y = 0; y < 300; y++) {
    1.                 if (points[x][y]) {
    1.                     setPoint(x, y, points[x][y]);
    1.                 }
    1.             }
    1.         }
    1.     };
    1.     $.connection.hub.start()
    1.         .done(function () {
    1.             connected = true;
    1.         });
    1. });

实现效果

结束语

简单的讲了一个小案例。

源码下载

本文发布至作业部落

参考文献

SignalR Programming in Microsoft ASP.NET pdf 下载

一步一步学习SignalR进行实时通信_8_案例2的更多相关文章

  1. 一步一步学习SignalR进行实时通信_6_案例

    原文:一步一步学习SignalR进行实时通信_6_案例 一步一步学习SignalR进行实时通信\_6_案例1 一步一步学习SignalR进行实时通信_6_案例1 前言 类的定义 各块功能 后台 上线 ...

  2. 一步一步学习SignalR进行实时通信_1_简单介绍

    一步一步学习SignalR进行实时通信\_1_简单介绍 SignalR 一步一步学习SignalR进行实时通信_1_简单介绍 前言 SignalR介绍 支持的平台 相关说明 OWIN 结束语 参考文献 ...

  3. 一步一步学习SignalR进行实时通信_9_托管在非Web应用程序

    原文:一步一步学习SignalR进行实时通信_9_托管在非Web应用程序 一步一步学习SignalR进行实时通信\_9_托管在非Web应用程序 一步一步学习SignalR进行实时通信_9_托管在非We ...

  4. 一步一步学习SignalR进行实时通信_7_非代理

    原文:一步一步学习SignalR进行实时通信_7_非代理 一步一步学习SignalR进行实时通信\_7_非代理 SignalR 一步一步学习SignalR进行实时通信_7_非代理 前言 代理与非代理 ...

  5. 一步一步学习SignalR进行实时通信_5_Hub

    原文:一步一步学习SignalR进行实时通信_5_Hub 一步一步学习SignalR进行实时通信\_5_Hub SignalR 一步一步学习SignalR进行实时通信_5_Hub 前言 Hub命名规则 ...

  6. 一步一步学习SignalR进行实时通信_4_Hub

    原文:一步一步学习SignalR进行实时通信_4_Hub 一步一步学习SignalR进行实时通信\_4_Hub SignalR 一步一步学习SignalR进行实时通信_4_Hub 前言 创建Hub 配 ...

  7. 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

    原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...

  8. 一步一步学习SignalR进行实时通信_2_Persistent Connections

    原文:一步一步学习SignalR进行实时通信_2_Persistent Connections 一步一步学习SignalR进行实时通信\_2_Persistent Connections Signal ...

  9. 12.Linux软件安装 (一步一步学习大数据系列之 Linux)

    1.如何上传安装包到服务器 有三种方式: 1.1使用图形化工具,如: filezilla 如何使用FileZilla上传和下载文件 1.2使用 sftp 工具: 在 windows下使用CRT 软件 ...

随机推荐

  1. WCF - 序列化

    数据是信息的载体 在不同环境中有不同的类型 为保证处于不同平台的的应用能够正常的进行数据交互 必须采用一种双方都能理解的数据类型 XML无疑是最好的选择 但不是唯一的选择 例如JSON也是一种普遍认可 ...

  2. 去掉android点击事件产生的半透明蓝色背景

    在wap开发过程当中,当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的蓝色背景,若要重设这个表现 ,可以利用css3: *{ -webkit-tap-high ...

  3. D2JS 的数据绑定

    D2JS 将数据绑定视为"对象-路径-渲染/收集 "组成.主要 DOM  元素和对象绑定,称为 d2js.root,非主要元素指定数据路径,通过路径定位到值,根据值可进行渲染或收集 ...

  4. dedecms 5.7文章编辑器附件上传图标不显示

    我最近发现在使用dedecms 5.7文章编辑器附件上传图标不显示了,以前是没有问题的,这个更新系统就出来问题了,下面我来给大家分享此问题解决办法.   问题bug:在dedecms 5.7中发现了一 ...

  5. 解决dispaly:inline-block 遗留间隙的问题

    今天做一个项目 .本来我打算是作成表格的 ,后来觉得太费事直接搞成一个div 里面直接放四个a ,然后我将a 设置成inline-block.刚开始还没发现任何间隙问题,(对了说到这里 博主给新手介绍 ...

  6. OSI七层模型理解

    物理层功能1,为数据端设备提供传送数据的通路 功能2,传输数据 接口.传输介质.信号的传输.网络设备 有线介质:双绞线(普通的网线),光纤. 无线介质:无线电.微波.激光.红外线. 例如手机.电视接收 ...

  7. if 和 swith的选择.

    具体数值不多,而是符合byte short int char这四种类型,建议使用swtich语句.因为效率稍高. 其他情况:对区间判断,对结果为boolean类型判断,使用if,if的使用范围更广.

  8. Jquery不生效

    $(document).ready(function(){这个都没有生效, 1.网上查了说是jquery的路劲引入的有问题,经查并不是这个问题 2.换了一个jquery的版本,发现生效了. 原不生效文 ...

  9. 开发自己的cordova插件

    如果还没有配置过cordova环境,首先要下载nodejs,(下载地址https://nodejs.org/)下载完毕安装. 控制台: 1.输入npm -v 确定是否装上了 2.输入sudo npm ...

  10. 移动触摸事件(touchstart、touchmove和touchend)

    touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...