javascriptでバイナリを扱う

15年ほど前の作られたシステムからデータを取得してブラウザ上で表示しようとしたらデータがバイナリでした・・・。
サーバー上で毎回テキストにするのも負荷が・・・、ちょくちょく更新されるしのでキャッシュサーバーを導入するとキャッシュの削除とか面倒です・・・・。

結局javascriptでやればいいじゃないか！ってことに。

Ajaxで取得

データはAjaxで取得するしかなさそうです。そして、jQueryだとdataTypeにバイナリがないので自力で取得します。試さなかったけどarraybufferを指定すれば使えたりするかも？
また、クロスドメインにはCORSで対応しました。

let createCORSRequest =  (method, url) => {
    let xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest !== "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
};

let binArray = [];
let xhr = createCORSRequest('GET', 'https:/www.xxxxx.xyz/hoge/piyo/');
xhr.responseType = 'arraybuffer';
xhr.onload = (e) => {
    binArray = new Uint8Array(this.response);
};

これでbinArrayの中は8 ビット符号なし整数値の配列になります。
後はこれを好きなように料理すればいいだけです。

処理例

let p = 0;
let binArray=[];
let readShort = () => {
    let d1 = binArray[p];
    let d2 = binArray[++p];
    ++p;
    let ret = d1 | (d2 << 8);
    if (0x8000 & ret) {
        ret = -((ret ^ 0xffff) + 1);
    }
    return ret;
};

let readLong = () => {
    let d1 = binArray[p];
    let d2 = binArray[++p];
    let d3 = binArray[++p];
    let d4 = binArray[++p];
    ++p;
    let ret = d1 | (d2 << 8) | (d3 << 16) | (d4 << 24);
    if (0x80000000 & ret) {
        ret = -((ret ^ 0xffffffff) + 1);
    }
    return ret;
};

let xhr = createCORSRequest('GET', 'https:/www.xxxxx.xyz/hoge/piyo/');
xhr.responseType = 'arraybuffer';
xhr.onload = (e) => {
    binArray = new Uint8Array(this.response);
    let hoge = readSort();
    let piyo = readLong();
};