如何通过ajax每X秒自动更新画布屏幕？

Question

我有一个任务来创建社交网络

我有一个主页，显示用户通过画布创建的所有图纸。用户可以绘制自己的图纸，并可以添加贡献者，它们也可以绘制图纸。事情是他们都可以在同一时间以某种方式绘制。

我想要做的事情是，当一个用户绘制画布图像时，它正在更新其他正在观看同一图形而不刷新页面的用户。

我想指出，节目效果很好，唯一的问题是，你必须刷新页面，看看图纸

这里的变化是我添加以前前drawed图片空白的画布，我的客户端代码新的绘图

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

这里是请求AJAX来保存draw（）函数的每次启动后绘制（这是每次您移动鼠标而在画布上绘制）

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

这是服务器端代码

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

现在，当我们有一个代码，我想实际的就是第一个代码，从而改变帆布外观每3秒上马例如，所以当前在该图上的其他用户可以看到图片更新而不刷新页面。

如果您需要更多代码在客户端我会发布。

我想再次说，项目工程perfectyl，我需要完成它的唯一的事情就是通过AJAX

Answer 1

首先自动更新的画布，你应该将Javascript代码到功能，不仅仅是调用该函数当在服务器端更改某些内容时。据我所知，有两个概念，为客户和服务器之间communitaion：

1. 服务器池 - 使用JavaScript，客户端发送一个HTTP请求，每X秒，做一些事情，当服务器发送一些更新，例如更新画布。这是一个“老派”，表现不佳的模式，也许你应该避免它。如果你喜欢辛普森一家，这是它：Are we there yet看一看：Server Pooling Example

2. 网络插座通信 - 服务器和客户端之间的全双工通信。当服务器端发生问题时，客户几乎立即得到通知。去年，当我与这类项目合作并且不知道现在是否有什么更好的时候，我在实现与PHP和Apache Server的Web套接字通信方面遇到了很多问题。但是，在阅读了一些实时应用程序开发的书籍后，我用Pusher做了这个，这是一个商业服务，但也有免费的计划。