1.实时通讯的方式
 
1.1 Ajax轮询
 
异步的方式，是通过ajax+js的方式，每隔一段时间发送一个请求到后端，询问服务器有没有相关的消息或者是数据的更新，如果有就把数据拿到前端进行渲染。但是这种方式是一种死循环，会一直循环下去。ajax是不需要刷新浏览器的，页面上的一些状态更新的操作就需要使用ajax轮询去做。
 
1.2 Long pull
 
Long pull的原理和Ajax轮询的方式是差不多的，但是不同的是Long pull是一种阻塞的方式。性能差
 这两种方式其实都是向服务器发送请求等待处理，都是被动的。这两种方式的性能都是不怎么好的。
 
1.3 Websocket
 
websocket是一种连接协议，是一种长连接，http1.0是一种短连接。服务端和客户端会一直保持着连接。并且服务端会主动的推送消息给客户端。websocket是一种实时化的协议，Http的一个周期是request来界定。也就是说有一个请求发送到服务端，服务端就会做出响应。一个request对应一个response。多个request对应的是多个response。数量是一一对应的。
 websocket连接建立之后，服务端就会一直不停的向客户端发送请求。主动的推送消息给客户端。只需要建立一次请求，就会源源不断的推送想要的数据给客户端。除非自己断开连接重新连接。
 
2.websock连接的过程
 
首先写一个小demo
 （1）先在html界面上构建一个骨架，用于展示发送消息和接收消息的内容。
 
 <div>发送消息：</div>
 <input type="text" id="msgContent"/>
 <input type="button" value="点击发送" onclick="CHAT.chat()"/>
 <div>接收消息:</div>
 <div id="receiveMsg" style="background-color: gainsboro;"></div>
 
（2）开始编写建立websocket连接的过程
 首先定义一个CHAT对象
 
window.CHAT = {
	soctet: null,
	init:function() {            //初始化的方法
		//判断当前浏览器是否支持websocket
		if(window.WebSocket) {
			// 进行初始化操作
			CHAT.socket = new WebSocket('ws://localhost:8080/ws');     //创建一个新的WebSocket
			//定义CHAT生命周期函数
			CHAT.socket.onopen = function() {
				console.log('客户端和服务端的连接建立成功');
			}
			CHAT.socket.onmessage = function() {
				 console.log('接收到的消息' + e.data); 
				 var receiveMsg = document.getElementById('receiveMsg');
				 var html = receiveMsg.innerHTML;
				 receiveMsg.innerHTML = html + "<br />" + e.data;
			}
			CHAT.socket.onclose = function() {
				console.log('消息关闭.....');
			}
			CHAT.socket.onerror = function() {
					console.log('消息发生错误');
			}
		}else {
			alert('当前浏览器不支持websocket协议');
		}
	}，
	chat:function() {
		var msg =  document.getElementById("msgContent");
		CHAT.socket.send(msg.value);
	}
}

webSocket有些乱，整理一下：

 webSocket是用来解决B/S模式中长连接的问题，实现浏览器和服务器间的消息推送和接收。浏览器先发送http报文，借用了http协议来完成一部分握手，这个http报文中有这么一段信息"Upgrade:websocket"，这是告诉服务器"你好，我要切换协议"。服务器接收后，回复一个http报文，告诉浏览器"好的，我已经切换到websocket协议了"。从这里以后就不用http报文了，接下来就完全按照websocket协议进行了。

首先，websocket属于应用层协议，和 http 一样也是基于 TCP/IP 协议。websocket 连接的建立需要借助 http，连接建立完之后就与 http 无关了。
 
过程
 
Connection:Connection必须设置为Upgrade，表示客户端希望连接升级
 
Upgrade:Upgrade必须设置为WebSocket，表示在取得服务器响应之后，使用HTTP升级将HTTP协议转换(升级)为WebSocket协议。
 
Sec-WebSocket-key:随机字符串，用于验证协议是否为WebSocket协议而非HTTP协议
 
Sec-WebSocket-Version:表示使用WebSocket的哪一个版本。
 
Sec-WebSocket-Accept:根据Sec-WebSocket-Accept和特殊字符串计算。验证协议是否为WebSocket协议。
 
Sec-WebSocket-Location:与Host字段对应，表示请求WebSocket协议的地址。
 
HTTP/1.1 101 Switching Protocols:101状态码表示升级协议，在返回101状态码后，HTTP协议完成工作，转换为WebSocket协议。此时就可以进行全双工双向通信了。
 

 
Websocket连接建立过程
 
选择协议
发送选择协议的请求
  
3次握手
客户端向服务端发送连接请求包
服务端接收客户端报文
客户端接收服务端发送的报文，并确认
  
协议转换
连接订阅
客户端通过websocket协议，项服务端发送一个CONNECT命令帧
服务端接收后，返回一个CONNECTED命令帧
客户端向服务端发送SUBSCRIBE命令帧
  
消息推送与确认
服务端推送消息
客户端确认收到消息
 

 
最近为了加深对Websocket协议的理解，通过wireshark抓包工具，对websocket建立连接、消息推送以及确认等一系列操作进行分析，为了方便后续查找及回顾，特此记录。
 考虑到部分老旧浏览器不支持websocket协议，采用socketjs，完成连接的建立。
 
选择协议
 
发送选择协议的请求
 
客户端向服务端发送如下请求，用于咨询使用哪类协议建立连接。
 
 请求响应如下
 
 通过响应结果，发现，该连接可使用websocket协议进行建立。
 
3次握手
 
通过响应结果，客户端开始基于websocket协议建立连接。
 
客户端向服务端发送连接请求包
 
 
服务端接收客户端报文
 
  服务端接收客户端发送的报文，通过SYN=1，确认客户端需要建立连接。于是向客户端发送SYN=1，ACK=1的报文。同时将Acknowledgement number序号加1。
 
 
客户端接收服务端发送的报文，并确认
 
 客户端接收服务发送的报文，检查序列号是否正确（第一次发送的SYN报文的序号 + 1），以及ACK位是否为1。若正确，则发送一个确认包。
 

 至此，完成tcp3次握手。
 
协议转换
 
接着，客户端向服务端发送一个特殊的HTTP请求。
 
 响应如下所示
 
 101响应码，表名服务器了解客户端请求，开始切换Upgrade请求头中定义的协议。
 Websocket协议本质上，是一个基于TCP的协议，练级连接前，完成3次握手后，客户端向服务端发起一个特殊http请求，server端解析后，应答给客户端，至此一个websocket连接完成建立。
 
连接订阅
 
客户端通过websocket协议，项服务端发送一个CONNECT命令帧
 
 
服务端接收后，返回一个CONNECTED命令帧
 
 
客户端向服务端发送SUBSCRIBE命令帧
 
 在此命令帧中，客户端提供需要订阅的目的地地址。
 
 
消息推送与确认
 
服务端推送消息
 
 服务端，通过MESSAGE命令帧，向客户端推送数据。
 

 消息内容如下所示
 
 
客户端确认收到消息
 
 客户端收到消息后，向服务端发送一个ack消息，用于确认该消息已收到。
 

 至此，完成Websocket连接建立分析操作。