---
title: WebSocket
slug: Web/API/WebSocket
translation_of: Web/API/WebSocket
---
<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>

<div> </div>

<div>El objeto WebSocket provee la API para la creación y administración de una conexión <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket </a>a un servidor, así como también para enviar y recibir datos en la conexión.</div>

<div> </div>

<div>El constructor de WebSocket acepta un parámetro requerido y otro opcional.</div>

<p> </p>

<pre class="syntaxbox">WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);
</pre>

<p> </p>

<dl>
 <dt><code>url</code></dt>
 <dd><code>La URL a la cual se conecta, debe ser la URL con la cual el servidor WebSocket debe responder.</code></dd>
 <dt><code>protocols</code> {{optional_inline}}</dt>
 <dd>Permite cualquier caso, desde un simple protocolo o un arreglo de cadenas de texto. Estas cadenas de texto son usadas para indicar subprotocolos, en los cuales un único servidor puede implementar múltiples subprotocolos para el WebSocket (por ejemplo, tu podrías esperar que un servido gestione diferentes tipos de interacciones dependiendo de un tipo específico de protocolo). Si no especificas un subprotocolo, se asume una cadena de texto vacía.</dd>
 <dd> </dd>
</dl>

<p>El constructor puede levantar excepciones:</p>

<dl>
 <dt><code>SECURITY_ERR</code></dt>
 <dd>El puerto en el cual la conexión se realiza se encuentra bloqueado.</dd>
</dl>

<h2 id="Revisión_de_Métodos">Revisión de Métodos</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
  </tr>
  <tr>
   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Atributo</td>
   <td class="header">Tipo</td>
   <td class="header">Descricción</td>
  </tr>
  <tr>
   <td><code>binaryType</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>
    <p>Una cadena de texto indicando el tipo de dato binario que es transmitido por la conexión. Debe ser de cualquier manera "blob" si es se unas objetos DOM {{domxref("Blob")}}  o bien "arraybuffer" {{jsxref("ArrayBuffer")}} si se usan otro tipo de objetos</p>
   </td>
  </tr>
  <tr>
   <td><code>bufferedAmount</code></td>
   <td><code>unsigned long</code></td>
   <td>
    <p>La cantidad de bytes de data que pueden ser almacenadas en cola utilizando llamadas a {{manch("send")}} pero que aún no se han transmitido a la red. Este valor se reestablece a cero una vez que toda la información ha sido enviada. Este valor no vuelve a cero cuando la conexión es cerrada; si mantientes llamando {{manch("send")}}, continuará acumulandose. <strong>Solo de lectura.</strong></p>
   </td>
  </tr>
  <tr>
   <td><code>extensions</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>
    <p>Las extensiones seleccionadas por el servidor. Esto solamente puede ser un string vacío o bien una lista de extensiones que es negociada por la conexión.</p>
   </td>
  </tr>
  <tr>
   <td><code>onclose</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>
    <p>Un monitor de eventos que atiende una llamada cuando la conexión del WebSocket cambia a un estado CERRADO (CLOSED). El monitor recibe un <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> llamado "cerrado".</p>
   </td>
  </tr>
  <tr>
   <td><code>onerror</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>
    <p>Un monitor de eventos que es llamado cuando un error ocurre. Esto es un evento simple llamado "error"</p>
   </td>
  </tr>
  <tr>
   <td><code>onmessage</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>
    <p>Un monitor de eventos que es llamado cuando un mensaje es recibido desde un servidor. El monitor recibe un objeto <a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent </code></a>llamado "mensaje".</p>
   </td>
  </tr>
  <tr>
   <td><code>onopen</code></td>
   <td>{{domxref("EventListener")}}</td>
   <td>Un monitor de eventos que es llamado cuando el estado <code>readyState </code>de la conexión<code> Websocket </code>cambia a <code>OPEN. </code>Esto indica que la conexión está lista para enviar y recibir datos. El evento es uno simple con el nombre "open".</td>
  </tr>
  <tr>
   <td><code>protocol</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>Una cadena indicando el nombre del sub-protocolo que el servidor ha seleccionado. Este puede ser una de las cadenas especificadas en el parámetro <code>protocols</code> cuando se ha creado el objeto Websocket.</td>
  </tr>
  <tr>
   <td><code>readyState</code></td>
   <td><code>unsigned short</code></td>
   <td>El estado actual de la conexión. Este es uno de {{anch("Ready state constants")}}. <strong>Solo lectura.</strong></td>
  </tr>
  <tr>
   <td><code>url</code></td>
   <td>{{DOMXref("DOMString")}}</td>
   <td>La URL como la resuelve el constructor. Esto siempre es una URL absoluta. <strong>Solo lectura.</strong></td>
  </tr>
 </tbody>
</table>

<h2 id="Constantes">Constantes</h2>

