---
title: WebSocket
slug: Web/API/WebSocket
tags:
  - API
  - Interface
  - NeedsContent
  - WebSocket
  - WebSockets
  - インターフェイス
translation_of: Web/API/WebSocket
---
<div>{{APIRef("Web Sockets API")}}</div>

<p><code>WebSocket</code> オブジェクトは、サーバーへの <a href="/ja/docs/Web/API/WebSockets_API">WebSocket</a> 接続の作成と管理、および接続上のデータの送受信に使用する API を提供します。</p>

<p><code>WebSocket</code> を構築するには、 <code><a href="/ja/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> コンストラクターを使用してください。</p>

<h2 id="Constructor" name="Constructor">コンストラクター</h2>

<dl>
 <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt>
 <dd>新しく作成された <code>WebSocket</code> オブジェクトを返します。</dd>
</dl>

<h2 id="Constants" name="Constants">定数</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">定数</td>
   <td class="header">値</td>
  </tr>
  <tr>
   <td><code>WebSocket.CONNECTING</code></td>
   <td><code>0</code></td>
  </tr>
  <tr>
   <td><code>WebSocket.OPEN</code></td>
   <td><code>1</code></td>
  </tr>
  <tr>
   <td><code>WebSocket.CLOSING</code></td>
   <td><code>2</code></td>
  </tr>
  <tr>
   <td><code>WebSocket.CLOSED</code></td>
   <td><code>3</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{domxref("WebSocket.binaryType")}}</dt>
 <dd>接続で使用されるバイナリデータ型。</dd>
 <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt>
 <dd>キューに入れられたデータのバイト数。</dd>
 <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt>
 <dd>サーバーによって選択された拡張機能。</dd>
 <dt>{{domxref("WebSocket.onclose")}}</dt>
 <dd>接続が閉じられたときに呼び出されるイベントリスナー。</dd>
 <dt>{{domxref("WebSocket.onerror")}}</dt>
 <dd>エラーが発生したときに呼び出されるイベントリスナー。</dd>
 <dt>{{domxref("WebSocket.onmessage")}}</dt>
 <dd>サーバーからメッセージを受信したときに呼び出されるイベントリスナー。</dd>
 <dt>{{domxref("WebSocket.onopen")}}</dt>
 <dd>接続が開かれたときに呼び出されるイベントリスナー。</dd>
 <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt>
 <dd>サーバーによって選択されたサブプロトコル。</dd>
 <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt>
 <dd>接続の現在の状態。</dd>
 <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt>
 <dd>WebSocket の絶対 URL。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<dl>
 <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt>
 <dd>接続を閉じます。</dd>
 <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt>
 <dd>送信するデータをキューに入れます。</dd>
</dl>

<h2 id="Events" name="Events">イベント</h2>

<p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>eventname</em></code> プロパティへ代入します。</p>

<dl>
 <dt>{{domxref("WebSocket/close_event", "close")}}</dt>
 <dd><code>WebSocket</code> による接続が閉じたときに発生します。<br>
 {{domxref("WebSocket/onclose", "onclose")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("WebSocket/error_event", "error")}}</dt>
 <dd><code>WebSocket</code> による接続が、データの一部が送信できなかったなどのエラーのために閉じた時に発生します。<br>
 {{domxref("WebSocket/onerror", "onerror")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("WebSocket/message_event", "message")}}</dt>
 <dd><code>WebSocket</code> を通じてデータを受信したときに発生します。<br>
 {{domxref("WebSocket/onmessage", "onmessage")}} プロパティからも利用できます。</dd>
 <dt>{{domxref("WebSocket/open_event", "open")}}</dt>
 <dd><code>WebSocket</code> による接続が開いたときに発生します。<br>
 {{domxref("WebSocket/onopen", "onopen")}} プロパティからも利用できます。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: js notranslate">// WebSocket 接続を作成
const socket = new WebSocket('ws://localhost:8080');

// 接続が開いたときのイベント
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// メッセージの待ち受け
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#network", "WebSocket")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>
<p>{{Compat("api.WebSocket")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">WebSocket クライアントアプリケーションを書く</a></li>
</ul>