Question

我需要开发一个只会对文件夹中的图像进行幻灯片放映的网页

以下是我的用例 -

我的电脑上有一个包含一些图像的文件夹，我需要对这些图像进行幻灯片放映
我可以动态地向此文件夹添加更多图像。
现在让我们说第1点中所有图像的幻灯片放映的第一次迭代完成，并且在幻灯片放映的第一次迭代期间在文件夹中添加了新图像，然后对于第二次迭代，它应该首先显示图像动态添加，然后再次开始播放所有图像的幻灯片。

例如。如果我在一个文件夹中有10张图像并且这10张图像的幻灯片正在进行中，那么现在该文件夹中还会添加2张图像，总图像数为12。在这种情况下，滑块应完成10张图像的幻灯片放映，然后它应显示2个新添加的图像。现在，对于下一次迭代，它应该显示所有12个图像。这个过程应该继续。

我对网络技术非常陌生，任何帮助都会受到赞赏。谢谢

Answer 1

AJAX

您可以每分钟（或其他值）添加一个客户端ajax调用（javascript），要求服务器（PHP）获取文件夹文件并将其发送回客户端（javascript，json）。

的WebSocket

使用Node.js socket.io包以及更改文件夹时注册事件的人员。它将被客户捕获，您可以触发刷新图像。

Nice socket.io example here。此stackoverflow thread解释了如何检测（监视）文件夹更改。

编辑：使用Websocket的示例

服务器端Node.js（未完成）

// Main app
var express = require('express');
var app = express();
...
// Main http server listen
var http = require('http').Server(app);
...
// Websocket
var io = require('socket.io')(http);
// FileSystem (? better to use chokidar ?)
var fs = require('fs');

// On client connection, subscribe to event
io.on('connection', function(socket){
    // Register a socket.io server event 'subscribe'
    socket.on('subscribe folder change', function() {
        socket.username = 'test_user';
        socket.room = 'folder-change';
        socket.join('folder-change');        
        console.log('subscribe folder change event');
    });
}); 

var fsTimeout;
// Watch folder
fs.watch('folderToScan',  function (event) {
    if (!fsTimeout) {
        // Read folder
        fs.readdir('folderToScan', function(err, files){
            if (err) throw err;
            console.log('emit event folder change', files);
            // Emit a socket.io folder changed ('folder-change' = room)
            io.sockets.in('folder-change').emit('folder changed', JSON.stringify(files));        
        });
        // Give 3 seconds for multiple events
        fsTimeout = setTimeout(function() { fsTimeout = null; }, 3000);
    }
});

客户端javascript（Polymer 2环境）

<script src="path/to/node_modules/socket.io-client/dist/socket.io.js" type="text/javascript"></script>

...

// Listen for folder change
var socketIO = io.connect();
// Fire server Socket.io event 'subscribe folder change'
socketIO.emit('subscribe folder change');
// Register to server Socket.io event 'folder change' (check in demo-server/app.js)
socketIO.on('folder changed', function(folderFiles){
    var files = JSON.parse(folderFiles);
    console.log('Folder changer, files in folder', files);
});

在文件夹中动态添加图像的幻灯片

1 个答案: