webSocket

websocket：是HTML5的一个新协议，它允许服务端向客户端传递信息，实现浏览器和客户端双工通信

websocket的特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

Websocet的工作流程

1、 创建webSocket对象

```
var socket=new WebSocket(url,[protocol])
//url为指定连接的url，第二个参数是可选的，指定可接受的子协议
```

2、 创建对象后，可使用的属性

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

3、 webSocket对象的相关事件

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

4、 webSocket方法

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

完整示例

export default function (getData, url, token = '') {
  var socket = new WebSocket(`${url}`)
  //连接建立时触发
  socket.onopen = async function () {
    socket.send(token)
    console.log('数据发送中。。。。')
  }
  //客户端接收服务端数据时出发
  socket.onmessage = function (evt) {
    console.log('数据接收', evt)
    var received_msg = evt.data
    var socket = evt.target
    // console.log("received_msg:", received_msg)
    // console.log("数据已接收")
    getData(received_msg, socket)
  }
  //连接关闭时触发
  socket.onclose = function () {
    console.log('连接已关闭。。。')
  }
  return socket
}