.NET - Synchronized drawing with SignalR

  • 配置启用SignalR
using Owin;
 
namespace PaintDemo
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}
  • 实现SignalR服务
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;
using System.Collections.Generic;
 
namespace PaintDemo.Hubs
{
    public class PaintHub : Hub
    {
        public void Draw(Track track)
        {
            System.Threading.Thread.Sleep(50);
            this.Clients.All.draw(track);
        }
 
        public void MoveTo(Point2D point)
        {
            this.Clients.All.moveTo(point);
        }
 
    }
 
    public class Point2D
    {
        [JsonProperty("x")]
        public double X { get; set; }
        [JsonProperty("y")]
        public double Y { get; set; }
    }
 
    public class Track
    {
        [JsonProperty("points")]
        List<Point2D> Points { get; set; }
    }
}
  • 网页端应用
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Paint</title>
</head>
<body>
    <script src="~/Scripts/jquery-2.2.1.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function () {
            var paintHub = $.connection.paintHub,
                moved = false,
                isctrl = false;
 
            var points = [];
            var canvas = $("#id-image-canvas");
            var ctx = canvas.get(0).getContext("2d");
 
            ctx.strokeStyle = '#ff0000';
            ctx.beginPath();
 
            paintHub.client.moveTo = function (model) {
                ctx.moveTo(model.x, model.y);
            };
 
            paintHub.client.draw = function (model) {
                model.points.forEach(drawPoint);
            }
 
            $.connection.hub.start().done(function () {
                console.log("Hub started.")
                setInterval(updateServerModel, 100);
            });
 
            function drawPoint(p) {
                ctx.lineTo(p.x, p.y);
                ctx.stroke();
            }
 
            function updateServerModel() {
                if (moved) {
                    console.log("updateServerModel")
                    paintHub.server.draw({ points: points });
                    points = [];
                    moved = false;
                }
            }
 
            canvas.mousemove(function (event) {
                var p = { x: event.offsetX, y: event.offsetY };
                if (isctrl) {
                    points.push(p);
                    moved = true;
                }
            });
 
            canvas.mousedown(function (event) {
                isctrl = !isctrl
                point = { x: event.offsetX, y: event.offsetY };
                if (isctrl) {
                    paintHub.server.moveTo(point);
                }
                console.log("controlling: " + isctrl)
            })
        });
    </script>
 
    <h2>Share painting between multiple browsers</h2>
    <canvas id="id-image-canvas" width="500" height="600" style="background-color: black"></canvas>
</body>
</html>
  • 运行

Paint demo in signalR!