SYNCERのロゴ
アイキャッチ画像

WebSocket.bufferedAmount - 未送信データのサイズ

bufferedAmountは、WebSocketのプロパティです。send()でこれからサーバーに送信する予定の、未送信データのサイズをbyteで返すプロパティです。

概要

名前
bufferedAmount
所属
WebSocket
IDL
readonly attribute unsigned long long bufferedAmount;
仕様書
https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket-bufferedamount

説明

未送信データのサイズをbyteで返します。例えば、ゲームコンテンツなどにおいて、連続でデータを送る際にデータサイズが大きくなりすぎないための監視に有用です。

なお、切断後にsend()を実行すると、データは送信されずに未送信データとして蓄積していきます。これらは、再接続時にまとめて送信されるという意味ではありません。システム上、キューに貯まっていくだけの見せかけの数値です。未送信データのバイト数は、再接続時にリセットされます。

チュートリアル

未送信データは下記のタイミングで確認できます。

// 通信開始
var ws = new WebSocket( "wss://socket.syncer.jp/connect" ) ;

// データの送信を実行
ws.send( "こんにちは〜〜。" ) ;

// プロパティを取得 (送信には通常、時間がかかるので、このタイミングで確認できる可能性が高い)
var result = ws.bufferedAmount ;

// コンソールで確認
console.log( result ) ;		// 24

// 1秒後くらいに、送信が完全に終了した後でプロパティを取得
var result = ws.bufferedAmount ;

// コンソールで確認
console.log( result ) ;		// 0 (データの送信は完了している)

デモ

WebSocket.bufferedAmountのデモです。「送信」をクリックすると、メッセージの送信を実行すると同時にプロパティの値を取得します。切断中に未送信データが蓄積していくのも確認してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
	input { width: 40% ; font-size: 16px ; }
</style>
</head>
<body>
	<p>
		<button id="hoge">接続</button>
		<button id="fuga">切断</button>
		<button id="piyo">取得</button>
	</p>
	<p>
		<input id="data" value="SYNCER">
		<button id="send">送信</button>
	</p>
<hr>
	<div id="result"></div>
<script>
var ws = null ;
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var element3 = document.getElementById( "piyo" ) ;
var element4 = document.getElementById( "send" ) ;

// 接続
element1.onclick = function () {
	if ( ws && ws.readyState === 1 ) return false ;

	ws = new WebSocket( "wss://socket.syncer.jp/connect" ) ;

	ws.onopen = function() {
		ws.onmessage = function( message ) {
			logUpdate( message.data ) ;
		}

		ws.onclose = function() {
			logUpdate( "通信を切断しました。" ) ;
		}
	}
}

// 切断
element2.onclick = function () {
	if ( ws && ws.readyState === 1 ) ws.close() ;
}

// 取得
element3.onclick = function () {
	var value = ws.bufferedAmount ;
	logUpdate( value, true ) ;
}

// 送信
element4.onclick = function () {
	ws.send( document.getElementById( "data" ).value ) ;
	logUpdate( ws.bufferedAmount, true ) ;
}

var logUpdate = function ( text, noDate ) {
	var resultElement = document.getElementById( "result" ) ;
	resultElement.textContent = text + ( noDate ? "" : "(" + new Date().toLocaleString() + ")" ) + "\n" + resultElement.textContent ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
11+ 5.1+ 10+ 15+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。