11

直接の許可を得ることなく、ユーザーのアップロード速度の概算を取得したいと考えています。これは、本当に遅い接続と非常に速い接続を区別するためだけのものであるため、精度はそれほど重要ではありません...

4

3 に答える 3

12

これは、 @Yiğit Yener のアイデアをXMLHttpRequest拡張したものです。

アップロード速度は、ユーザーの接続速度とサーバーの接続速度の 2 つに依存します。ここでは、ユーザーとサーバー間の速度をテストすることを想定しています。では、同一生成元ポリシーXMLHttpRequestにより、これが実際に唯一のオプションです。

アップロード速度があれば、何も返す必要はありません。POSTサーバー上の任意のページに大量のデータが必要なだけです。ヒットする最も簡単なページは、既に表示されているページです。これを行うには、URL のドメイン部分を完全に.open(). POST一部のサーバーではデータが 2 メガバイトに制限されているため、安全のために 1 つを使用しました。まともな読書を得るには1つで十分です。

URL がキャッシュされないようにするために、最後に乱数を追加します。

url = '?cache=' + Math.floor( Math.random() * 10000 )

データが gzip 圧縮されないようにするために、POSTランダム データを使用します。この関数を使用すると、チェックしたい反復回数を渡すことができます。反復の間隔は 5 秒ごとです。コールバックは、そのupdateチェックの速度とすべてのチェックの移動平均で、反復ごとに呼び出されます。必要な精度を得るために必要なだけ反復を使用します。大まかな見積もりが必要な場合は、1 回の反復で十分です。

次のように呼び出されます。

checkUploadSpeed( 10, function ( speed, average ) {

} );

デモ

このコードはこちらで試すことができます。

プライベートサーバー

ThinkingStiff 独自のサーバーでこれを試すことができます。これは、おそらくこれらすべての中で最速です。

スタック スニペット

    function checkUploadSpeed( iterations, update ) {
        var average = 0,
            index = 0,
            timer = window.setInterval( check, 5000 ); //check every 5 seconds
        check();

        function check() {
            var xhr = new XMLHttpRequest(),
                url = '?cache=' + Math.floor( Math.random() * 10000 ), //random number prevents url caching
                data = getRandomString( 1 ), //1 meg POST size handled by all servers
                startTime,
                speed = 0;
            xhr.onreadystatechange = function ( event ) {
                if( xhr.readyState == 4 ) {
                    speed = Math.round( 1024 / ( ( new Date() - startTime ) / 1000 ) );
                    average == 0 
                        ? average = speed 
                        : average = Math.round( ( average + speed ) / 2 );
                    update( speed, average );
                    index++;
                    if( index == iterations ) {
                        window.clearInterval( timer );
                    };
                };
            };
            xhr.open( 'POST', url, true );
            startTime = new Date();
            xhr.send( data );
        };

        function getRandomString( sizeInMb ) {
            var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+`-=[]\{}|;':,./<>?", //random data prevents gzip effect
                iterations = sizeInMb * 1024 * 1024, //get byte count
                result = '';
            for( var index = 0; index < iterations; index++ ) {
                result += chars.charAt( Math.floor( Math.random() * chars.length ) );
            };     
            return result;
        };
    };
    
    checkUploadSpeed( 10, function ( speed, average ) {
        document.getElementById( 'speed' ).textContent = 'speed: ' + speed + 'kbs';
        document.getElementById( 'average' ).textContent = 'average: ' + average + 'kbs';
    } );
<div id="speed">speed: 0kbs</div>
<div id="average">average: 0kbs</div>

JSFiddle

デモがホストされている JSFiddle サーバーは低速です。

このボタンをクリックして、フィドルに移動します。

JSFiddle

于 2013-03-19T03:11:24.240 に答える
2

大量のデータを送受信するサービスに対して非同期の ajax リクエストを行い、クライアントの読み込みにかかる時間を測定できます。もちろん、これはクライアントの現在のネットワーク使用状況の影響を受けます。

于 2013-03-18T08:18:29.000 に答える
1

頭に浮かぶこれを行う 1 つの方法はiframe、aformを含む を作成し、多数のランダムな文字を入力して、プログラムでフォームを送信することですtextarea。textarea送信応答で親ウィンドウを呼び出して完了したことを伝え、送信から完了までの時間を測定します。比較的小さなペイロードから始めて (接続が遅い場合は永遠にかかることはありません)、それがすぐに戻ってくる場合は、満足のいく結果が得られるまで、ペイロードを徐々に大きくして繰り返します。同じようなことが ajax でもできると思いますが、なぜすぐにiframe. スタックオーバーフローに関する私の他の回答を参照してください。ただし、ダウンロードデータではなく、ますます大きくなるフォームデータの観点から考えてください。

これにより、アップロード速度の非常に大まかな測定値が得られます。

于 2013-03-18T08:19:34.753 に答える