js websocket简单例子（WebSocket的使用方法（JS前端））

先来一个常用例子

// WebSocket构造函数   
    
    
    
，创建WebSocket对象 let ws = new WebSocket(ws://localhost:8888) // 连接成功后的回调函数 ws.onopen = function (params) { console.log(客户端连接成功) // 向服务器发送消息 ws.send(hello) }; // 从服务器接受到信息时的回调函数 ws.onmessage = function (e) { console.log(收到服务器响应, e.data) }; // 连接关闭后的回调函数 ws.onclose = function(evt) { console.log("关闭客户端连接"); }; // 连接失败后的回调函数 ws.onerror = function (evt) { console.log("连接失败了"); };

下面详细说明常用的属性和方法

更全面的官网的文档可以去这里看：点击查看

下面是我总结的内容

WebSocket WebSocket 对象提供了用于创建和管理 WebSocket 连接


     


     


     


 ，以及可以通过该连接发送和接收数据的 API   
    
    
    
。

var ws= new WebSocket(url, protocols);

参数

url：要连接的 URL；这应该是 WebSocket 服务器将响应的 URL


     


     


     


 。

protocols（可选）：一个协议字符串或者一个包含协议字符串的数组 




 




 




 。这些字符串用于指定子协议 




 




 




 ，这样单个服务器可以实现多个 WebSocket 子协议（可以通过一台服务器根据指定的协议（protocol）处理不同类型的交互）   

   

   

   

。如果不指定协议字符串   

   

   

   

，则假定为空字符串

     

     

     

。

属性

1. readyState 属性返回实例对象的当前状态

CONNECTING：值为0

     

     

     

，表示正在连接
  




  




  




  。

OPEN：值为1
  




  




  




  ，表示连接成功  


  


  


  

，可以通信  


  


  


  

。

CLOSING：值为2 
     
     
     
，表示连接正在关闭 
     
     
     
。

CLOSED：值为3

   




   




   




  ，表示连接已经关闭 



 



 



 

，或者打开连接失败

   




   




   




  。

示例

switch (ws.readyState) { case WebSocket.CONNECTING: // 也可以用0 // do something break; case WebSocket.OPEN: // 也可以用1 // do something break; case WebSocket.CLOSING: // 也可以用2 // do something break; case WebSocket.CLOSED: // 也可以用3 // do something break; default: // this never happens break; }

2. onopen 连接成功后的回调函数 当WebSocket 的连接状态readyState 变为1时调用                 ，这意味着当前连接已经准备好发送和接受数据 



 



 



 

。

使用方法

ws.onopen = function () { ws.send(Hello Server!); }

或者

ws.addEventListener(open, function (event) { ws.send(Hello Server!); });

3. onmessage 从服务器接受到信息时的回调函数 message 事件会在 WebSocket 接收到新消息时被触发

使用方法

ws.onmessage = function(event) { // 接收到的数据 var data = event.data; // 其他代码 };

或者

ws.addEventListener("message", function(event) { // 接收到的数据 var data = event.data; // 其他代码 });

注意：服务器推送的数据可能有多种格式


    




    




    




  ，需要我们动态判断
















，也可以通过 binaryType 属性设置

判断 / 设置 数据格式

// 判断 ws.onmessage = function(event){ if(typeof event.data === String) { console.log("返回数据是字符串"); } } // binaryType 属性设置 ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { // 收到的是 ArrayBuffer 数据 console.log(e.data.byteLength); };

4. onclose 连接关闭后的回调函数 onclose 在 WebSocket 连接的readyState 变为 CLOSED或3时被调用                  ，它接收一个名字为close的 CloseEvent 事件

使用方法

ws.onclose = function(event) { var code = event.code; // 表示服务端发送的关闭码 var reason = event.reason; // 表示服务器关闭连接的原因 var wasClean = event.wasClean; // 表示连接是否完全关闭 // 其他代码 };

或者

ws.addEventListener("close", function(event) { var code = event.code; // 表示服务端发送的关闭码 var reason = event.reason; // 表示服务器关闭连接的原因 var wasClean = event.wasClean; // 表示连接是否完全关闭 // 其他代码 });

关闭码对照表：点击查看

5. onerror 连接失败后的回调函数 当websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时


     



     



     



  ，一个error事件将被引发                 。

使用方法

ws.onerror = function(event) { console.log(连接错误: , event); };

或者

ws.addEventListener(error, function (event) { console.log(连接错误: , event); });

6. bufferedAmount 未发送至服务器的字节数 bufferedAmount是一个只读属性















，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数


    




    




    




  。一旦队列中的所有数据被发送至网络   
    
    
    
，则该属性值将被重置为 0
















。但是


     


     


     


 ，若在发送过程中连接被关闭 




 




 




 ，则属性值不会重置为 0                  。如果你不断地调用send()   

   

   

   

，则该属性值会持续增长


     



     



     



  。

使用方法

// 创建数据 var data = new ArrayBuffer(10000000); // 发送数据 ws.send(data); // 判断数据是否 if (socket.bufferedAmount === 0) { // 数据发送完成 } else { // 还有数据未发送完成 }

方法

1. send() 对要传输的数据进行排队 send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列

     

     

     

，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount 的值















。若数据无法传输（例如数据需要缓存而缓冲区已满）时
  




  




  




  ，套接字会自行关闭   
    
    
    
。

使用方法

ws.send(your message);

注意：用于传输至服务器的数据


     


     


     


 。它必须是以下类型之一：

USVString：文本字符串 




 




 




 。字符串将以 UTF-8 格式添加到缓冲区  


  


  


  

，并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值   

   

   

   

。

ArrayBuffer：您可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区 
     
     
     
，bufferedAmount 将加上所需字节数的值

     

     

     

。

Blob：Blob 类型将队列 blob 中的原始数据以二进制中传输
  




  




  




  。 bufferedAmount 将加上原始数据的字节数的值  


  


  


  

。

ArrayBufferView：您可以以二进制帧的形式发送任何 JavaScript 类数组对象 ；其二进制数据内容将被队列于缓冲区中 
     
     
     
。值 bufferedAmount 将加上必要字节数的值

   




   




   




  。

2. close() 关闭当前链接 close() 方法关闭 WebSocket 连接或连接尝试（如果有的话） 



 



 



 

。如果连接已经关闭

   




   




   




  ，则此方法不执行任何操作                 。

使用方法

// WebSocket.close(code, reason) ws.close();

参数：

code（可选）：一个数字状态码 



 



 



 

，它解释了连接关闭的原因


    




    




    




  。如果没有传这个参数                 ，默认使用 1005
















。

reason（可选）：一个人类可读的字符串


    




    




    




  ，它解释了连接关闭的原因                  。这个 UTF-8 编码的字符串不能超过 123 个字节


     



     



     



  。

数字状态码对照表：点击查看

到这里就结束了
















，根据需求使用就可以了















。