I'm writing a multi-user, JavaScript based drawing app as a learning project. Right now it's one way: the "transmitter" client at transmitter.html sends the data as the user draws on the HTML5 canvas element, the "receiver" client at receiver.html replicates it on their own canvas.

The transmitter just draws a line between (previousX, previousY) and (currentX, currentY) in response to a mouseMove event. It sends those two sets of coordinates to transmitter.php via AJAX. They sit in a session var until the receiver collects them by calling receiver.php, also via AJAX. At least that's how it should work.

This is transmitter.php:

<?php

session_start();

if (!isset($_SESSION['strokes'])) $_SESSION['strokes'] = '';

$_SESSION['strokes'] .= $_GET['px'] . "," . $_GET['py'] . "," . $_GET['x'] . "," . $_GET['y'] . ';';

?>

This is receiver.php:

<?php

session_start();

echo($_SESSION['strokes']);

$_SESSION['strokes'] = "";

?>

In case you're wondering why I'm using a session var, it's because it's the fastest way I could think of to store the data in such a way that it could be accessed by the other script. I tried googling for alternatives but couldn't find anything. If there's a better way, I'd love to hear about it.

Anyway, the problem is that not all of the data is making it through. This manifests itself by gaps in the lines drawn on the receiver's canvas. I also set up a little counter in the transmitter's and receiver's JavaScript files, to check exactly how many "strokes" were being sent/received. There are invariably less received than sent, so the data is being lost server-side, it seems.

At the risk of giving you more code than you need to see, this is the code in transmitter.js that sends the data to the server (n is the counter that I mentioned):

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

This is the code in receiver that gets it back and draws it (again, n is the counter):

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

• php
• javascript
• ajax

If I read your question correctly; you're trying to access the same session from different clients? If this is the case, this isn't possible, sessions are bound to a client/user.

If you want something realtime, multi-user you probably should take a look at NodeJS and specifically at NodeJS Events. Which is JS based, so I think that will integrate nicely in your application.