はじめに

これは前回の記事からの続きです。

とりあえずやっつけで Cisco Unified IP Phone Services Application (長い) を作ってみましたが、アクセスがあるたびに Node.js で表示用の画像を作ってるのでパフォーマンスが気になります。
ほら、もしかしたら数百人いる環境で使われるかもしれないし。(などと)

テスト先環境

ProLiant TM200 (Intel(R) Xeon(R) CPU D-1518) から仮想2コア
Debian 12.4
Node.js v18.19.0

Apache Bench で計測してみる

リクエスト総数: 10000
同時リクエスト数: 200
Lengthエラー報告: 無効

※ すなわちコマンドとしては ab -n 10000 -c 200 -l テスト先URL
※ Lengthエラー報告を無効にしているのは、アクセスするタイミングでエオルゼア時間が変わるためです。(エオルゼア時間が違う＝画像が違う)

ケース1:対策無し

アクセスがあるたびに愚直に下記のような画像を生成して応答する場合を計測してみましょう。

et1.png

Document Path:          /api/et1.png
Document Length:        Variable

Concurrency Level:      200
Time taken for tests:   42.979 seconds
Complete requests:      10000
Failed requests:        0
Total transferred:      19671292 bytes
HTML transferred:       18221292 bytes
Requests per second:    232.67 [#/sec] (mean)
Time per request:       859.583 [ms] (mean)
Time per request:       4.298 [ms] (mean, across all concurrent requests)
Transfer rate:          446.97 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   1.1      1      11
Processing:    14  854 205.2    883    1614
Waiting:        6  854 205.2    882    1614
Total:         15  855 205.2    884    1614

Percentage of the requests served within a certain time (ms)
  50%    884
  66%    909
  75%    937
  80%    963
  90%   1050
  95%   1081
  98%   1118
  99%   1457
 100%   1614 (longest request)

……うん、ひどいですね。
最大で約1.6秒も遅れるようでは時計として成立しません。(個人の感想です)

ケース2:送る画像をモノクロPNGにしてみる

どうせ画像内で白と黒しか使ってないので下記のようなモノクロ画像にして送信してみるのはどうでしょう？

et2.png

Document Path:          /api/et2.png
Document Length:        Variable

Concurrency Level:      200
Time taken for tests:   19.664 seconds
Complete requests:      10000
Failed requests:        0
Total transferred:      6144377 bytes
HTML transferred:       4694377 bytes
Requests per second:    508.54 [#/sec] (mean)
Time per request:       393.287 [ms] (mean)
Time per request:       1.966 [ms] (mean, across all concurrent requests)
Transfer rate:          305.14 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   0.8      1       8
Processing:    12  390  86.1    401     751
Waiting:        4  390  86.1    401     751
Total:         13  391  86.2    402     754

Percentage of the requests served within a certain time (ms)
  50%    402
  66%    424
  75%    439
  80%    451
  90%    484
  95%    520
  98%    544
  99%    604
 100%    754 (longest request)

最大リクエスト完了時間がケース1の46.7%にまで改善しました。
それでも0.7秒なので、もうちょっとなんとかなってほしいですね。

ケース3: フルカラーPNGを事前生成して、そのデータを返す

エオルゼア時間は現実時間ベースなので、未来のエオルゼア時間を前もって求めることができます。
このことを利用して、エオルゼア時間の画像を先に作ってキャッシュしておいたものを送信する実装を行ってみました。

et3.png

Document Path:          /api/et3.png
Document Length:        Variable

Concurrency Level:      200
Time taken for tests:   5.456 seconds
Complete requests:      10000
Failed requests:        0
Total transferred:      21366343 bytes
HTML transferred:       19916343 bytes
Requests per second:    1832.76 [#/sec] (mean)
Time per request:       109.125 [ms] (mean)
Time per request:       0.546 [ms] (mean, across all concurrent requests)
Transfer rate:          3824.15 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   1.8      1      13
Processing:     5  107  38.4    112     202
Waiting:        2  107  38.4    112     201
Total:         10  109  38.5    114     202

Percentage of the requests served within a certain time (ms)
  50%    114
  66%    128
  75%    138
  80%    144
  90%    157
  95%    165
  98%    173
  99%    179
 100%    202 (longest request)

あれ、なんかめっちゃいい。

ケース4: モノクロPNGを事前生成して、そのデータを返す

ケース2と3の合わせ技も試してみましょう。

et4.png

Document Path:          /api/et4.png
Document Length:        Variable

Concurrency Level:      200
Time taken for tests:   5.390 seconds
Complete requests:      10000
Failed requests:        0
Total transferred:      6099120 bytes
HTML transferred:       4649120 bytes
Requests per second:    1855.29 [#/sec] (mean)
Time per request:       107.800 [ms] (mean)
Time per request:       0.539 [ms] (mean, across all concurrent requests)
Transfer rate:          1105.04 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   1.0      1       8
Processing:    10  106  36.1    108     202
Waiting:        2  106  36.1    108     201
Total:         11  107  36.2    109     202

Percentage of the requests served within a certain time (ms)
  50%    109
  66%    123
  75%    134
  80%    140
  90%    152
  95%    164
  98%    179
  99%    190
 100%    202 (longest request)

あれっ、ケース3とほとんど差がないの？？？

おわりに

Cisco Unified IP Phone Services Application、皆さんもぜひ作ってみてください。
~~まず実機を手に入れるところから~~

おまけ: 今回の検証に使用したコード

web.app

// ============================================================ #
//  Copyright (c) 2024 CIB-MC
//  Released under the MIT license
//  https://opensource.org/licenses/mit-license.php
// ============================================================ #

const express = require('express');
const app = express();
const createCanvas = require('canvas')

app.get('/api/et1.png', (req, res) => {
    let dt = new Date();
    let buffer = createEtPng(dt, true);
    res.set('content-type', 'image/png');
    res.end(buffer);
});

app.get('/api/et2.png', (req, res) => {
    let dt = new Date();
    let buffer = createEtPng(dt, false);
    res.set('content-type', 'image/png');
    res.end(buffer);
});

let cache_et3 = {};
let cache_et4 = {};

app.get('/api/et3.png', (req, res) => {
    let dt = new Date();
    let buffer = cache_et3['_' + Math.floor(dt.getTime() / 1000)];
    if (!buffer) {
            console.log('Cache mishit!')
            res.status(404).end();
            return;
    }
    res.set('content-type', 'image/png');
    res.end(buffer);
});

app.get('/api/et4.png', (req, res) => {
    let dt = new Date();
    let buffer = cache_et4['_' + Math.floor(dt.getTime() / 1000)];
    if (!buffer) {
            console.log('Cache mishit!')
            res.status(404).end();
            return;
    }
    res.set('content-type', 'image/png');
    res.end(buffer);
});

const CACHE_TTL = 20;
const cacheCreateStartup = () => {
    let dt = new Date();
    for (let i = 0; i < CACHE_TTL; i++) {
        dt.setSeconds(dt.getSeconds() + 1, 0);
        const cache_key = '_' + Math.floor(dt.getTime() / 1000);
        cache_et3[cache_key] = createEtPng(dt, true);
        cache_et4[cache_key] = createEtPng(dt, false);
        console.log(cache_key + " precreated.");
    }
    console.log("--> Cache precreate done!");
}

const cacheCreate = () => {
    let dt = new Date();
    dt.setSeconds(dt.getSeconds() + 10, 0);
    const cache_key = '_' + Math.floor(dt.getTime() / 1000);
    if (!(cache_key in cache_et3)) {
        cache_et3[cache_key] = createEtPng(dt, true);
        console.log('Cache ' + cache_key + ' created for et3.');
    }
    if (!(cache_key in cache_et4)) {
        cache_et4[cache_key] = createEtPng(dt, false);
        console.log('Cache ' + cache_key + ' created for et4.');
    }
}

const cachePurge = () => {
    let count_et3 = 0;
    let count_et4 = 0;
    let dt = new Date();
    let dt_ttl_over = dt.setSeconds(dt.getSeconds() - CACHE_TTL, 0);
    for(let key in cache_et3) {
        let key_ts = parseInt(key.replace('_', '')) * 1000;
        let key_dt = new Date(key_ts);
        if (key_dt < dt_ttl_over) {
            delete cache_et3[key];
            count_et3++;
        }
    }
    for(let key in cache_et4) {
        let key_ts = parseInt(key.replace('_', '')) * 1000;
        let key_dt = new Date(key_ts);
        if (key_dt < dt_ttl_over) {
            delete cache_et4[key];
            count_et4++;
        }
    }
    console.log('Purged ' + count_et3 + '&' + count_et4 + ' cache(s).')
}


class EorzeaDatetime {
        weekepoch = 0;
        constructor(datetime) {
                var dt = datetime ? datetime : new Date();
                var dt_jst = new Date(dt.toLocaleString({ timeZone: 'Asia/Tokyo' }))
                var dt_ws = new Date(dt_jst.getFullYear(), dt_jst.getMonth(), dt_jst.getDate() - dt_jst.getDay(), 0, 0, 0, 0);
                this.weekepoch = (dt_jst.getTime() * (1440 / 70)) - (dt_ws.getTime() * (1440 / 70));
        }
        getHours() {
                return Math.floor(this.weekepoch / 3600000) % 24;
        }
        getMinutes() {
                return Math.floor(this.weekepoch / 60000) % 60;
        }
        getSeconds() {
                return Math.floor(this.weekepoch / 1000) % 60;
        }
}

function appendZero(str, digits) {
    str = '' + str;
    while (str.length < digits) {
        str = "0" + str;
    }
    return str;
}

const createEtPng = (dt_arg, is_color) => {
    let dt = structuredClone(dt_arg);
    const canvas = createCanvas(320, 156);
    const ctx = canvas.getContext('2d', {pixelFormat: is_color ? 'RGB24' : 'A1'});
    ctx.fillStyle = is_color ? "#000" : 'rgba(0,0,0,0)';
    ctx.fillRect(0,0,320,156);

    dt.setMilliseconds(dt.getMilliseconds() + 500);
    let edt = new EorzeaDatetime(dt);
    
    ctx.fillStyle = is_color ? "#fff" : 'rgba(0,0,0,1)';
    ctx.textAlign = 'center';
    ctx.font = "normal 30px monospace";
    ctx.fillText('Eorzea Time', 160, 40);
    ctx.font = "bold 60px monospace";
    ctx.fillText(appendZero(edt.getHours(), 2) + ':' + appendZero(edt.getMinutes(),2), 160, 120);

    return canvas.toBuffer("image/png");
}

app.listen(3000, () => {
  cacheCreateStartup();
  setInterval(cachePurge, 1000 * 30);
  setInterval(cacheCreate, 250);
  console.log('Server listening on port 3000');
});