Sending an ArrayBuffer in PHP through JavaScript XHR2 object

Question

Here it is, I'm writing the new version of an AJAX library based on promises with XHR2 support ( https://github.com/pyrsmk/qwest ). I'm currently writing the unit tests and 95% of the library is now robust. Anyway, I need to verify that we can successfully retrieve an ArrayBuffer (XHR2 supports 'arraybuffer' response type) but how can I generate this ArrayBuffer with PHP? What protocol do I use? Base64?

I really have no idea how I should handle the whole thing...

EDIT : it seems that when I send an ArrayBuffer to PHP, the data is handled directly by the $_POST variable

Answer 1

Intro

Well, you don't send an "ArrayBuffer". What you send is data and specify a format to make sense of that data. The client, then, can choose the best way to interpret it.

So, an ArrayBuffer is just a generic fixed-length container for data (binary data) that enables you to create "views" of the underlying data using JavaScript typed arrays. The cool thing is that multiple views can be created from a single ArrayBuffer source.

---

That being said, in your specific case, you can send binary data in PHP the same way you send any data in PHP.

Example:

server.php

$filename = 'img.png';
$fsize = filesize($filename);

$handle = fopen($filename, "rb");
$contents = fread($handle, $fsize);
fclose($handle);

header('content-type: image/png');
header('Content-Length: ' . $fsize);

echo $contents;

or shorter

$filename = 'img.png';

header('content-type: image/png');
header('Content-Length: ' . filesize($filename));

readfile($filename);

---

client.js

var xhr = new XMLHttpRequest();

xhr.open('GET', 'server.php', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    var uInt8Array = new Uint8Array(this.response);
    console.log(uInt8Array);
};

xhr.send();

Answer 2

Handling binary data in php is a little bit tricky. To response an ArrayBuffer you must cast it to a binary string and result it with an echo statement.

To generate a binary string from an 8 bit array, it is necessary to use the pack statement. If the server does not support PHP version 5.6+, each array item can be converted and concat with the dot operator:

server.php

<?php
    header('content-type: application/octet-stream');

    $arrayBuffer = array(0, 1, 2, 253, 254, 255);

    $binary = "";
    for($index = 0; $index < count($arrayBuffer); $index++)
    {
        $binary = $binary.pack("C*", $arrayBuffer[$index]);
    }

    echo $binary;
?>

The MIME type of raw data is application/octet-stream . At client side of the JavaScript code looks like:

client.js

let xmlRequest = new XMLHttpRequest();
xmlRequest.open('POST', 'server.php');
xmlRequest.responseType = 'arraybuffer';
xmlRequest.onload = event =>
{
    let arrayBuffer = new Uint8Array(event.target.response);
    console.log('arrayBuffer: ', arrayBuffer); // [0, 1, 2, 253, 254, 255];
};
xmlRequest.send();