Slideshow of dynamically added images in a folder

Question

I need to develop a webpage that will just do slideshow of the images in a folder

Below is my use case -

1. I have a folder in my PC which contains some images and I need to do slideshow of these images
2. I can add more images to this folder dynamically.
3. Now lets say for first iteration of the slideshow of all images in point 1 is complete and there are new images that are added in the folder during the 1st iteration of slideshow then for the second iteration it should first show the images that are added dynamically and then start the slideshow of all images again.

For eg. If I have 10 images in a folder and the slideshow of these 10 images are in progress, now 2 more images are added in that folder and total image count is 12. In this case slider should complete slideshow of 10 images and then it should show 2 new added images. And now for the next iteration it should show all 12 images. This process should continue.

I learnt JavaScript cannot access filesystem, so will have to use php/node js for reading contains of folder.

I am very new to web technology and any help would be appreciated. Thank you

Answer 1

AJAX

You can add a client ajax call (javascript) every minute (or other value) who ask server (PHP) to get folder files and send it back to client (javascript, json).

Websocket

Use Node.js socket.io package with who you register an event when folder is changed. It will be catch by client and you can trigger refresh of your images.

Nice socket.io example here. This stackoverflow thread explain how to detect (watch) a folder change.

EDIT : Example with Websocket

Server side Node.js (not complete)

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

Client side javascript (Polymer 2 environment)

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