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

简介: 原文:一步一步学习SignalR进行实时通信_8_案例2 一步一步学习SignalR进行实时通信\_8_案例2SignalR 一步一步学习SignalR进行实时通信_8_案例2前言 配置Hub 建立DrawingHub 页面 javascript 实现效果 结束语 参考文献 前言这讲分析一个案例,在一个画板上画画实时在其他客户端上显示。
原文: 一步一步学习SignalR进行实时通信_8_案例2

一步一步学习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 下载

目录
相关文章
【Xamarin】使用WebSocket开发实时通信应用程序
WebSockets是一种双向通信协议,或TCP连接上的持久通信通道,由许多游戏,具有聊天功能的应用程序和实时应用程序(如股票行情)利用的非常强大的协议。 在这篇博文中,我们将讨论如何构建一个简单的Xamarin聊天室应用程序,该应用程序将利用并连接到ASP.NET Core WebSocket服务。
2993 0
|
1月前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【4月更文挑战第12天】本文探讨了小程序全栈开发中WebSocket实时通信的实践,WebSocket作为实现双向实时通信的协议,其长连接特性和双向通信能力在实时聊天、推送、游戏和监控等场景中发挥关键作用。开发者需注意安全性、性能和兼容性问题,以优化用户体验并确保小程序稳定运行。通过掌握WebSocket,开发者能提升小程序的功能性和用户体验。
|
1月前
|
存储 网络协议 JavaScript
浅谈WebSocket及如何搭建实时聊天系统
WebSocket 是一种在客户端和服务器之间提供全双工、双向通信的网络协议。它是基于TCP/IP协议栈的应用层协议,旨在实现浏览器与服务器之间的实时、低延迟且高效的长连接通信
198 1
|
网络安全 开发工具 数据安全/隐私保护
建立一个流式的RPC通信 | 青训营笔记
建立一个流式的RPC通信 | 青训营笔记
174 0
|
存储 开发框架 JavaScript
『SignalR』.NET使用 SignalR 进行实时通信初体验
📣读完这篇文章里你能收获到 - 你将对SignalR有了初步的认识及体会 - 对于哪些场景适用SignalR以及如何接入使用 - SignalR的代码入门级Demo实际案例
487 0
『SignalR』.NET使用 SignalR 进行实时通信初体验
|
网络协议 网络架构
网络通讯原理简介以及演示通讯过程
网络通讯原理简介以及演示通讯过程
151 0
网络通讯原理简介以及演示通讯过程
|
SQL 消息中间件 开发框架
如何利用.NETCore向Azure EventHubs准实时批量发送数据?
Azure事件中心的基础用法 .NET Core准实时分批向Azure事件中心发送数据,其中用到的TPL Dataflow以actor模型:提供了粗粒度的数据流和流水线任务,提高了高并发程序的健壮性。
如何利用.NETCore向Azure EventHubs准实时批量发送数据?
|
Web App开发 JavaScript 前端开发
常见的Web实时消息交互方式和SignalR
原文:常见的Web实时消息交互方式和SignalR 标签: WebSocket SignalR 前言 1. Web消息交互技术 1.1 常见技术 1.2 WebSocket介绍 1.3 WebSocket示例 2.
2026 0