SignalR

使用SignalR实现实时绘图板

最新推荐文章于 2025-10-27 17:55:07 发布

原创最新推荐文章于 2025-10-27 17:55:07 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

c# 专栏收录该内容

13 篇文章

订阅专栏

第一步，创建一个新的解决方案Test。文件——新建——项目——ASP.NET Web应用程序

第二步，使用NuGet添加SignalR包。工具——NuGet包管理器——程序包管理控制台

输入命令：

PM> install-package Microsoft.AspNet.SignalR

第三步，修改Default.aspx页面。

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drawing board</title>
    
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.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>

注意四个js文件的代码名称和顺序

第四步，DrawingBoard.js的代码。

在Scripts文件夹下面创建名为DrawingBoard.js的文件，代码如下：

$(function () {

    ///////////////////////////////////////////////////////////////
    // Standard drawing board functionalities
    ///////////////////////////////////////////////////////////////

    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();
    });

    ///////////////////////////////////////////////////////////////
    // SignalR specific code
    ///////////////////////////////////////////////////////////////

    var hub = $.connection.drawingBoard;
    hub.state.color = colorElement.val(); // Accessible from server
    var connected = false;

    // UI events
    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();
        }
    });

    // Event handlers
    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]);
                }
            }
        }
    };

    // Voila! —— 与SignalR服务建立连接
    $.connection.hub.start()
        .done(function () {
            //建立连接成功后将connected设置为true
            connected = true;
        });

});

第五步，修改根目录下的Startup.cs文件

代码：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(Test.Startup))]
namespace Test
{
    public partial class Startup {
        public void Configuration(IAppBuilder app) {
            ConfigureAuth(app);
            app.MapSignalR();
        }
    }
}

只在原来的基础上添加了app.MapSignalR();这一行。

第六步，根目录下添加DarwingBoard.cs文件

代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;

namespace Test
{
    public class DrawingBoard : Hub
    {
        //public void Hello()
        //{
        //    Clients.All.hello();
        //}
        private const int BoardWidth = 300, BoardHeight = 300;
        private static int[,] _buffer = GetEmptyBuffer();
        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 = GetEmptyBuffer();
            return Clients.Others.Clear();
        }

        public override Task OnConnected()
        {
            return Clients.Caller.Update(_buffer);
        }

        private static int[,] GetEmptyBuffer()
        {
            var buffer = new int[BoardWidth, BoardHeight];
            return buffer;
        }
    }
}

运行Default.aspx文件，打开两个页面，然后画画

在第一个网页画画，第二个网页也跟着改变。

代码分析：

运行页面，执行js文件中的代码

// Voila! —— 与SignalR服务建立连接
    $.connection.hub.start()
        .done(function () {
            //建立连接成功后将connected设置为true
            connected = true;
        });

如果连接成功，则执行done()中的函数。

var hub = $.connection.drawingBoard;

连接DrawingBoard.cs文件。

hub.server.broadcastPoint(
                Math.round(e.offsetX), Math.round(e.offsetY)
            );

向BroadcastPoint(int x, int y)方法传递参数，执行。

执行完成后调用js函数，并向前台传递参数：

return Clients.Others.DrawPoint(x, y, Clients.Caller.color);

js接收：

hub.client.drawPoint = function (x, y, color) {
        //setPoint(x, y, color);
    };

当然也可以这样传：

Clients.All.sendMessage(mb1);

还有这样传：

return Clients.Caller.getI(_timeri);

最后这个只传给Caller自己，All全传，Others只传给别人。