第一步,创建一个新的解决方案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只传给别人。