javascript - 如何通过ajax每X秒自动更新 Canvas 屏幕？

Question

我的任务是创建社交网络

我有一个主页，显示用户通过 Canvas 创建的所有绘图。用户可以在自己的绘图上绘图，并且可以添加也有权在其绘图上绘图的贡献者。问题是他们可以以某种方式同时绘制。

我想做的是，当一个用户绘制 Canvas 图像时，它会为正在观看同一绘图的其他用户更新，而无需刷新页面。

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

这是我的客户端代码，我在新绘图之前将先前绘制的图片添加到空 Canvas

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()函数后保存绘图(即每次在 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 );

这是服务器端代码

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

现在，当我们有了代码时，我真正想要的是第一个代码，它会更改 Canvas 外观，例如每 3 秒启动一次，以便当前该绘图上的其他用户可以看到图片更新而无需刷新页面。

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

我想再说一遍，该程序运行完美，我唯一需要完成的就是通过ajax自动更新 Canvas

Answer 1

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

1. 服务器池 - 使用 JavaScript，客户端每 X 秒发送一个 HTTP 请求，并在服务器发送一些更新时执行某些操作，例如更新 Canvas 。这是一种“老派”且性能不佳的模式，也许您应该避免它。如果您喜欢《辛普森一家》，就是:Are we there yet看看:Server Pooling Example

2. Web Socket 通信 - 服务器和客户端之间的全双工通信。当服务器端发生问题时，客户端几乎会立即收到通知。去年，当我从事此类项目时，我在使用 PHP 和 Apache Server 实现 Web 套接字通信时遇到了很多问题，不知道现在是否有更好的办法。但是，在阅读了一些有关实时应用程序开发的书籍后，我用 Pusher 做到了。 ，这是一项商业服务，但也有免费计划。