myPeer.on('data') firing twice, how to check if a connection already exists or not

[newmediacrew]

Having a little problem here with sending a file with peerJS. It works great. But one thing is bugged, which is obviously my code. After sending a file for the second time, the connection receiving the data is fired twice, or even more depending on how many times you receiving data.

Is there a way to check if a connection already exists, or can you destroy a connection after the file has been send.

sending a file (send.js)

myPeer.on('open', peerJsId => {
    const conn = myPeer.connect(peerjsId);
   **//TODO: check if the peerJsId already has an existing connection ?**
    conn.on('open', () => {
        conn.send({
            file: new Blob(fileObject, {type: fileObject[0].type}),
            filename: fileObject[0].name,
            filetype: fileObject[0].type,
        });
    });
}

receiving data (receive.js)

myPeer.on('open', peerJsId => {
    // receive file
    myPeer.on('connection', (conn) => {
        conn.on('data', (data) => {
            let blob = new Blob([data.file], {type: 'application/octet-stream'});
            saveAs(blob, data.filename);
            **//TODO: close the connection so it won't fire twice when instantiating this action multiple times ?**
        });
    });
});

[jonasgloning]

Hey @newmediacrew, I believe the simplest solution to your issue would be to use the .once method. By replacing .on with .once, the callback will only be triggered the first time the event fires.

To check if a connection already exists, you can use the following code:

if (peer.connections['remote-peer-id']) {
  console.log('Connection already exists');
} else {
  console.log('No existing connection');
}

If you want to close the connection after sending, you can do so on the receiving peer with this code:

conn.on('data', (data) => {
  let blob = new Blob([data.file], {type: 'application/octet-stream'});
  saveAs(blob, data.filename);
  
  conn.close();
});

[newmediacrew]

Thank you for the quick reply. Tried it without sucess. Perhaps i am missing something.

Sender (socketSendEvent.js)
======
myPeer.on('open', peerJsId => {
... rest of application code

// handle send the file now
document.addEventListener('click', event => {
    if (event.target.classList.contains('sendTheFileNow')) {
        let theFiles = document.querySelector('.ctbModal input.sendFileInput').files;
        if (theFiles.length > 0) {
            // let the receiver know a file is on its way
            socketCtbMethod.sendFileChannelMessage(event.target.dataset.resourceId)
                .then(() => {
                    // send the file
                    socketCtbMethod.sendFile(event.target.dataset.peerjsId, theFiles); 
                    // close modal
                    socketCtbMethod.closeModal('ctbModal');
                })
        }
    }
});

... rest of application code

})

ctbMethod.js
==========
// send the file
sendFile(peerJsId, fileObject) {
    // add the connection to the local peers so we can use it later
    peers[peerJsId] = myPeer.connect(peerJsId);
    // send the file
    peers[peerJsId].on('open', () => {
        peers[peerJsId].send({
            file: new Blob(fileObject, {type: fileObject[0].type}),
            filename: fileObject[0].name,
            filetype: fileObject[0].type,
        });
    });
};

Receiver (socketReceiveEvents.js)
========
myPeer.on('open', peerJsId => {
... rest of application code

// handle sendFile
if (payload.event === 'sendFile') {
    // let the receiver know a file is being send
    channelMessages.appendChild(socketCtbMethod.createSystemMessage(payload.data.message));
    // play fileTransfer sound
    socketCtbMethod.playEventSound(ctbMethod.fileTransferSound, 'fileTransfer');
    // receive file
    myPeer.on('connection', (conn) => {
        conn.on('data', (data) => {
            console.log('here we save the file, which is firing multiple times when repeating this action on the sender side');           
            // socketCtbMethod.saveFile(data);
            conn.close();
            // let the receiver know we received the file and are done.
            socketCtbMethod.sendFileFinishedChannelMessage(peerJsId, payload.data.resourceId)
                .then((data) => {
                })
        });
    });
}

// handle sendFile finished
if (payload.event === 'sendFileFinished') {
    // let the sender know the file transfer is finished
    channelMessages.appendChild(socketCtbMethod.createSystemMessage(payload.data.message));
    // received the file
    // peers[payload.data.peerJsId].close(); //// this is not firing, and is also not closing the peer connection between 2 peers.. What is not working here ?
}

... rest of application code

})

The debug

Sending item for the first time ( receiver side )

Sending item for the second time ( receiver side )

Sending items for a 3th time (receiver side)

[newmediacrew]

The problem has been solved. I turns out

 // receive file
    myPeer.on('connection', (conn) => {
        conn.on('data', (data) => {
            console.log('here we save the file, which is firing multiple times when repeating this action on the sender side');           
            // socketCtbMethod.saveFile(data);
            conn.close();
            // let the receiver know we received the file and are done.
            socketCtbMethod.sendFileFinishedChannelMessage(peerJsId, payload.data.resourceId)
                .then((data) => {
                })
        });
    });

was inside an event listerner block triggering multiple times. Moving it outside solved the problem.