生产应用程序中文件传输的 WebRTC 问题

Question

您好，我正在开发一个基于 WebRTC 的文件传输应用程序。我已经使用 Heroku 在线部署了该应用程序。但是在接收端似乎存在文件传输问题，我一直无法弄清楚。在 localhost 上完成文件传输和接收成功，但在生产中完成文件接收时出现问题。如果有帮助的话，使用的浏览器是谷歌浏览器。

这是文件接收代码：

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

下图显示了我在接收文件时遇到的问题：

任何指导将不胜感激。

Answer 1

WEBRTC 基于 UDP，这意味着无法保证您的数据序列“按顺序”传输或成功传输

改用“webSocket”或简单的“http 请求”。

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

更新：见第一条评论