我正在编写一个基于JavaScript的多用户绘图应用程序,作为一个学习项目。现在是一种方式:transmitter.html的"发送器"客户端在用户绘制HTML5画布元素时发送数据,receiver.html的"接收器"客户端在自己的画布上复制数据。
变送器只是在(previousX,previousY)和(currentX,currentY)之间画一条线来响应mouseMove事件。它通过AJAX将这两组坐标发送到transmitter.php。它们位于会话var中,直到接收器通过调用receiver.php(也通过AJAX)收集它们。至少它应该是这样工作的。
这是传输器。hp:
<?php
session_start();
if (!isset($_SESSION['strokes'])) $_SESSION['strokes'] = '';
$_SESSION['strokes'] .= $_GET['px'] . "," . $_GET['py'] . "," . $_GET['x'] . "," . $_GET['y'] . ';';
?>
这是receiver.php:
<?php
session_start();
echo($_SESSION['strokes']);
$_SESSION['strokes'] = "";
?>
如果你想知道我为什么要使用会话var,那是因为这是我能想到的以其他脚本可以访问的方式存储数据的最快方法。我试着在谷歌上搜索替代品,但什么也找不到。如果有更好的方法,我很想听听。
无论如何,问题是并不是所有的数据都能通过。这一点通过接收者画布上的线条间隙来体现。我还在发射器和接收器的JavaScript文件中设置了一个小计数器,以检查到底发送/接收了多少"笔划"。接收的数据总是比发送的少,所以数据似乎在服务器端丢失。
冒着给你更多代码的风险,这是transmitter.js中向服务器发送数据的代码(n是我提到的计数器):
function mouseMoveHandler(e)
{
var x = e.pageX - canvasX;
var y = e.pageY - canvasY;
if (mouseDown)
{
canvas.moveTo(prevX, prevY);
canvas.lineTo(x, y);
canvas.stroke();
sendToServer(prevX, prevY, x, y);
n++;
}
prevX = x;
prevY = y;
}
这是接收器中的代码,它将其取回并提取(同样,n是计数器):
function responseHandler()
{
if (xhr.readyState == 4)
{
var strokes = xhr.responseText.split(';');
n += strokes.length - 1;
for (var i = 0; i < strokes.length - 1; i++)
{
stroke = strokes[i].split(',');
canvas.moveTo(stroke[0], stroke[1]);
canvas.lineTo(stroke[2], stroke[3]);
canvas.stroke();
}
setTimeout("contactServer()", 500);
}
}
如果我没看错你的问题;你正试图从不同的客户端访问同一会话?如果是这种情况,这是不可能的,会话绑定到客户端/用户。
如果你想要实时、多用户的东西,你可能应该看看NodeJS,特别是NodeJS事件。它是基于JS的,所以我认为它将很好地集成到您的应用程序中。