Array data being duplicated when transmitted via socket (Socket.io)

I have a NodeJS server which receives data from Max/MSP (with Max-api module) using Socket.io sockets. Messages including a file directory name (which includes images of a specific song's bars, notes, and lyrics), the tempo of the song (2, 4, 6, or 8, which are multiplied by 100 in Node client and dynamically added to tempo variable in a setInterval function to animate the images in a slideshow), and finally a start and stop message to control the slide animation in the browser.

My issue is that when I try to clear the images from the screen and request a new song from Max/MSP (with corresponding images and tempo) the array of filename variables (which are appended to a filepath and used as img src url's) are doubled (or re-added), and keep duplicating each time a new array is sent from Max. The only way to clear the array completely is to stop the connection between Max and Node and restart it, which loses all socket connections, requires a browser refresh, and basically restarts the app.

The following is a Max-api module which serves as the socket.io client and transfers the messages from Max/MSP to Node:

const imageArray = [];
const binaryDir = (path.join(__dirname, 'public', 'src/'));
var filePath; 
var basePath;

//FUNCTION TO SEND ARRAY AND REL FILE PATH TO SERVER.JS
function sendArray() {
    if (imageArray.length != 0) {
        socket.emit("imageArray", imageArray, basePath);
    } 
};

//FUNCTION TO LOAD FILES IN FILE PATH WITH DIR NAME PROVIDED BY MAX IN HANDLER (songName)
function load() {
        fs.readdir(filePath, (err, files) => {
            files.forEach( file => {
                imageArray.push(file);
            })
            console.log("FILES" + files)
            sendArray()
            console.error(err)
        });
};

// MAX HANDLER
maxApi.addHandler('filepath', (songName) => {
    filePath = path.join(binaryDir, songName)
    basePath = path.basename(filePath)
    load()
});

The imageArray and basePath data are received at the server and sent straight to the client:

   socket.on("imageArray", (imagearray, basepath)=>{
         socket.broadcast.emit("images", imagearray, basepath );
         console.log('Server received images..', imagearray.length);
   });

I'm not sure if it's a socket.io issue. I know the issue is somewhere in the above code as when I use console.log('Server received images..', imagearray.length);, the first array sent is "Server received images.. 56", and when i send another array it increases to 112, then 168 and so on.

I know the issue is not with Max as when I log to the Max console with maxApi.post(`Dir from node ${files}`) it only prints the 56 image files in the array each time.

I have tried simply adding imageArray.length = 0; to the sendArray() but to no avail.

You're not resetting the imageArray, so it keep the existing value, there are many ways to do this, but I prefer this following one :

const binaryDir = (path.join(__dirname, 'public', 'src/'));

var filePath; 
var basePath;

//FUNCTION TO SEND ARRAY AND REL FILE PATH TO SERVER.JS
function sendArray(myArray) {
    if (myArray.length != 0) {
        socket.emit("imageArray", myArray, basePath);
    } 
};

//FUNCTION TO LOAD FILES IN FILE PATH WITH DIR NAME PROVIDED BY MAX IN HANDLER (songName)
function load() {
        fs.readdir(filePath, (err, files) => {
            let myArray = [];
            files.forEach( file => {
                myArray.push(file);
            })
            console.log("FILES" + files)
            sendArray(myArray)
            console.error(err)
        });
};

// MAX HANDLER
maxApi.addHandler('filepath', (songName) => {
    filePath = path.join(binaryDir, songName)
    basePath = path.basename(filePath)
    load()
});