HTMLないしJavaScriptのみで、通信遅延や応答速度など、インターネットとの通信状況を計測する方法はありますか？

❓ Prompt

💬 Answer

JavaScriptを使用して、インターネットとの通信速度を計測することができます。以下は、単純な方法の一例です。

  1. XMLHttpRequestオブジェクトを使用して、サーバーから小さなデータファイルをダウンロードします。たとえば、サイズが1キロバイト未満の画像、テキスト、またはJSONファイルを使用できます。
  2. ファイルをダウンロードする前に、JavaScriptのDateオブジェクトを使用して現在時刻を取得します。
  3. ファイルのダウンロードが完了したら、再度Dateオブジェクトを使用して現在時刻を取得します。
  4. 2つの時刻を比較し、ファイルをダウンロードするのにかかった時間を計算します。これは、インターネット接続速度を推定するための非常に基本的な方法です。

以下は、JavaScriptを使用した簡単なコード例です。

var startTime, endTime;

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        endTime = new Date();
        var duration = (endTime - startTime) / 1000;
        var speed = (xhr.response.length / duration / 1024 / 1024).toFixed(2);
        console.log('Download speed: ' + speed + ' Mbps');
    }
};
xhr.open('GET', '<https://example.com/smallfile.jpg>', true);
startTime = new Date();
xhr.send();

このコードでは、XMLHttpRequestを使用して、example.comから小さな画像ファイルをダウンロードします。ダウンロードが完了すると、通信速度を計算してコンソールに出力します。この例では、通信速度をメガビット/秒単位で表示しています。

この方法は単純なものであり、実際のインターネット接続速度とは異なる場合がありますが、応答速度などの基本的な情報を収集するために使用できます。

上記のコードをfetch APIを使ったものに書き直してください

❓ Prompt

💬 Answer

以下は、Fetch APIを使用して通信速度を計測するための簡単なコード例です。

var startTime, endTime;

fetch('<https://example.com/smallfile.jpg>')
  .then(response => {
    endTime = new Date();
    var duration = (endTime - startTime) / 1000;
    var speed = (response.headers.get('Content-Length') / duration / 1024 / 1024).toFixed(2);
    console.log('Download speed: ' + speed + ' Mbps');
  })
  .catch(error => {
    console.error(error);
  });

startTime = new Date();

このコードでは、fetch()メソッドを使用して、example.comから小さな画像ファイルをダウンロードします。ダウンロードが完了すると、通信速度を計算してコンソールに出力します。この例では、通信速度をメガビット/秒単位で表示しています。

注意点として、fetch APIでは、レスポンスオブジェクトからファイルサイズを取得するために、Content-Lengthヘッダーを使用する必要があります。また、エラー処理を適切に行うことも重要です。