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

Question

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

下面是我的用例-

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

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

我了解到 JavaScript 无法访问文件系统，因此必须使用 php/node js 来读取文件夹的内容。

我对网络技术还很陌生，如有任何帮助，我将不胜感激。谢谢

Answer 1

AJAX

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

Websocket

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

不错的 socket.io example here .这个计算器 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);
});