WebSocket(保姆级教学)

  WebScoket的出现就是为了实现客户端和服务端之间的全双工通信机制，且它不在需要进行3次握手与4次挥手，只需要在客户端创建一个socket实例并且提供它所要连接服务端的IP地址和端口，而服务端创建另一个socket并绑定本地端口进行监听，然后客户端进行连接服务端，服务端接受连接之后双方建立了一个端对端的TCP连接，在该连接上就实现双向通讯了

 一、WebSocket的特点以及介绍

1、特点

• WebSocket是真正的全双工通信机制，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。而HTTP长连接基于HTTP，是传统的客户端对服务器发起请求的模式。 HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，消息交换效率低。Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别所以它需要对服务器和客户端都进行升级才能实现，当然在现在这个时代，我们的主流浏览器都是支持HTML5的，使用时我们直接使用即可

 2、WebSocket 协议介绍

• WebSocket 协议的底层协议也是TCP协议
• WebSocket 协议的标识符为ws,加密后为wss
• WebSocket 协议没有同源限制，即WebSocket 协议可以跨域通信
• WebSocket 协议是有状态的，是前后端交互的长连接，即建立连接后可以保持连接状态，通信时可以省略部分状态信息
• WebSocket 协议可以发送文本，同时也可以发送二进制数据

 二、WebSocket的使用

1、通过WebSocket构造函数创建一个webScoket实例对象

// 假设我们当前的服务端的接口为ws://192.168.31.19:8081/
const ws=new WebSocket('ws://192.168.31.19:8081/')
// 此时打印ws会出现下现结构的一个信息
conlose.log(ws)
// 打印结果
WebSocket {
binaryType: "blob"
bufferedAmount: 0
extensions: ""
onclose: null
onerror: null
onmessage: null
onopen: null
protocol: ""
readyState: 0
url: "ws://192.168.31.19:8081/"
}

2、创建了一个webScoket实例对象常用属性和方法的介绍

属性	说明
url	当前连接的webScoket接口地址
readyState	当前连接的状态: 0：正在链接中 1：已经链接并且可以通讯 2：连接正在关闭 3;连接已关闭或者没有链接成功
onopen	连接成功的回调函数
onerror	连接失败的回调函数
onmessage	从服务端接受到信息的回调函数
onclose	连接关闭的回调函数
binaryType	使用二进制的数据类型连接
protocol	服务器选择的下属协议
bufferedAmount	未发送至服务器的二进制字节数
close()	关闭当前连接
send(data)	发送消息到服务器

3、客户端实现WebScoket连接

const ws = new WebSocket('ws://192.168.31.19:8081/')

ws.onopen = function () {
  console.log('我们连接成功啦...')
  // 
  webSocket.send('Hello!')
}
ws.onerror = function () {
  console.log('连接失败了...')
}
ws.onmessage = function (e) {
  console.log('服务端传来数据啦...' + e.data)
}
ws.onclose = function () {
  console.log('连接关闭了...')
}

 4、WebScoket的重连机制

• 当我们正在使用WebScoket的时候，难免会出现WebScoket的断联，这个时候，我们只需要在onclose的回调函数中，重新链接即可

ws.onclose = function (e) {
   // 1每10秒重连一次，直到连接成功
    setTimeout(function () {
   // 重新调用连接webSocket事件
     ws = new WebSocket('ws://192.168.31.19:8081/')
 	 ws.onopen = function () {
     console.log('连接成功...')
  			} 
         }, 10000);
        };

5、WebScoket的心跳保活

• websocket长连接有默认的超时时间（1分钟），也就是说，超过一定的时间客户端和服务器之间没有发生任何消息传输，连接会自动断开；除此之外，服务器或防火墙一般也会在一段时间不活动并超时之后终止外部的长连接。因此，若需要使客户端一直保持连接，就需要设置心跳保活机制了。
• 实现原理:我们可以每次在 每次保持心跳保活的时候，向WebScoket发送一条消息，证明我们还"活着"

  var timeout = 1000 * 30 //心跳间隔  
  var timeoutTimer=null //保持心跳的定时器
    timeoutTimer = setTimeout(function () {
      ws.send('HeartBeat')
    }, timeout)

  6、客户端主动断开连接

  // 客户端主动断开连接
  ws = new WebSocket('ws://192.168.31.19:8081/')
  ws.close();

  7、WebScoket添加token的几种方法

• 使用send发送参数

  var  ws = new WebSocket("ws://" + url );
  ws.onopen=function(){
      ws.send(token)
  }

• 请求地址中携带参数

  var  ws = new WebSocket("wss://" + url?token );

• 基于协议头
  • websocket请求头中可以包含Sec-WebSocket-Protocol这个属性，该属性是一个自定义的子协议。它从客户端发送到服务器并返回从服务器到客户端确认子协议。我们可以利用这个属性添加token。

    var  ws = new WebSocket("ws://" + url,[token]);