0

Over my websocket I expect a Binary message from the server to the client (the other way works). I want to cast that to an Array[Byte] to further process it it as 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)
  }

now dom.window.console.log(msg) gives me

[object Blob]

Blob { size: 9, type: "" }

I would expect the x be of type ArrayBuffer because of the explicit cast, but alas, it's not, as I get

TypeError: DataView: expected ArrayBuffer, got Blob

How can I overcome this?

I tried with:

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

but this prints null for y and also

TypeError: y is not an object

4
  • 1
    Hmm. I haven't worked with Blob, so I'm not sure of the answer, but I think your experiment at the end should be on the right track. asInstanceOf can't work -- that only says to the compiler, "I know what type this value already is, so ignore what you know and believe me". It doesn't do conversions. From what I see elsewhere on SO, I would have expected the FileReader approach to work. You may want to put JavaScript / DOM tags on this question -- it probably isn't a Scala.js question per se... Jan 29, 2017 at 16:13
  • FileReader .result is returned asynchronously. Have you tried using load event handler of FileReader to check .result? Have you set .binaryType of WebSocket to ArrayBuffer? Feb 1, 2017 at 4:16
  • Note that in Scala.js asInstanceOf[T] where T is a subtype of js.Any does not do anything (not even any checking).
    – gzm0
    Feb 1, 2017 at 8:51
  • 1
    I don't know anything about scala.js, but in general you want to set the binaryType property to "arraybuffer" to receive a ArrayBuffer instead of a Blob. Feb 1, 2017 at 9:04

2 Answers 2

1
+50

You were almost there: FileReader is asynchronous so you'll have to:

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

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

This is essentially a translated example from this response.

You'll probably want to wrap this in a future 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
}
4
  • Which imports do you use for your method? Promise of Scala.js does not work for me, neither does the one from Scala
    – user4063815
    Feb 1, 2017 at 20:41
  • Ah, I need to expect the fr.result.asInstanceOf[Blob]
    – user4063815
    Feb 1, 2017 at 20:57
  • Actually, shouldn't the Promise[Blob] be a Promise[ArrayBuffer] ;o) ?
    – user4063815
    Feb 1, 2017 at 21:05
  • Yes, absolutely. Also added the import.
    – gzm0
    Feb 2, 2017 at 9:06
1

As some people already pointed out, setting ws.binaryType = "arraybuffer" is enough too.

Doing it like this:

 ws.onmessage =
      {
        ws.binaryType = "arraybuffer"

        (event: MessageEvent) => 

            val msg = event.data.asInstanceOf[ArrayBuffer]
            dom.window.console.log(msg)

results in

ArrayBuffer { byteLength: 9 }

4
  • You probably want to move the assignment to ws.binaryType above ws.onmessage = .
    – gzm0
    Feb 2, 2017 at 17:03
  • @gzm0, nope, did not intend to. It's only important it's before the event. I can send as blob or string and expect as arraybuffer that way.
    – user4063815
    Feb 2, 2017 at 18:13
  • Moving ws.binaryType = upwards does the exact same thing in terms of execution order (have a look at the generated JavaScript code if you don't believe it). However, it is much less confusing if the order in the code is the same as the execution order.
    – gzm0
    Feb 3, 2017 at 9:15
  • But I only want this to be interpreted as arraybuffer in case of ws.onmessage hence I put it in this block, because that's what blocks are for (maybe I get you wrong though)
    – user4063815
    Feb 3, 2017 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.