20

I'm just wondering why everyone uses ArrayBuffer instead of just a normal array, string or stringified JSON for sending messages from the server to the client. Is it more efficient?

Also, just wondering what Uint8Array is, how it is different, where to use the two etc.

I am currently using Node.js with Socket.io, but I am happy to change to pure WebSockets if it is a better approach.

2

1 Answer 1

40

An ArrayBuffer is more than just a simple array. It contains raw binary data. This is very useful for direct memory manipulation and conserving space.

When you create a normal array, you won't get a proper set of contiguous memory in many cases since arrays can contain any combination of different kinds of objects. This is useful when you have dynamic data and multiple types together (frequently happens in JS) but is not so useful when you know the exact layout of memory that you need.

This also allows you to view the data at the byte level. For example, it's pretty common in binary data formats to have a n byte long identifier number, an m byte long field telling you how many bytes are used for this field, and m' bytes of data that actually makes up the data field.

[ identifier ][ bytes of data ][ data ]

With an ArrayBuffer, you have the option of moving through that data on the byte level by using various Views. A regular array doesn't allow you to move through the data with that level of granularity because no guarantees are made about the memory layout.

Finally, because you are telling the compiler/interpreter exactly how much space you're going to use and exactly how you're going to view it, it can do much more advanced optimizations when working with that data. When iterating through that data, it doesn't have to make calculated leaps through memory. Instead, it knows exactly how far to move ahead in memory to find the next data point.

As for what Uint8Array is, it's a typed array. Essentially, it tells the compiler/interpreter that you will be accessing this data exclusively as 8-bit uints which, again, allows it to make better optimizations. Then you can use standard array indexing on it (arr[0], arr[1], etc.) and you'll be getting back the equivalent uint values out of the array.

TL;DR They take less space when the exact data format is known, allows you to move more exactly through your data and gives the compiler/interpreter greater options for optimization.

5
  • Great answer! For example, in an MMO, how would I send updates to the players using a Buffer/ArrayBuffer?
    – Luke
    Commented Apr 18, 2016 at 22:36
  • @Mirabilis It all depends on how you're sending it. Here's the socket.io docs on how to send binary data. Here's one question showing how to handle it via WebSockets.
    – Mike Cluck
    Commented Apr 18, 2016 at 22:43
  • Okay, so say I have an array of players that I want to send to my clients from my server: [{id:1,x:5,y:10},{id:2,x:15,y:20},{id:3,x:25,y:30}]. But the client wouldn't know the length of the array, so could I have something like this: [length(3),id,x,y,id,x,y,id,x,y] so `[3,1,5,10,2,15,20,3,25,30]? Help! ;)
    – Luke
    Commented Apr 19, 2016 at 6:11
  • They take less space when the exact data format is known -> "They" is referring to arrays, right?
    – akki
    Commented May 28, 2020 at 4:05
  • @akki "They" refers to ArrayBuffer and any TypedArray
    – Mike Cluck
    Commented May 29, 2020 at 14:10

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.