WebRTC issue with File transfer in production application

Question

Hello I am developing a WebRTC based file transfer application.I have deployed the application online using Heroku. But there seems to be a problem with file transfer specifically at the the receiving end which I have been unable to figure out. The file is transferred and received successfully when done on localhost but there is a problem with file reception when done in production. The browser used is Google Chrome if that's any help.

Here is the File reception code:

function dataChannelStateChanged() {
    if (dataChannel.readyState === 'open') {
        console.log("Data Channel open");
        dataChannel.onmessage = receiveDataChannelMessage;
    }
}

function receiveDataChannel(event) {
    console.log("Receiving a data channel");
    dataChannel = event.channel;
    dataChannel.onmessage = receiveDataChannelMessage;
}

function receiveDataChannelMessage(event) {
    console.log("From DataChannel: " + event.data);
    if (fileTransferring) {
        //Now here is the file handling code:
        fileBuffer.push(event.data);
        fileSize += event.data.byteLength;
        fileProgress.value = fileSize;

        //Provide link to downloadable file when complete
        if (fileSize === receivedFileSize) {
            var received = new window.Blob(fileBuffer);
            fileBuffer = [];

            downloadLink.href = URL.createObjectURL(received);
            downloadLink.download = receivedFileName;
            downloadLink.appendChild(document.createTextNode(receivedFileName + "(" + fileSize + ") bytes"));
            fileTransferring = false;

            //Also put the file in the text chat area
            var linkTag = document.createElement('a');
            linkTag.href = URL.createObjectURL(received);
            linkTag.download = receivedFileName;
            linkTag.appendChild(document.createTextNode(receivedFileName));
            var div = document.createElement('div');
            div.className = 'message-out';
            div.appendChild(linkTag);
            messageHolder.appendChild(div);
        }
    }
    else {
        appendChatMessage(event.data, 'message-out');
    }
}

The following image shows the problem i'm encountering when receiving the file:

Any guidance would be much appreciated.

Answer 1

WEBRTC is based on UDP, it means there is no guarantee that your sequence of data transfers "in order" or successfully

use "webSocket" or a simple "http request" instead.

=============

UPDATE: see the first comment