javascript - 显式地将 Any/Blob 转换为 ArrayBuffer 仍然会给我一个无法处理的 Blob

Question

通过我的 websocket，我期望从服务器到客户端的二进制消息(另一种方式有效)。我想将其转换为 Array[Byte] 以将其作为 protobuf-message 进一步处理

ws.onmessage = {
  (event: MessageEvent) =>
    val msg = event.data.toString
    dom.window.console.log(msg) 

    val x = event.data.asInstanceOf[ArrayBuffer]
    val df = new DataView(x)
    dom.window.console.log("result")
    dom.window.console.log(bin2User(df).toString)
}

private def bin2User(data: DataView): User = {
    val bytes = new Array[Byte](data.byteLength)

    for(index <- 0 to data.byteLength) {
      bytes(index) = data.getInt8(index)
    }

    User.parseFrom(bytes)
  }

现在 dom.window.console.log(msg) 给了我

[object Blob]

Blob { size: 9, type: "" }

由于显式强制转换，我希望 x 为 ArrayBuffer 类型，但可惜，事实并非如此，正如我所得到的

TypeError: DataView: expected ArrayBuffer, got Blob

我该如何克服这个问题？

我尝试过:

val fr = new FileReader
fr.readAsArrayBuffer(event.data.asInstanceOf[Blob])
val y = fr.result.asInstanceOf[ArrayBuffer]
dom.window.console.log(y)

但这会为 y 打印 null 以及

TypeError: y is not an object

Answer 1

你就快到了:FileReader 是异步的，所以你必须:

val fr = new FileReader
fr.onload = { _ =>
  val y = fr.result
  dom.window.console.log(y)
}

fr.readAsArrayBuffer(event.data.asInstanceOf[Blob])

这本质上是来自 this response 的翻译示例.

您可能希望将其包装在未来的 API 中:

import scala.concurrent.Promise

def blob2ArrayBuffer(blob: Blob): Future[ArrayBuffer] = {
  val result = Promise[ArrayBuffer]()
  val fr = new FileReader
  fr.onload = { _ => result.success(fr.result) }
  fr.readAsArrayBuffer(blob)
  result.future
}