JavaScript・HTMLでソケットを使用する方法｜WebSocketの基本と使い方

JavaScriptでソケット通信を行うには？WebSocketインターフェースの使い方

JavaScriptでソケットを使用するには、WebSocketインターフェースを利用します。このインターフェースにより、Webアプリケーションはサーバー側のプロセスと双方向の通信を維持できるようになります。

WebSocketは、HTTPとは異なり、一度接続を確立するとクライアントとサーバーのどちらからでもデータを送受信できるフルデュプレックス（全二重）通信を実現するプロトコルです。チャットアプリケーション、リアルタイムゲーム、ライブ配信など、低遅延なリアルタイム通信が求められる場面で広く活用されています。

WebSocketの主なメソッドとプロパティ

ここからは、WebSocketを操作するための代表的なメソッドとプロパティを順番に見ていきましょう。

1. 新しいソケットを作成する

socket = new WebSocket(url [, protocols])

新しいWebSocketオブジェクトを作成します。第1引数の url は接続先を示すURL文字列、第2引数の protocols は省略可能で、サブプロトコル名を表す文字列または文字列の配列を指定します。

2. データを送信する

socket.send(data)

確立済みの接続を通じてサーバーへデータを送信します。送信できるのは文字列だけでなく、BlobやArrayBufferといったバイナリデータにも対応しています。

3. 接続を閉じる

socket.close([code [, reason]])

ソケット接続を切断します。必要に応じて、切断の状態を示すステータスコード（数値）や、人間が読める形式の理由テキストを引数として渡すことができます。

4. 接続に使用したURLを取得する

socket.url

接続の確立に使用されたURLを返す読み取り専用のプロパティです。

まとめ

WebSocketを使えば、JavaScriptだけで手軽に双方向のリアルタイム通信を実装できます。基本的な流れは、「new WebSocket()」で接続を作成し、「send()」でデータを送信、「close()」で接続を切断、「url」で接続先URLを確認する、というシンプルなものです。リアルタイム性の高いWebアプリケーションを開発する際は、ぜひ活用してみてください。