Question

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

发送器只是在（previousX，previousY）和（currentX，currentY）之间绘制一条线以响应mouseMove事件。它通过AJAX将这两组坐标发送到transmitter.php。他们坐在会话var中，直到接收者通过调用receiver.php，也通过AJAX收集它们。至少它应该如何运作。

这是transmitter.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'] = "";

?>

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

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

冒着给你的代码多于你需要看到的代码的风险，这是transmit.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);
    }
}

Answer 1

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

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

PHP / AJAX多用户应用程序 - 数据以某种方式丢失

1 个答案: