• 1. WebSocket出现前
• 2. WebSocket 概述
• 3. WebSocket 特点
• 4. Websocket的使用
• 5. WebSocket的API
  • 5.1 WebSocket构造函数
  • 5.2 webSocket.readyState
  • 5.3 webSocket.onopen
  • 5.4 webSocket.onclose
  • 5.5 webSocket.onmessage
  • 5.5 webSocket.send()
  • 5.7 webSocket.bufferedAmount
  • 5.8 webSocket.onerror

1. WebSocket出现前

我们知道HTTP协议是半双工通信的，同一时刻数据只能单向流动，而且只能是客户端向服务器发起请求，服务器返回请求结果，服务器不能主动向服务端推送信息。如果我们需要与服务器进行持续的通信以保持双方信息的同步，就需要把不断地刷新页面，进行请求验证，这样就造成一定资源的浪费。在WebSocket出现之前，想要持续的通讯，有以下几种解决方案：（1）短轮询短轮询通常采用setInterval 或者 setTimeout 来实现。每隔一段时间就发送一次ajax请求：

setInterval(function() {
    $.get("/path/to/server", function(data, status) {
        console.log(data);
    });
}, 1000);

这样就基本实现了每隔一段时间进行一次轮询，但是也存在一定的问题。我们这里设置的请求的时间为，每隔一秒请求一次，如果网络情况不好，一秒钟时间数据还没返回回来，下一个请求就开始了，这就很容易导致数据的顺序错乱，所以可以使用下面的方法：

function poll() {
    setTimeout(function() {
        $.get("/path/to/server", function(data, status) {
            console.log(data);
            // 发起下一次请求
            poll();
        });
    }, 1000);
}

这样设置的话，每次都会在上一次完成的情况下在进行新的请求。（2）长轮询上面的传统的轮询方式存在一个很大的问题，就是每次都会发送一个HTTP请求，然而并不是每次都能返回需要的数据，这无疑造成了资源的浪费，也给服务器带来了很大的负担。这时就可以使用长轮询的方式来解决这个问题。在长轮询机制中，当服务器收到客户端发来的请求后，不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新。如果有更新，则进行响应；如果一直没有数据，则到达一定的时间限制(服务器端设置)才返回。 客户端在处理完服务器返回的信息后，再次发出请求，重新建立连接。长轮询和短轮询相比，明显是减少了很多不必要的HTTP请求，但是，长轮询在建立连接之后会挂起，等待服务端数据的更新，这样也会导致资源的浪费。（3）长连接（SSE）SSE是HTML5新增的功能，全称为Server-Sent Events，也就是服务器发送事件。通过 SSE ，客户端可以自动获取数据更新，而不用重复发送HTTP请求。一旦连接建立，“事件”便会自动被推送到客户端。服务器端SSE通过事件流(Event Stream) 的格式产生并推送事件。客户端中，SSE借由 EventSource 对象实现。EventSource 包含五个外部属性：onerror、 onmessage、onopen、readyState、url，以及两个内部属性：reconnection time与 last event ID string。在onerror属性中可以对错误捕获和处理，而 onmessage 则对应着服务器事件的接收和处理。另外也可以使用 addEventListener 方法来监听服务器发送事件，根据event字段区分处理。

var eventSource = new EventSource("/path/to/server");
eventSource.onmessage = function (e) {
    console.log(e.event, e.data);
}
// 或者
eventSource.addEventListener("ping", function(e) {
    console.log(e.event, e.data);
}, false);

SEE的优势在于，它不需要建立或者保持大量客户端发送的请求，节约了资源，提高了应用的性能。但是它只支持单向数据通信，只能从服务端向客户端发送消息。

2. WebSocket 概述

WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是：服务器可以向客户端主动推动消息，客户端也可以主动向服务器推送消息。WebSocket原理：客户端向 WebSocket 服务器通知（notify）一个带有所有接收者ID（recipients IDs）的事件（event），服务器接收后立即通知所有活跃的（active）客户端，只有ID在接收者ID序列中的客户端才会处理这个事件。

3. WebSocket 特点

• 支持双向通信，实时性更强
• 可以发送文本，也可以发送二进制数据‘’
• 建立在TCP协议之上，服务端的实现比较容易
• 数据格式比较轻量，性能开销小，通信高效
• 没有同源限制，客户端可以与任意服务器通信
• 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

• 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

  4. Websocket的使用

  在客户端中：

  // 在index.html中直接写WebSocket，设置服务端的端口号为 9999
  let ws = new WebSocket('ws://localhost:9999');
  // 在客户端与服务端建立连接后触发
  ws.onopen = function() {
    console.log("Connection open."); 
    ws.send('hello');
  };
  // 在服务端给客户端发来消息的时候触发
  ws.onmessage = function(res) {
    console.log(res);       // 打印的是MessageEvent对象
    console.log(res.data);  // 打印的是收到的消息
  };
  // 在客户端与服务端建立关闭后触发
  ws.onclose = function(evt) {
  console.log("Connection closed.");
  };

  这里先不管服务端的实现了，以后学到后端的知识再补充……

  5. WebSocket的API

  5.1 WebSocket构造函数

  WebSocket对象作为一个构造函数，用于新建WebSocket实例：

  let ws = new WebSocket('ws://localhost:9999');

  执行上面的语句之后，就会与服务器进行连接。

  5.2 webSocket.readyState

  readyState属性会返回实例对象的当前状态，其值共有四种：

• CONNECTING：值为0，表示正在连接。

• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

  switch (ws.readyState) {
  case WebSocket.CONNECTING:
    // do something
    break;
  case WebSocket.OPEN:
    // do something
    break;
  case WebSocket.CLOSING:
    // do something
    break;
  case WebSocket.CLOSED:
    // do something
    break;
  default:
    // this never happens
    break;
  }

  5.3 webSocket.onopen

  实例对象的onopen属性用于指定连接成功之后的回调函数：

  ws.onopen = function() {
    console.log("Connection open."); 
    ws.send('hello');
  };

  如果需要指定多个回调函数，可以使用addEventListener方法：

  ws.addEventListener('open', function (event) {
    console.log("Connection open."); 
    ws.send('hello');
  });

  5.4 webSocket.onclose

  实例对象的onclose属性用于指定关闭连接之后的回调函数：

  // 在客户端与服务端建立关闭后触发
  ws.onclose = function(evt) {
  console.log("Connection closed.");
  };

  如果需要指定多个回调函数，可以使用addEventListener方法：

  ws.addEventListener("close", function(event) {
  console.log("Connection closed.");
  });

  5.5 webSocket.onmessage

  实例对象的onmessage属性用于指定接收到服务器数据后的回调函数：

  ws.onmessage = function(res) {
    console.log(res);       // 打印的是MessageEvent对象
    console.log(res.data);  // 打印的是收到的消息
  };

  如果需要指定多个回调函数，可以使用addEventListener方法：

  ws.addEventListener("message", function(res) {
   console.log(res);       // 打印的是MessageEvent对象
   console.log(res.data);  // 打印的是收到的消息
  });

  注意，服务器数据可能是二进制数据，也可能是文本，我们需要对数据进行类型的判断：

  ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("文本");
  }
  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("二进制");
  }
  }

  5.5 webSocket.send()

  实例对象的send()方法用于向服务器发送数据：

  ws.send('hello');

  5.7 webSocket.bufferedAmount

  实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束：

  var data = new ArrayBuffer(10000000);
  socket.send(data);
  if (socket.bufferedAmount === 0) {
  // 发送完毕
  } else {
  // 未发送完
  }

  5.8 webSocket.onerror

  实例对象的onerror属性用于指定报错时的回调函数：

  socket.onerror = function(event) {
  // handle error event
  };

  如果需要指定多个回调函数，可以使用addEventListener方法：

  socket.addEventListener("error", function(event) {
  // error event
  });

上面总共提到了四种及时通信的协议，从性能的角度来看：WebSocket > 长连接（SEE） > 长轮询 > 短轮询但是，我们如果考虑浏览器的兼容性问题，顺序就恰恰相反了：短轮询 > 长轮询 > 长连接（SEE） > WebSocket所以，还是要根据具体的使用场景来判断使用哪种方式。