WebSocket协议

前言

该文章是为了完善个人简历对应的知识点，目前是直接转载的文章，原文链接在此，后续会慢慢依照自己项目中遇到好的进行更新。

简介

WebSocket属于OSI模型的应用层协议，它是一种网络传输协议，可以在单个TCP连接上进行全双工通信。WebSocket协议允许在建立连接后，客户端和服务器都可以主动向对方发送数据，类似于Socket的TCP长连接通讯模式。与HTTP不同，WebSocket是双向通信协议，且在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小，从而减少了控制开销。WebSocket还定义了二进制帧，支持发送二进制内容，并且允许通过扩展实现部分自定义的子协议。

一、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 );
  

• 基于协议头

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

参考文章

WebSocket(保姆级教学)-CSDN博客