websocket快速入门

一、概念（什么是websocket）

WebSocket是一种通信协议，可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以建立持久性的连接，并进行双向数据传输。

二、特点

• 最大的特点就是服务器可以主动地向客户端发送信息，客户端也还是可以主动向服务端发信息，是真正的平等对话，它属于服务器的一种推送技术
• 建立在 TCP 协议之上，服务器端的实现比较容易
• 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器
• 握手阶段采用 HTTP 协议
• 数据格式轻量，性能开销小。客户端与服务端进行数据交换时，服务端到客户端的数据包头只有2到10字节，客户端到服务端需要加上另外4字节的掩码。HTTP每次都需要携带完整头部
• 更好的二进制支持，可以发送文本，和二进制数据
• 没有同源限制（不存在跨域），客户端可以与任意服务器通信
• 协议标识符是ws（如果加密，则是wss），请求的地址就是后端支持websocket的API
  

三、websocket连接过程

客户端发起HTTP握手，告诉服务端进行WebSocket协议通讯，并告知WebSocket协议版本。服务端确认协议版本，升级为WebSocket协议。之后如果有数据需要推送，会主动推送给客户端

//以下为请求头信息

Accept-Encoding: gzip, deflate, br
Accept-Language: zh, zh-TW; q=0.9, en-US; q=0.8, en; q=0.7,zh-CN; q=0.6
Cache-Control: no-cache
Connection: Upgrade
Host: 127.0.0.1:3000
Origin: http://localhost:3000
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: bwb9SFiJONXhQ/A4pLaXIg==
  Sec-WebSocket-Version: 13
Upgrade: websocket

解析：
1、 Connection: Upgrade 表示我要升级协议
2、Upgrade: websocket 要升级协议到websocket协议
3、 Sec-WebSocket-Version 表示websocket的版本。如果服务端不支持该版本，需要返回一个Sec-WebSocket-Versionheader，里面包含服务端支持的版本号
4、Sec-WebSocket-Key 对应服务端响应头的Sec-WebSocket-Accept，由于没有同源限制，websocket客户端可任意连接支持websocket的服务。这个就相当于一个钥匙一把锁，避免多余的，无意义的连接

//以下是服务器的响应头 
Connection: Upgrade
Sec-WebSocket-Accept: 2jrbCWSCPlzPtxarlGTp4Y8XD20=   
Upgrade: websocket

解析：Sec-WebSocket-Accept: 用来告知服务器愿意发起一个websocket连接， 值根据客户端请求头的Sec-WebSocket-Key计算出来

四、WebSocket API

1、WebSocket 构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

const ws = new WebSocket('ws://localhost:8080'); 
执行上面语句之后，客户端就会与服务器进行连接。

2、readyState

ws的属性，返回当前连接状态

• CONNECTING：值为0，表示正在连接
• OPEN：值为1，表示连接成功，可以正常通信了
• CLOSING：值为2，表示连接正在关闭
• CLOSED：值为3，表示连接已经关闭，或者打开连接

3、onopen

ws的属性，用于指定连接成功后的回调

ws.onopen = function () { 
  ws.send('Hello Server!');
}
 //如果要指定多个回调，则可以使用addEventListener 
 
 ws.addEventListener('open', function (event) {   
 	ws.send('Hello Server!');
})

4、onclose

ws的属性，用于指定连接关闭后的回调

ws.onclose=()=>{
 //连接关闭后的代码
}
ws.addEventListener('close'=>{ 
   //连接关闭后的代码
})

5、onmessage

ws对象的属性，客户端接收到服务器信息时的回调

ws.onmessage=()=>{  
 //收到服务器信息后的代码
}
ws.addEventListener('message',()=>{  
    //收到服务器信息后的代码
})

6、send方法

向服务器发送信息

ws.send(‘发送的信息’)

7、bufferedAmount

ws对象的属性，表示还有多少个二进制数据没发送出去，可以用来判断发送是否结束

const data = new ArrayBuffer(1000); 
const ws =new Websocket（）；
 if(ws.bufferedAmount===0){ 
   //发送完毕
 }else{ 
   //发送未结束
 }

8、onerror

ws对象的属性，指定发生错误时的回调

ws.onerror=()=>{ 
  //错误后的代码
} 
ws.addEventListener('error',()=>{ 
   //错误后的代码 
})