如何通過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做了這個，這是一個商業服務，但也有免費的計劃。