<h3 id="Ready_state_constants">Ready state constants</h3>

<p>Estas constantes son usadas por el atributo <code>readyState</code> para describir el estado de la conexión <code>WebSocket</code>.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Constante</td>
   <td class="header">Valor</td>
   <td class="header">Descripción</td>
  </tr>
  <tr>
   <td><code>CONNECTING</code></td>
   <td><code>0</code></td>
   <td>La conexión no está aún abierta.</td>
  </tr>
  <tr>
   <td><code>OPEN</code></td>
   <td><code>1</code></td>
   <td>La conexión está abierta y lista para comunicar.</td>
  </tr>
  <tr>
   <td><code>CLOSING</code></td>
   <td><code>2</code></td>
   <td>La conexión está siendo cerrada.</td>
  </tr>
  <tr>
   <td><code>CLOSED</code></td>
   <td><code>3</code></td>
   <td>La conexión está cerrada o no puede ser abierta.</td>
  </tr>
 </tbody>
</table>

<h2 id="Métodos">Métodos</h2>

<h3 id="close()">close()</h3>

<p>Cierra la conexión o intento de conexión del WebSocket si lo hay. Si la conexión ya está cerrada, no hace nada.</p>

<pre class="syntaxbox">void close(
  in optional unsigned short code,
  in optional DOMString reason
);
</pre>

<h4 id="Parámetros">Parámetros</h4>

<dl>
 <dt><code>code</code> {{optional_inline}}</dt>
 <dd>Un valor numérico indicando el código de estado que explica porqué la conexión está siendo cerrada. Si no se especifica este parámetro, se asume un valor por defecto de 1000 (que indica un cierre normal por "transacción completa") . Ver <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">códigos de estado</a> en la página de <a href="/en-US/docs/Web/API/CloseEvent">CloseEvent</a> para la lista de valores permitidos.</dd>
 <dt><code>reason</code> {{optional_inline}}</dt>
 <dd>Una cadena legible explicando porqué la conexión está siendo cerrada. Esta cadena no puede ser mayor que 123 bytes de texto UTF-8 (<strong>no</strong> caracteres)</dd>
</dl>

<h4 id="Exceptions_thrown">Exceptions thrown</h4>

<dl>
 <dt><code>INVALID_ACCESS_ERR</code></dt>
 <dd>Se ha especificado un código erróneo.</dd>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>La <code>reason</code> cadena es demasiado larga o continene caracteres no validos.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> En Gecko, este métido no soporta ningun parámetro antes de Gecko 8.0 {{geckoRelease("8.0")}}.</p>
</div>

<h3 id="send()">send()</h3>

<p>Transmite datos al servidor sobre la conexión WebSocket.</p>

<pre class="syntaxbox">void send(
  in DOMString data
);

void send(
  in ArrayBuffer data
);

void send(
  in Blob data
);
</pre>

<h4 id="Parametros">Parametros</h4>

<dl>
 <dt><code>data</code></dt>
 <dd>Una cadena de texto que enviar al servidor.</dd>
</dl>

<h4 id="Excepciones">Excepciones</h4>

<dl>
 <dt><code>INVALID_STATE_ERR</code></dt>
 <dd>La conexión no está abierta en este momento.</dd>
 <dt><code>SYNTAX_ERR</code></dt>
 <dd>La data tiene caracteres no válidos que no se pueden decodificar.</dd>
</dl>

<div class="note">
<p><strong>Note: </strong>La implementación del método <code>send() </code>en el  motor de renderizado Gecko puede cambiar de la especificación en {{Gecko("6.0")}}; Gecko devuelve un <code>boolean </code>indicando si la conexión esta todavía abierta (y, por extensión, que los datos son encolados o trasmitidos satisfactoriamente). Esto ha sido corregido en {{Gecko("8.0")}}.</p>

<p>A partir de {{Gecko("11.0")}}, implementa {{jsxref("ArrayBuffer")}} pero no tipos de datos {{domxref("Blob")}}.</p>
</div>

<h2 id="Ejemplo">Ejemplo</h2>

<pre class="brush: js">// Crea una nueva conexión.
const socket = new WebSocket('ws://localhost:8080');

// Abre la conexión
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Escucha por mensajes
socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
   <td>{{Spec2("Websockets")}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Sub-protocol support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("6.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("7.0")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>Sub-protocol support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("7.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use <code>MozWebSocket()</code>: <code>var mySocket = new MozWebSocket("http://www.example.com/socketserver");</code></p>

<p>The <code>extensions</code> attribute was not supported in Gecko until Gecko 8.0.</p>

<p>Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the <a href="#send()">send()</a> method were limited to 16 MB. They can now be up to 2 GB in size.</p>

<h2 id="Referencias_adicionales">Referencias adicionales</h2>

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