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

我的任务是创建社交网络

我有一个主页，显示用户通过画布创建的所有图形。用户可以在自己的图形上绘制，也可以添加有权在其图形上绘制的贡献者。问题是，它们可以同时绘制。

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

我想指出的是，该程序运行良好，唯一的问题是您必须刷新页面才能看到绘图的更改

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

这是我的客户端代码，在新绘图之前，我将以前绘制的图片添加到空画布中

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（）函数后保存绘图（每次在画布上绘图时移动鼠标）

这是服务器端代码

<?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秒钟启动一次，因此当前在该绘图上的其他用户可以看到图片更新，而无需刷新页面。

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

---

我想再次指出，该程序运行完美，我唯一需要完成的就是通过ajax自动更新画布

首先，您应该将javascript代码包装到函数中，而不是在服务器端发生更改时调用该函数。据我所知，客户端和服务器之间的通信有两个概念：

服务器池-使用javascript，客户端每X秒发送一个HTTP请求，并在服务器发送一些更新时执行某些操作，例如更新画布。这是一个“老派”和表现差的模式，也许你应该避免它。如果你喜欢《辛普森一家》，这就是：看看：

Web套接字通信-服务器和客户端之间的全双工通信。当服务器端发生问题时，客户机几乎会立即得到通知。去年，当我处理这类项目时，我在用PHP和Apache服务器实现web套接字通信时遇到了很多问题，不知道现在是否有更好的方法。但是，在读了一些关于实时应用程序开发的书之后，我用了，这是一项商业服务，但也有免费的计划

也许把ajax函数放进去？