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

<p><code>WebSocket</code> 对象提供了用于创建和管理 <a href="/zh-CN/docs/Web/API/WebSockets_API" title="zh-CN/WebSockets">WebSocket</a> 连接，以及可以通过该连接发送和接收数据的 API。</p>

<p>使用<code><a href="/en-US/docs/Web/API/WebSocket/WebSocket"> WebSocket()</a></code><a href="/en-US/docs/Web/API/WebSocket/WebSocket"> </a>构造函数来构造一个<code> WebSocket</code> 。</p>

<h2 id="构造函数">构造函数</h2>

<dl>
 <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt>
 <dd>返回一个 <code>WebSocket</code> 对象。</dd>
</dl>

<h2 id="常量">常量</h2>

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

<dl>
 <dt>{{domxref("WebSocket.binaryType")}}</dt>
 <dd>使用二进制的数据类型连接。</dd>
 <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt>
 <dd>未发送至服务器的字节数。</dd>
</dl>

<dl>
 <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt>
 <dd>服务器选择的扩展。</dd>
</dl>

<dl>
 <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 的绝对路径。</dd>
</dl>

<h2 id="Method_overview" name="Method_overview">方法</h2>

<dl>
 <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt>
 <dd>关闭当前链接。</dd>
 <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt>
 <dd><span>对要传输的数据进行排队</span>。</dd>
</dl>

<h2 id="事件">事件</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="Attributes" name="Attributes">示例</h2>

<pre class="brush: js line-numbers language-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="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>规范</td>
   <td>状态</td>
   <td>注释</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<ul>
</ul>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

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

<h2 id="See_also" name="See_also">相关链接</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications" title="/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
</ul>

<p>
 <audio class="hidden"></audio>
</p>