知识精华—WebSocket协议

一.WebSocket功能介绍

1.HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

2.客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据

3.浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

4.没有同源策略的限制，不存在跨域问题

5.协议的标识符就是ws；像https一样如果加密的话就是wxs

二.与HTTP请求对比

之前实现前后端持续性的进行交互的方式是通过http请求轮询来实现的

这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

三.WebSocket 属性

属性	描述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立。 1 - 表示连接已建立，可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

四. WebSocket 事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

 五.WebSocket 方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

六. 简单实例

  let ws = new WebSocket('ws://xxx.xxx/xxx')
  // console.log(ws.readyState)  可以在不同的周期输出这个值，用来检测周期
  ws.onopen = function () {
      console.log('client：打开连接')
      ws.send('client：hello，服务端') // 连接之后就想服务器发送一条信息
  }
  ws.onmessage = function (e) {
      console.log(e)
      setTimeout(() => {
        ws.close() // 获取数据5000ms之后断开连接 close函数可以随时随地调用
      }, 5000)
  }
  ws.onclose = function (params) {
      console.log('连接关闭时触发')
  }
  ws.onerror = function (params) {
      console.log('通信发生错误时触发')
  }

 借鉴地址：https://www.runoob.com/html/html5-websocket.html

 借鉴地址：https://www.jianshu.com/p/3b5fbc1abc9d