How to auto update canvas screen via ajax every X seconds?

Question

I have a task to create social network

I have a home page that displays all drawings created by users via canvas. Users can draw on their own drawing and can add contributors which have righ to draw on their drawing also. The thing is they can both draw in the same time somehow.

The thing i want to do is, that when one user draws the canvas image, it is updating for other user who is watching that same drawing without refreshing the page.

I want to note that program works well, the only problem is that you have to refresh the page to see changes of drawing

Here is my client side code where i add previously drawed picture to empty canvas before new drawing

canvas = document.getElementById('can');

contain = document.getElementById('contain');
ctx = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = ''+drugi+'/'+prvi+'.png';
imageObj.onload = function() {
ctx.drawImage(this, 0, 0);
};

Here is the request to ajax to save drawing after every start of the draw() function (which is everytime you move your mouse while drawing on canvas)

ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
var dataURL = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'saveimg.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(dataURL );

This is server side code

<?php
 session_start();
 $crtez = $_SESSION['tmpdrawing'];
 $kategorija = $_SESSION['tmpkat'];
 if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
 {
 $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
 $filteredData=substr($imageData, strpos($imageData, ",")+1);
 $unencodedData=base64_decode($filteredData);
 $fp = fopen($kategorija . '/' . $crtez . '.png', 'wb' );
 fwrite( $fp, $unencodedData);
 fclose( $fp );
?>

Now when we have a code, actual thing i want is the first code, which changes canvas appearance to be launched for example in every 3 seconds, so the other users currently on that drawing can see the picture updating without refreshing page.

If you need more code in client side i will post.

I want to say again that the program works perfectyl, the only thing i need to finish it is auto updating canvas via ajax

Answer 1

First you should wrap javascript code into function and than just call that function when something is changed on the server side. As I know, there are two concepts for communitaion between clients and server:

1. Server Pooling - using javascript, client sends a HTTP request every X seconds and do something when server send some updates, for example update canvas. This is an "old school" and performance-poor pattern, maybe you should avoid it. If you like The Simpsons, this is it: Are we there yet Take a look: Server Pooling Example

2. Web Socket Communication - full duplex communication between server and clients. When something happened on the server side, clients are informed almost immediately. I had a lot of problems to implement web socket communication with PHP and Apache Server last year when I worked with that kind of project and don't know if anything is better right now. But, after reading some books for realtime applications development, I made it with Pusher, that's an commercial service but also have free plans.