好的,这是我在图片显示代码中的第一个功能:
function init() {
socket.on('getPictures', function(data) {
images = data;
loadImages();
});
console.log("loading");
socket.emit('getPictures');
}
' getPictures' call使用db.collection.find({})返回数据库中的每个文档。这些文档具有名称,源(64位字符串)等属性,以及客户端可以在每张图片上放置的一些标记。图像是一个包含我所有文档的数组。
这是mongo侧代码:
socket.on('getPictures', function() {
console.log("getting pictures");
Picture.find({}, function(err, data) {
if(err) console.log(err);
else
io.emit('getPictures', data);
});
});
通过使用db.collection.find({})方法,我立即收到所有图片,而且我的程序加载时间非常荒谬(因为有很多图片)。有没有什么办法可以一次从mongo加载一次文档,然后将其放入图像? mongo有没有办法告诉它是否完成了某个文件的查询?如果是这样,我已经有方法从图像动态创建和绘制每个画布,所以我基本上可以消除它们的重载时间。
我对javascript(和编程)非常陌生,所以如果我没有提供足够的信息,我很抱歉。我试图掌握它。
答案 0 :(得分:0)
我发现了两种有用的方法。首先,你可以使用Mongoose(我猜你从代码中使用Mongoose)的事实返回一个cursor作为回调的参数,以便在数据库查询返回时单独或分批发送图像。您可以控制批量大小以找到正确的余额。示意性地修改代码,
socket.on('getPictures', function() {
console.log("getting pictures");
Picture.find({}, function(err, cursor) {
if(err)
console.log(err);
else
cursor.each(function(err, doc) {
io.emit('aPicture', doc);
});
});
});
然后在客户端接收到的每张图片时,关闭aPicture
套接字事件。您可以通过修改find()
回调来发送批次而不是单个图片,以便在发送到客户端之前累积数组或其他内容。
另一种方法取决于几个假设:首先,您的客户端程序是浏览器,其次,您使用简单的<img src=>
种HTML标记显示图像。浏览器经过优化,可以并行加载和渲染大量这些标记,因为大多数现代网站都有包含许多图像的页面。在这种情况下,您可以像现在一样获得所有结果,但只需将_id
或其他一些唯一标识符发送回客户端即可。然后,您可以调用另一个可以调用的网址,例如/images/:_id
,它会查找并回复图片的二进制数据,因此您可以创建一个动态图片标记,如<img src="/images/my_dog_ralphie.jpg">
。您可以使用jQuery或其他东西按顺序制作大量这些内容,然后它们将以浏览器处理的详细信息的形式异步加载和呈现实际图像。我不能对代码过于具体,因为我不知道你的应用程序的整个技术堆栈。