WebSocket使用

朱雀 2022-12-20 03:22 133阅读 0赞

# WebSocket #

特点:服务器可以主动想客户端推送信息,客户端也可以主动向服务器发送消息,所有浏览器都支持

1.  建立在TCP协议上,服务端的实现比较容易
2.  与HTTP协议有良好的兼容性
3.  数据比较轻量级,性能开销小,通信高效
4.  可以发送文本,可以发送二进制数据
5.  没有同源策略,客户端可以与任意服务器通信
6.  协议标识符为ws,如果加密是wss,服务器网址就是URL

### 客户端API ###

WebSocket对象作为一个构造函数,用于创建WebSocket实例

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">var ws = new WebSocket( ‘ws://localhost:3000’ )</p> <p style="margin-left:0cm;">执行这段语句后,客户端会与服务器进行连接</p> </td> 
  </tr> 
 </tbody> 
</table>

WebSocket.readyState

实例对象的当前状态,共四种

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> 
    <ul> 
     <li>CONNECTING:值为0,表示正在连接</li> 
     <li>OPEN:值为1,表示连接成功,可以通信了</li> 
     <li>CLOSING:值为2,表示连接正在关闭</li> 
     <li>CLOSED:值为3,表示连接已经关闭,或者打开连接失败</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

WebSocket.onopen

实例对象的onopen属性,用于指定连接成功后的回调函数,如果要指定多个回调函数,可以使用addEventListener方法

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">ws.onopen=function(){}</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">ws.addEventListener(‘open’,function(){})</p> </td> 
  </tr> 
 </tbody> 
</table>

WebSocket.onclose

实例对象的onclose属性,用于指定连接关闭后的回调函数

WebSocket.onmessage

实例对象的onmessage属性,用于指定收到服务器数据后的回调函数,event为服务器返回的数据对象

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">wx.onmessage=function(event){&nbsp; var data = event.data }</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">服务器数据可能是文本,也可能是二进制数据(blob对象或者ArrayBuffer对象)</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">ws.binaryType返回连接所传输的二进制数据类型,返回值为字符串 ‘blob’或者’arraybuffer’</p> </td> 
  </tr> 
 </tbody> 
</table>

WebSocket.bufferedAmount

实例对象的buggeredAmount属性,表示多少字节的二进制数据没有发送出去,它可以用来判断发送是否结束

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">var data = new ArrayBuffer(10000000);</p> <p style="margin-left:0cm;">socket.send(data);</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">if (socket.bufferedAmount === 0) { </p> <p style="margin-left:0cm;">&nbsp; // 发送完毕</p> <p style="margin-left:0cm;">} else { </p> <p style="margin-left:0cm;">&nbsp; // 发送还没结束</p> <p style="margin-left:0cm;">}</p> </td> 
  </tr> 
 </tbody> 
</table>

WebSocket.onerror

实例对象的onerror属性,用于指定报错时的回调函数

WebSocket.send()

实例对象的send()方法用于向服务器发送数据数据

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:414.8pt;"> <p style="margin-left:0cm;">发送文本</p> <p style="margin-left:0cm;">ws.send(‘message’)</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">发送Blob对象的例子</p> <p style="margin-left:0cm;">var file = document.querySelect(‘ input[type=’file’] ’).file[0]</p> <p style="margin-left:0cm;">ws.send(file)</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">发送ArrayBuffer对象的例子</p> <p style="margin-left:0cm;">var img = canvas_context.getImageData(0, 0, 400, 320);</p> <p style="margin-left:0cm;">var binary = new Uint8Array(img.data.length);</p> <p style="margin-left:0cm;">for (var i = 0; i &lt; img.data.length; i++) { </p> <p style="margin-left:0cm;">&nbsp; binary[i] = img.data[i];</p> <p style="margin-left:0cm;">}</p> <p style="margin-left:0cm;">ws.send(binary.buffer);</p> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

WebSocket.close()

实例对象的close()方法关闭WebSocket连接