简介
WebSocket API 是一种先进的技术，可在用户浏览器和服务器之间开启双向交互式通信会话。利用该 API，可以向服务器发送信息，并接收事件驱动的响应，而无需轮询服务器以获得回复。
在 RFC 6455 规范中描述的 WebSocket 协议，提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递，而无需中断连接也无需额外的 HTTP 请求。
对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。
WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的API。
使用 WebSocket() 构造函数来构造一个 WebSocket。
初始化使用
var aWebSocket = new WebSocket(url ,[ protocols]);
url //要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。
//url示例
new WebSocket('ws://javascript.info' ,[ protocols]);
/*
WebSocket有ws和wss两种协议
ws类似http, wss类似https协议
ws:// 数据不是加密的，对于任何中间人来说其数据都是可见的。
并且，旧的代理服务器不了解 WebSocket，它们可能会因为看到“奇怪的” header 而中止连接。
另一方面，
wss:// 是基于 TLS 的 WebSocket，类似于 HTTPS 是基于 TLS 的 HTTP），
传输安全层在发送方对数据进行了加密，在接收方进行解密。
因此，数据包是通过代理加密传输的。它们看不到传输的里面的内容，且会让这些数据通过。
*/
protocols
/**
一个协议字符串或者一个包含协议字符串的数组。
这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议
（例如，你可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。
如果不指定协议字符串，则假定为空字符串。
*/
//protocols传参token示例
new WebSocket(url, [getToken(), protocols]);
常量
要获取连接状态，可以通过带有值的 socket.readyState 属性：
websocket有四个常量（或者说是状态）
WebSocket.CONNECTING // 0 连接还未建立
WebSocket.OPEN // 1 通信中
WebSocket.CLOSING // 2 连接关闭中
WebSocket.CLOSED // 3 连接已关闭
属性
WebSocket.binaryType
使用二进制的数据类型连接。
WebSocket.bufferedAmount 只读
未发送至服务器的字节数。
WebSocket.extensions 只读
服务器选择的扩展。
WebSocket.onclose
用于指定连接关闭后的回调函数。
WebSocket.onerror
用于指定连接失败后的回调函数。
WebSocket.onmessage
用于指定当从服务器接受到信息时的回调函数。
WebSocket.onopen
用于指定连接成功后的回调函数。
WebSocket.protocol 只读
服务器选择的下属协议。
WebSocket.readyState 只读
当前的链接状态。
WebSocket.url 只读
WebSocket 的绝对路径。
事件
使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性，来监听下面事件。
当一个 WebSocket 连接被关闭时触发。 也可以通过 onclose 属性来设置。
当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。 也可以通过 onerror 属性来设置。
当通过 WebSocket 收到数据时触发。 也可以通过 onmessage 属性来设置。
当一个 WebSocket 连接成功时触发。 也可以通过 onopen 属性来设置。
const socket = new WebSocket("ws://localhost:8080");
//使用addEventListener()方法调用 示例
socket.addEventListener("open", function (event) {
socket.send("Hello Server!");
});
//使用属性设置 示例
socket.onopen = (event)=>{
console.log(event)
}
注意事项
WebSocket 自身并不包含重新连接（reconnection），身份验证（authentication）和很多其他高级机制。因此，有针对于此的客户端/服务端的库，并且也可以手动实现这些功能。
重新连接与心跳检测
websocket重新连接的实现方法
在手动实现重新连接前我们需要知道一个概念（心跳检测）
心跳检测就是我们在连接websocket之后主动和服务器发送的一种自定义的信令消息（有规律的轮询）
const socket = new WebSocket("ws://localhost:8080");
socket.onopen = (e)=>{
initHeart()
}
socket.onmessage = (e)=>{
console.log(JSON.parse(e.data));
let data = JSON.parse(e.data)
if(data.command === 'heartbeat'){
initHeart()
}
}
socket.onerror = (e)=>{
//在socket错误的回调进行重连
reconnect()
}
//心跳检测
function initHeart(){
//需要设置一个休眠时间 随便copy一个休眠的函数
//休眠时间代表传递心跳的消息间隔
sleep('10000')
if(socket.readyState === 1){
//这里发送的信令可自行和后端沟通
socketOnSend({
message:'心跳检测',
command:'heartbeat'
})
}
}
function socketOnSend(data){
//socket发送消息的方法
socket.send(JSON.stringify(data));
}
function reconnect(){
sleep('10000');
//也可以设置一个最大重连次数
// 这里需要把初始化websocket封装一下 重新调用
const socket = new WebSocket("ws://localhost:8080");
}
