HTML5 WebSocket简介

末蓝、 2022-05-12 00:48 277阅读 0赞

# HTML5 WebSocket #

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当获取 Web Socket 连接后，可以通过 **send()** 方法来向服务器发送数据，并通过 **onmessage** 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

varSocket=newWebSocket(url,[protocol]);

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

--------------------

## WebSocket 属性 ##

以下是 WebSocket 对象的属性。假定已创建了 Socket 对象：

<table style="border-collapse:collapse;border:0px;color:#333333;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;font-size:12px;"> 
 <tbody style="border:0px;"> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">属性</th> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">描述</th> 
  </tr> 
  <tr style="border:0px;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">Socket.readyState</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"> <p style="border:0px;line-height:2em;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">只读属性&nbsp;<strong>readyState</strong>&nbsp;表示连接状态，可以是以下值：</p> 
    <ul style="border:0px;line-height:18.2px;"> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;"> <p style="border:0px;line-height:2em;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">0 - 表示连接尚未建立。</p> </li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;"> <p style="border:0px;line-height:2em;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">1 - 表示连接已建立，可以进行通信。</p> </li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;"> <p style="border:0px;line-height:2em;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">2 - 表示连接正在进行关闭。</p> </li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;"> <p style="border:0px;line-height:2em;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">3 - 表示连接已经关闭或者连接不能打开。</p> </li> 
    </ul></td> 
  </tr> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">Socket.bufferedAmount</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"> <p style="border:0px;line-height:2em;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">只读属性&nbsp;<strong>bufferedAmount</strong>&nbsp;已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。</p> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

## WebSocket 事件 ##

以下是 WebSocket 对象的相关事件。假定已创建了 Socket 对象：

<table style="border-collapse:collapse;border:0px;color:#333333;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;font-size:12px;"> 
 <tbody style="border:0px;"> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">事件</th> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">事件处理程序</th> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;background-color:#555555;">描述</th> 
  </tr> 
  <tr style="border:0px;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">open</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">Socket.onopen</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">连接建立时触发</td> 
  </tr> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">message</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">Socket.onmessage</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">客户端接收服务端数据时触发</td> 
  </tr> 
  <tr style="border:0px;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">error</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">Socket.onerror</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">通信发生错误时触发</td> 
  </tr> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;">close</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">Socket.onclose</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;">连接关闭时触发</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## WebSocket 方法 ##

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：