通信(Javascript) #

Javascriptにおける通信の方法についてを述べる。

WebSocket #

WebSocketはHTTPとは異なる、双方向通信を実現する通信プロトコルである。

WebSocketを表すオブジェクトは、次のコンストラクタで作成できる。

WebSocket(url);

引数には、接続先のサーバのURLを入力する。なお、このコンストラクタを呼び出しオブジェクトを生成するタイミングで、サーバとの接続を開始する。

WebSocketの主なAPIは以下の通り。

プロパティ名	意味
url	接続先のURL
readyState	現在の接続状態
bufferedAmount	WebSocketオブジェクト内にあるデータのサイズを示す。0の時、プログラムから送信指示があったデータはネットワークに送信されている状態。

メソッド名	意味
send()	サーバにデータを送信する
close()	サーバとの接続を切断する

また、readyStateプロパティで得られる値は以下の通り。

WebSocketの接続確立におけるこれらAPIの利用を示した図を以下に記載する。

XMLHttpRequestは、Javascriptから呼び出し可能なHTTP通信を提供するAPIである。

これにより、スクリプトがHTTP通信を行うことが可能になり、画面遷移を伴わずに、HTTPリクエストを送信することができる。

この技術を利用したものをAjaxと呼ぶこともあり、Single Page Applicationの実現にも利用される。

XMLHttpRequestのAPIは以下の通り。

プロパティ名	意味
readyState	現在の接続状態
timeout	リクエストのタイムアウト時間
withCredentials	クロスドメイン通信時にユーザの認証情報を含める場合にはtrue,それ以外はfalse

メソッド名	意味
open()	リクエストメソッド(GET,POSTなど)、リクエスト先URL、非同期フラグ、ユーザ名、パスワードを設定する
setRequestHeader()	リクエストヘッダを追加する
send()	サーバにデータを送信する
abort()	通信を中止する
getResponseHeader()	レスポンスヘッダ引数で指定された名前を持つ値を返す
getAllResponseHeader()	レスポンスヘッダを返す

XMLHttpRequestのAPIの一連の流れを示した図を以下に記載する。

Server-Sent Eventsは、Webサーバからブラウザへのデータプッシュを受信するためのインタフェースである。

Server-Sent Eventsでは、サーバからMIME-type text/event-streamの形式でデータを送信する事ができる。

API類は以下の通り。

プロパティ名	意味
readyState	現在の接続状態

メソッド名	意味
EventSource()	EventSourceオブジェクトのコンストラクタで、サーバへの接続を開始する。引数には接続先URLを入力
close()	サーバ接続を切断する

また、readyStateプロパティで得られる値は以下の通り。

Server-Sent EventsのAPIの一連の流れを示した図を以下に記載する。