websocket 概念

websocket是一个双向通讯的工具，是一种在单个TCP连接上进行全双工通信的协议。能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

websocket使得客户端和服务器之间的数据交换变得简单，在websocket API中，浏览器和服务器只需一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

优点

1. 较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。
2. 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少。
3. 保持连接状态。与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。
4. 更好的二进制支持。WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容。
5. 可以支持扩展。WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。
6. 更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

缺点

• 实现复杂：WebSocket协议的实现比较复杂，需要服务器和客户端都支持WebSocket协议。
• 安全性问题：WebSocket协议的连接是持久化的，如果连接被劫持，可能会导致安全性问题。
• 兼容性问题：WebSocket协议在一些老旧的浏览器中不被支持，需要进行兼容性处理。

方法

ws.send() - 向服务器发送数据

function TestSockets() {
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    var message = {
        nickname: "benben_2015",
        email: "xxxxxxxx@qq.com",
        content: "I love you"
    };
    message = JSON.stringify(message);
    //添加事件监听
    socket.addEventListener('open', function () {
        socket.send(message)
    });

ws.close() - 关闭连接 用于关闭 WebSocket  连接，如果连接已经关闭，则此方法不执行任何操作。

function TestSockets() {
    var socket = new WebSocket("ws://127.0.0.1:8000/ws");
    socket.close()
}

事件

1. 创建和管理 WebSocket 连接

var ws= new WebSocket(url, protocols)
// 用法
var ws = new WebSocket('ws://localhost:9000')

2. onopen 连接成功后的回调函数

// 链接成功
ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
  console.log('链接成功')
});

3. onmessage 从服务器接收到信息时的回调函数

ws.addEventListener("message", function(event) { 
  // 接收到的数据  后端传过来的
  var data = event.data; 
  // 其他代码 
});

4.onclose 连接关闭后的回调函数

ws.addEventListener("close", function(event) {
 console.log('链接关闭')
});

5. onerror 连接失败后的回调函数

ws.addEventListener('error', function (event) { 
  console.log('连接错误: ', event); 
});