Merging typed arrays of different data type into a single arraybuffer

Question

I'd like to know if there's a way of merging multiple typed arrays of different types into one arraybuffer.

At the moment I'm sending binary data to a server via websockets. But now I'm just using Uint8 Arrays. So I assemble a new Uint8Array([with, the, data, I, need]) and send the buffer of this array (Unint8Array.buffer) to the server.

But now it could happen, that I need some Uint16 or Float32 Data within my request, mixed inside my Uint8 Data. Is there any way to achieve this and how.

EDIT: The length of the request data is unknown as I have to assemble the requests dynamic.

Thanks for any reply :)

See ArrayBufferView for different typed views on the same data starting at any particular offset. — jfriend00
– jfriend00, Commented Aug 8, 2014 at 6:55

T.J. Crowder · Accepted Answer · 2014-08-08 07:07:50Z

1

Yes, you can do that, that's why types arrays have the separation of the array and the buffer it stores things in. Here's an example of two views of a buffer, one with bytes and one with words: Live Copy

// Create the buffer
var buf = new ArrayBuffer(10);

// Create a byte view of it
var a8 = new Int8Array(buf);

// Create a word view of it
var a16 = new Int16Array(buf, 2, 2);

// Set a couple of words
a16[0] = 0x1221;
a16[1] = 0x2442;

// Show the contents of the byte array
var i;
for (i = 0; i < a8.length; ++i) {
  console.log("0x" + a8[i].toString(16));
}

Output:

0x0
0x0
0x21
0x12
0x42
0x24
0x0
0x0
0x0
0x0

There I've created the ArrayBuffer explicitly for clarity, but you can also do it implicitly: Live Copy (same output)

// Create a byte view and underlying buffer
var a8 = new Int8Array(10);

// Create a word view of the byte view's buffer
var a16 = new Int16Array(a8.buffer, 2, 2);

// Set a couple of words
a16[0] = 0x1221;
a16[1] = 0x2442;

// Show the contents of the byte array
var i;
for (i = 0; i < a8.length; ++i) {
  console.log("0x" + a8[i].toString(16));
}

EDIT: The length of the request data is unknown as I have to assemble the requests dynamic.

If you have allocated a large enough ArrayBuffer, that's not necessarily a problem, you just need to create the view at the relevant starting point for (say) the rest of the length of the buffer. But you'll have to keep track of how big what you've written is at least after you've written it, so you know where to continue with other data.

edited Aug 8, 2014 at 7:07

answered Aug 8, 2014 at 7:01

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fidel90 Over a year ago

Hm, that looks interesting. But you expect to know the size of the buffer. Is there a way do create an Arraybuffer of different TypedArrays? So if I have an Uint8 and an Uint16 Array that I can "concat" them to a single buffer?

T.J. Crowder Over a year ago

@Fidel90: You'd just create an ArrayBuffer that was big enough to hold both (var buf = new ArrayBuffer(yourInt8Array.buffer.length + yourInt16Array.buffer.length);) and then copy the typed arrays into it.

Fidel90 Over a year ago

Thank you very much, I guess I understand this far more now. I'm going on trying this out. Have a nice day :)

Collectives™ on Stack Overflow

Merging typed arrays of different data type into a single arraybuffer

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related