---
title: WebSocket
slug: Web/API/WebSocket
tags:
  - API
  - NeedsContent
  - NeedsTranslation
  - TopicStub
  - WebSocket
  - WebSockets
translation_of: Web/API/WebSocket
---
<div>{{APIRef("Web Sockets API")}}</div>

<p>The <code>WebSocket</code> object provides the API for creating and managing a <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> connection to a server, as well as for sending and receiving data on the connection.</p>

<p>To construct a <code>WebSocket</code>, use the <code><a href="/en-US/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> constructor.</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt>
 <dd>Returns a newly created <code>WebSocket</code> object.</dd>
</dl>

<h2 id="Constants">Constants</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Constant</td>
   <td class="header">Value</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">Properties</h2>

<dl>
 <dt>{{domxref("WebSocket.binaryType")}}</dt>
 <dd>The binary data type used by the connection.</dd>
 <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt>
 <dd>The number of bytes of queued data.</dd>
 <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt>
 <dd>The extensions selected by the server.</dd>
 <dt>{{domxref("WebSocket.onclose")}}</dt>
 <dd>An event listener to be called when the connection is closed.</dd>
 <dt>{{domxref("WebSocket.onerror")}}</dt>
 <dd>An event listener to be called when an error occurs.</dd>
 <dt>{{domxref("WebSocket.onmessage")}}</dt>
 <dd>An event listener to be called when a message is received from the server.</dd>
 <dt>{{domxref("WebSocket.onopen")}}</dt>
 <dd>An event listener to be called when the connection is opened.</dd>
 <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt>
 <dd>The sub-protocol selected by the server.</dd>
 <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt>
 <dd>The current state of the connection.</dd>
 <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt>
 <dd>The absolute URL of the WebSocket.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt>
 <dd>Closes the connection.</dd>
 <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt>
 <dd>Enqueues data to be transmitted.</dd>
</dl>

<h2 id="Events">Events</h2>

<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>

<dl>
 <dt><code><a href="/en-US/docs/Web/API/WebSocket/close_event">close</a></code></dt>
 <dd>Fired when a connection with a <code>WebSocket</code> is closed.<br>
 Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onclose">onclose</a></code> property</dd>
 <dt><code><a href="/en-US/docs/Web/API/WebSocket/error_event">error</a></code></dt>
 <dd>Fired when a connection with a <code>WebSocket</code>has been closed because of an error, such as when some data couldn't be sent.<br>
 Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onerror">onerror</a></code> property.</dd>
 <dt><code><a href="/en-US/docs/Web/API/WebSocket/message_event">message</a></code></dt>
 <dd>Fired when data is received through a <code>WebSocket</code>.<br>
 Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onmessage">onmessage</a></code> property.</dd>
 <dt><code><a href="/en-US/docs/Web/API/WebSocket/open_event">open</a></code></dt>
 <dd>Fired when a connection with a <code>WebSocket</code>is opened.<br>
 Also available via the <code><a href="/en-US/docs/Web/API/WebSocket/onopen">onopen</a></code> property.</dd>
</dl>

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

<pre class="brush: js">// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>


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

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
</ul>