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

WebSocket - ソケット通信

WebSocketは、Webサーバーとクライアント間でのソケット通信をするための機能を備えたインターフェイスです。

概要

名前
WebSocket
継承
IDL
[Constructor(USVString url, optional (DOMString or sequence<DOMString>) protocols = []), Exposed=(Window,Worker)]
interface WebSocket : EventTarget {
  readonly attribute USVString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long long bufferedAmount;

  // networking
  attribute EventHandler onopen;
  attribute EventHandler onerror;
  attribute EventHandler onclose;
  readonly attribute DOMString extensions;
  readonly attribute DOMString protocol;
  void close(optional [Clamp] unsigned short code, optional USVString reason);

  // messaging
  attribute EventHandler onmessage;
  attribute BinaryType binaryType;
  void send(USVString data);
  void send(Blob data);
  void send(ArrayBuffer data);
  void send(ArrayBufferView data);
};

typedef EventHandlerNonNull? EventHandler;

enum BinaryType { "blob", "arraybuffer" };

typedef (Int8Array or Int16Array or Int32Array or Uint8Array or Uint16Array or Uint32Array or Uint8ClampedArray or Float32Array or Float64Array or DataView) ArrayBufferView;

callback EventHandlerNonNull = any (Event event);
仕様書
https://html.spec.whatwg.org/multipage/web-sockets.html#websocket

チュートリアル

WebSocketのインスタンスは下記の通り、作成できます。引数に接続先のurlを指定して下さい。インスタンスの作成時にソケット通信が開始されます。当サイトでは、WebSocketを試したい方のために、こちらでサーバーを稼働させています。

// インスタンスの作成 (ソケット通信の開始)
var ws = new WebSocket( "wss://socket.syncer.jp/connect" ) ;

// メッセージの送信
ws.send( "Hello!" ) ;

// メッセージの受信
ws.onmessage = function ( event ) {
	var message = event.data ;	// 受信した内容
}

ソケット通信のデモです。このページを別ウィンドウで新しく開いて、2つのウィンドウで同時に接続してみましょう。ログをリアルタイムで共有して、チャットになります。

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

<!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>
	</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( "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 () {
	ws.send( document.getElementById( "data" ).value ) ;
}

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

コンストラクタ

WebSocket()

新しいWebSocketのオブジェクトを作成します。

プロパティ

binaryType

サーバーに送信する予定の、バイナリデータの種類を返すプロパティです。

bufferedAmount

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

extensions

ソケット通信においてサーバー側が許可する拡張機能を返すプロパティです。具体的には、WebSocketサーバーのレスポンスヘッダーにある、Sec-WebSocket-Extensionsの値です。

protocol

ソケット通信しているサーバー側が許可する、下位プロトコルの情報を返すプロパティです。

readyState

ソケット通信の状態を表す数値を返します。

url

ソケット通信先のurlを返します。

メソッド

close()

サーバーとの通信を切断します。

send()

クライアントからサーバーにデータを送信します。

定数

CLOSED

3を返します。この値は、ソケット通信の切断が完了し、通信をしていない状態を表します。

CLOSING

2を返します。この値は、ソケット通信の切断を開始して、まだ切断が完了していない状態を表します。

CONNECTING

0を返します。この値は、ソケット通信を接続を開始して、まだ接続が完了していない状態を表します。

OPEN

1を返します。この値は、ソケット通信の接続が確立し、通信中であることを表します。

イベント

onclose

ソケット通信で通信が終了した時に発火します。

onerror

ソケット通信で接続に失敗した時に発火します。

onmessage

ソケット通信でサーバー側からのメッセージを受信した時に発火します。

onopen

ソケット通信で接続が確立した時に発火します。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
WebSocket●● 11+● 5.1+●● 10+● 15+●● 4.4+
binaryType● 15+● 11+● 6.0+●● 10+● 15+● 6.0+● 4.4+
bufferedAmount●● 11+● 5.1+●● 10+● 15+●● 4.4+
close()●● 11+● 5.1+●● 10+● 15+●● 4.4+
CLOSED●● 11+● 5.1+●● 10+● 15+●● 4.4+
CLOSING●● 11+● 5.1+●● 10+● 15+●● 4.4+
CONNECTING●● 11+● 5.1+●● 10+● 15+●● 4.4+
extensions● 16+● 11+● 6.0+●● 10+● 15+● 6.0+● 4.4+
onclose●● 11+● 5.1+●● 10+● 15+●● 4.4+
onerror●● 11+● 5.1+●● 10+● 15+●● 4.4+
onmessage●● 11+● 5.1+●● 10+● 15+●● 4.4+
onopen●● 11+● 5.1+●● 10+● 15+●● 4.4+
OPEN●● 11+● 5.1+●● 10+● 15+●● 4.4+
protocol● 15+● 11+● 6.0+●● 10+● 15+● 6.0+● 4.4+
readyState●● 11+● 5.1+●● 10+● 15+●● 4.4+
send()●● 11+● 5.1+●● 10+● 15+●● 4.4+
url●● 11+● 6.0+●● 10+● 15+● 6.0+● 4.4+
WebSocket()●● 11+● 6.0+●● 10+● 15+● 6.0+● 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。