WebSocket协议-基础篇

本篇文章主要讲述以下几点：

• WebSocket协议出现的背景
• WebSocket与HTTP
• WebSocket API

WebSocket协议出现的背景

我们在上网过程中经常用到的是HTTP和HTTPS协议，HTTP协议和HTTPS协议通信过程通常是客户端通过浏览器发出一个请求，服务器接受请求后进行处理并返回结果给客户端，客户端处理结果。
这种机制对于信息变化不是特别频繁的应用可以良好支撑，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在移动互联网蓬勃发展的趋势下，高并发与用户实时响应是Web应用经常面临的问题，比如金融证券的实时信息、社交网络的实时消息推送等。
WebSocket出现前我们实现推送技术，用的都是轮询，在特定的时间间隔，浏览器自动发出请求，将服务器的消息主动的拉回来，这种情况下，我们需要不断的向服务器发送请求，并且HTTP 请求 的header非常长，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源，并且服务器不能主动向客户端推送数据。在这种情况下需要一种高效节能的双向通信机制来保证数据的实时传输，于是基于HTML5规范的WebSocket应运而生。

WebSocket与HTTP

了解WebSocket的出现背景后，应该对WebSocket有了一些认知。一句话概括：
WebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。

WebSocket与TCP，HTTP的关系

WebSocket-http-tcp.jpeg

WebSocket与HTTP轮询

HTTP实现实时推送用到的轮询，轮询分两种：长轮询和短轮询（传统轮询）

短轮询.png

缺点：数据交互的实时性较低，服务端到浏览器端的数据反馈效率低

长轮询.png

缺点：服务器没有数据到达时，http连接会停留一段时间，造成服务器资源浪费，数据交互的实时性也很低

无论是长轮询还是短轮询，浏览器都要先发起对服务器的连接，才能接收数据，并且实时交互性很低。

然而，WebSocket的出现解决了轮询实时交互性和全双工的问题。
在JavaScript中创建了WebSocket后，会有一个HTTP请求发送到服务器以发起连接。取得服务器响应后，建立的连接使用HTTP升级，从HTTP协议交换为WebSocket协议。即，使用标准的HTTP服务器无法实现WebSocket，只有支持这种协议的专门服务器才能正常工作。
WebSocket使用了自定义的协议，未加密的连接不再是http://，而是ws://，默认端口为80，加密的连接也不是https://，而是wss://，默认端口为443。

websocket.png

WebSocket是类似Socket的TCP长连接通讯模式。一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。

WebSocket与HTTP轮询对比得出的结论：
WebSocket是真正的全双工方式，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。而HTTP长连接基于HTTP，是传统的客户端对服务器发起请求的模式。

WebSocket API

上面讲述了WebSocket比HTTP轮询好，下面介绍一下WebSocket API，使用之后才能在控制台的NetWork中查看原理和运行机制。

创建WebSocket实例

要创建WebSocket，先实例一个WebSocket对象并传入要连接的URL：

var socket = new WebSocket(‘http://localhost:8000‘);

var socket = new WebSocket(‘ws://localhost:8000‘);

  //正在建立连接
  console.log("[readyState]-" + socket.readyState); //0

  //连接建立成功回调
  socket.onopen = function() {
    console.log(‘Connection established.‘)
    console.log("[readyState]-" + socket.readyState); //1
    //发送消息
    // socket.send(‘hello world‘);
  };

  //连接失败回调
  socket.onerror = function() {
    console.log("[readyState]-" + socket.readyState);//3
    console.log(‘Connection error.‘)
  };

  //连接关闭回调
  socket.onclose = function(event) {
    var code = event.code;
    var reason = event.reason;
    var wasClean = event.wasClean;
    console.log("[readyState]-" + socket.readyState);//3
    console.log(‘Connection closed.‘)
    console.log(code, reason, wasClean)
  };

socket.close();

var socket = new WebSocket(‘ws://localhost:8000‘);
socket.send(‘hello world‘);

 socket.onmessage = function(event) {
  var data = event.data;
  //处理数据
};

ar socket = new WebSocket(‘ws://localhost:8000‘);
socket.onopen = function() {
  console.log(‘Connection established.‘)
};
socket.onerror = function() {
  console.log(‘Connection error.‘)
};
socket.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  console.log(‘Connection closed.‘)
};