Question

我正在研究通过浏览器通过Websocket以1MB块流式传输大文件的功能。下面的代码在Firefox（版本63）中可以正常工作，但是在Chrome（版本68）中却难以抓取，并且似乎冻结了浏览器。如果我将ws.send(data)注释掉，它将文件加载得非常流畅。有什么想法吗？

编辑：请参阅我的相关问题here，我相信可以缩小问题的范围。

一个简单的websocket服务器来接收数据：

const WebSocket = require('ws')

const wsServer = new WebSocket.Server({ port: 9001 })

浏览器代码：

<!doctype html>
<html>
  <head>
  </head>

  <body>
    <input id='file_button' type='file'></input>
    <script>
      const ws = new WebSocket('ws://localhost:9001')

      ws.onopen = () => {
        const uploadButton = document.getElementById('file_button')
        uploadButton.addEventListener('change', (e) => {
          const file = e.target.files[0]

          const chunkSize = 1024*1024

          let offset = 0

          readChunk()

          function readChunk() {

            const reader = new FileReader()

            const slice = file.slice(offset, offset + chunkSize)

            reader.onload = (event) => {

              const data = event.target.result
              console.log("chunk")
              ws.send(data)

              offset += chunkSize

              if (offset < file.size) {
                readChunk()
              }
            }

            reader.readAsArrayBuffer(slice)
          }
        })
      }
    </script>
  </body>
</html>

为什么此文件流片段在Firefox中有效，但在Chrome中不起作用？

0 个答案: