0

我正在编写一个多用户、基于 JavaScript 的绘图应用程序作为学习项目。现在这是一种方式：当用户在 HTML5 画布元素上绘制时，transmitter.html 上的“发送者”客户端发送数据，receiver.html 上的“接收者”客户端将其复制到他们自己的画布上。

发送器只是在 (previousX, previousY) 和 (currentX, currentY) 之间画一条线以响应 mouseMove 事件。它通过AJAX 将这两组坐标发送到transmitter.php。它们坐在会话变量中，直到接收者通过调用receiver.php（也通过AJAX）收集它们。至少它应该是这样工作的。

这是发射器.php：

<?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'] = "";

?>

如果您想知道我为什么要使用会话变量，那是因为它是我能想到的以其他脚本可以访问数据的方式存储数据的最快方式。我尝试在谷歌上搜索替代品，但找不到任何东西。如果有更好的方法，我很想听听。

无论如何，问题在于并非所有数据都能通过。这通过在接收者画布上绘制的线条中的间隙表现出来。我还在发送器和接收器的 JavaScript 文件中设置了一个小计数器，以准确检查发送/接收了多少“笔划”。收到的总是少于发送的，因此数据似乎在服务器端丢失。

冒着给你的代码比你需要看到的更多的风险，这是发送器.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);
    }
}
4

1 回答 1

0

如果我正确阅读了您的问题；您正在尝试从不同的客户端访问相同的会话？如果是这种情况，这是不可能的，会话绑定到客户端/用户。

如果你想要一些实时的、多用户的东西，你可能应该看看 NodeJS，特别是NodeJS Events。这是基于 JS 的，所以我认为它会很好地集成到您的应用程序中。

于 2012-04-03T21:09:19.173 回答