>_ DevTrendsja

言語

ホーム

言語

セクション

フロントエンド バックエンド モバイル DevOps AI / ML ゲーム開発 ブロックチェーン 組み込み セキュリティ
JavaScript

外部サービス不要のpure JavaScriptでオリジナル速度測定サーバーを構築する方法

契約プランは1Gbpsのインターネットで、ファイルのダウンロードは速いのに、仕事のビデオ通話やホームサーバーへのアクセスが非常に遅い経験をしたことはありますか?一般的な速度測定サイトを開いて大きな丸いボタンを押したくなるでしょう。しかし、公の速度測定はプロバイダーのサーバーへの速度を表示するだけであり、ローカルネットワーク内やオフィス環境、個人クラウドでの実際のスループットはわかりません。

Download OpenSpeedTest-Server V2.1

OpenSpeedTestプロジェクトのSpeed-Testリポジトリを見つけました。著者は2011年から10年以上にわたり開発を続けており、純粋なHTML5、CSS、Vanilla JavaScriptで書かれたオープンソースのネットワーク帯域幅測定ツールです。React、Vue、重いバンドル、外部依存関係は一切ありません。

Download from the Microsoft Store Download from the Mac App Store Download from the App Store Download from the Google Play Store Download from the Snap Store Download from the Docker Hub Download from the Helm Store Download from GitHub

内部構造

ソースコードの最大の魅力はそのシンプルさです。クライアント側のロジックはすべてgzip圧縮されて8KB未満のスクリプトに収められています。インターフェースはベクターSVGで完全に描画されているため、古いのモニターでも4Kスマートフォンでも同様に美しく表示されます。

このツールが動作するために、クライアント側はXMLHttpRequest(XHR2)をサポートしているブラウザ就够了。Internet Explorer 10のような古いブラウザでも動作します。サーバー側は、Nginx、Apache、Caddy、Expressなど任意のWebサーバーで静的ファイルを提供できれば十分です。

隠されたバックエンドスクリプトや複雑なバイナリはなく、攻撃対象領域は最小限です。本質的には、静的ファイルのセットをブラウザに 제공하고、その後クライアントが指定サイズの並列POSTリクエストとGETリクエストのシリーズを送信し始めます。

Video Tutorial by Roberto Jorge Tech Video Tutorial by LanPad

URLパラメータによるテスト管理

複雑な設定メニューを構築する代わりに、著者はアドレスバーのGETパラメータで制御する方法を実装しました。これは、同僚に事前設定された動作のリンクを渡したい場合に便利です。

便利なパラメータをいくつか紹介します:

  • ページを開くと同時にテストを自動開始:
http://192.168.1.5?Run
  • ネットワークに負荷をかけるテスト。プリセットを設定するか、テスト時間を秒単位で指定できます。例えば、双方向で300秒間のトラフィックを生成:
http://192.168.1.5?Stress=300

または短い構文:

http://192.168.1.5?S=L
  • 並列HTTPストリームの数を制限(デフォルトは6、最大は32):
http://192.168.1.5?XHR=4
  • 特定のフェーズのみを実行,例如仅上传或延迟检查:
http://192.168.1.5?Test=Upload

オフィスのマシンの fleet から統計を収集したい場合は、index.htmlファイルでsaveData変数のコメントを解除し、データベースのWebhookアドレスを指定できます:

var saveData = true;
var saveDataURL = "//metrics.internal.lan/save?data=";

自分で実行する方法

独自の速度測定サーバーをデプロイする最も 빠른方法は、 готовый Dockerイメージを使用することです。軽量なAlpineをベースとし、非rootのNginxユーザーを使用してビルドされています:

docker run -d \
  --name openspeedtest \
  --restart=unless-stopped \
  -p 3000:3000 \
  -p 3001:3001 \
  openspeedtest/latest

composeでの作業が好きな場合は、設定はコンパクトです:

version: '3.3'
services:
  speedtest:
    container_name: openspeedtest
    image: openspeedtest/latest
    restart: unless-stopped
    ports:
      - '3000:3000'
      - '3001:3001'

起動後、インターフェースはhttp://IP_СЕРВЕРА:3000でアクセス可能になります。

Download OpenSpeedTest-Server V2.1

リバースプロキシの背後にサービスをインストールする場合は、リクエストボディサイズの制限であるclient_max_body_sizeを少なくとも35MBに引き上げる必要があります。そうしないと、アップロードテストが413エラーで失敗し始めます。

ちなみに、1Gbps以上の速度をテストする予定がある場合は、著者はLinuxホストの使用を推奨しています。macOSまたはWindows用のDocker Desktopでは、仮想化とネットワークブリッジのオーバーヘッドにより、速度が頭打ちになることが多いです。

ローカル速度測定を維持する理由

通常のWebサービスが役に立たないシナリオがいくつかあります:

  1. Wi-Fiとリピーターの診断。家庭やオフィスに信号リピーターを設置すると、平均して速度が半分になります。異なる部屋からローカルでリンクをテストすると、外部インターネット接続の変動に影響されずに、アクセスポイントに最適な場所を正確に選択できます。
  2. ブラウザ拡張機能の影響を確認。iperfなどのツールでは正確な1Gbpsを示すのに、Webページが遅く開くことがあります。通常のプロファイルでOpenSpeedTestを実行し、プライベートウィンドウでも実行してみてください。結果の違いにより、インストールしたプラグインが何ミリ秒を消費しているかがわかります。
  3. リモートオフィスへのチャネルの評価。リモートワーカーがファイルストレージへのアクセスが遅いと苦情を言う場合、サーバー上のローカルコンテナが実際のトンネル速度を示します。

試してみる価値はあるか

Speed-Testは広告、サードパーティのテレメ트리、肥大化した依存関係なしで1つの特定の問題を解決します。ローカルネットワークの構成を定期的に必要とする場合や、故障したパッチケーブルを見つけたり、ホームNASのパフォーマンスをチェックする必要がある場合は、このイメージをスタンバイしておいてください。1分でデプロイでき、リソース的消费は最小限で、大きな価値をもたらします。

関連プロジェクト