Question

我有创建社交网络的任务

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

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

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

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

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

这是每次启动draw（）函数后ajax保存绘图的请求（每次在画布上绘图时都移动鼠标）

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秒就会启动一次，因此当前在该绘图上的其他用户可以在没有刷新页面的情况下看到图片更新。

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

我想再次说该程序是完美的，我唯一需要完成它的是通过ajax自动更新画布

Answer 1

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

服务器池 - 使用javascript，客户端每隔X秒发送一次HTTP请求，并在服务器发送一些更新时执行某些操作，例如更新画布。这是一所旧学校＆＃34;和性能差的模式，也许你应该避免它。如果你喜欢辛普森一家，就这样吧：Are we there yet看一看：Server Pooling Example
Web Socket Communication - 服务器和客户端之间的全双工通信。当服务器端发生某些事情时，几乎立即通知客户。去年我与PHP和Apache Server进行Web套接字通信时遇到了很多问题，当时我正在处理这类项目并且现在还不知道有什么比这更好的了。但是，在阅读了一些用于实时应用程序开发的书籍后，我用Pusher创建了它，这是一项商业服务，但也有免费计划。

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

1 个答案: