什么是 Web Socket

WebSocket 协议在2008年诞生，2011年成为国际标准，所有浏览器都已经支持了。其是基于TCP的一种新的网络协议，是 HTML5 开始提供的一种在单个TCP连接上进行全双工通讯的协议，它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

都有http协议了，为什么要用Web Socket

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。

HTTP协议是一种无状态、单向的应用层协议，其采用的是请求/响应模型，通信请求只能由客户端发起，服务端对请求做出应答响应，无法实现服务器主动向客户端发起消息，这就注定如果服务端有连续的状态变化，客户端想要获知就非常的麻烦。而大多数Web应用程序通过频繁的异步JavaScript 和 aJax 请求实现长轮询，其效率很低，而且非常的浪费很多的带宽等资源。

HTML5定义的WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态，这相比于轮询方式的不停建立连接显然效率要大大提高。

特点

• 
  
• 
  

  服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话

  
  
  
• 
  

  建立在 TCP 协议之上，服务器端的实现比较容易。

  
  
  
• 
  

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

  
  
  
• 
  

  数据格式比较轻量，性能开销小，通信高效。

  
  
  
• 
  

  可以发送文本，也可以发送二进制数据。

  
  
  
• 
  

  没有同源限制，客户端可以与任意服务器通信。

  
  
  
• 
  

  协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

  
  
  

怎样使用？

执行流程

• 
  
• 1 连接建立：客户端向服务端请求建立连接并完成连接建立
  
• 2 数据上行：客户端通过已经建立的连接向服务端发送数据
  
• 3 数据下行：服务端通过已经建立的连接向客户端发送数据
  
• 4 客户端断开：客户端要求断开已经建立的连接
  
• 5 服务端断开：服务端要求断开已经建立的连接
  

客户端

连接建立

连接成功后，会触发 onopen 事件

var ws = new WebSocket("wss://ws.iwhao.top");

ws.onopen = function(evt) { 

  console.log("Connection open ..."); 

};

数据上行

  ws.send("Hello WebSockets!");

数据下行

ws.onmessage = function(evt) {

  console.log( "Received Message: " + evt.data);

  ws.close();

};

客户端断开

ws.close();

服务端断开

ws.onclose = function(evt) {

  console.log("closed.");

};  

异常报错

如果连接失败，发送、接收数据失败或者处理数据出现错误，browser 会触发 onerror 消息；

ws.onerror = function(evt) {

}; 

服务端 node

参考

• 
  
• Socket.IO
  
• WebSocket-Node
  

api/浏览器版本兼容性