Search code examples
javascriptphpajaxxmlhttprequestarraybuffer

Sending an ArrayBuffer in PHP through JavaScript XHR2 object


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


Solution

  • 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();