一.WebSocket简介
Websocket是html5规范的一部分，借鉴了socket的思想，实现了客户端与服务端的全双工通信机制。
在socket中，我们只需要在某个应用程序的一端(服务端)创建一个socket实例，并且提供它想要的来连接的另一端(客户端)的IP地址个端口，这样就可以实现服务端对客户端的通讯；当客户端也创建一个socket实例来连接服务端时候，就建立里一个端对端的TCP连接，在该连接上就可以双向通讯了，并且一旦该连接建立后，就没有客户端服务端之分了，其实从本质上讲， socket并不是一种协议，而是对TCP/IP协议族通讯机制的一种封装。
二.Websocket之前的消息推送技术
1）Ajax轮询：让浏览器每隔几秒发送一个请求，询问服务器是否有新消息。
（1）Ajax轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
优点：简单，及时，易操作。
缺点：请求中很多是无用，浪费带宽和服务器资源。
/*setIntreval():定时运行指定函数*/
window.setInterval(function(){
$.ajax({
url: 'server',
dataType: 'json',
success: function (res) {
console.log(res);
}
});
},1000);
（2）基于Ajax技术的长轮询：
$(function () {
(function longpolling() {
$.ajax({
url:"service",
dataType:"json",
timeout:5000,//超时时间
success:function(res){
console.log(res);
longpolling();//回调函数，实现与服务器的长连接
},
error:function (res) {
longpolling();
}
});
});
});
此时服务端代码，则如下，在第一次Ajax请求结束后，第二次请求就立即到位，进入下面的判断中
if ('客户端发送请求' && '服务端有数据可以返回') {
'返回数据给客户端';
'客户端通过Ajax继续发起请求，然后继续if判断';
}else{
'没有数据可以返回，再次执行一次if判断';
}
2）iframe方式:通过隐藏的ifame向服务器不断拉取数据，然后将iframe获取到的数据进行处理即可。
（1）普通iframe方式轮询：每一次的轮询都是在上一次的iframe基础上进行的，会叫停上一次的iframe请求
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
$(function () {
//每5s运行一次函数
window.setInterval(function(){
$("#logs").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text() + " ]<br/>");
$("#frame").attr("src", "${pageContext.request.contextPath}/service?timed=" + new Date().getTime());
//延迟1s再重新请求，通过frame页面的重新加载实现
window.setTimeout(function () {
window.frames["polling"].location.reload();
},1000);
},5000);
});
</script>
<body>
<iframe id="frame" name="polling" style="display: none"> </iframe>
<div id="logs"></div>
</body>
（2）长连接iframe轮询方式：每一次的请求都有自己独立的iframe,由于是异步，会造成顺序打乱，耗费资源
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
$(function () {
window.setInterval(function () {
//iframe求路径,每次加载时候重新创建一个iframe用于请求数据
var url = "${pageContext.request.contextPath}/communication/user/ajax.mvc?timed=" + new Date().getTime();
var $iframe = $('<iframe id="frame" name="polling" style="display: none;" src="' + url + '"></iframe>');
$("body").append($iframe);
$iframe.load(function () {
$("#logs").append("[data: " + $($iframe.get(0).contentDocument).find("body").text() + " ]<br/>");
//将ifame移除
$iframe.remove();
});
},5000);
});
</script>
<body>
<div id="logs"></div>
</body>
三.WebSocket
WebSocket是HTML5提出的一种协议；目前除了IE浏览器，其他浏览器都基本支持。WebSocket与http协议一样，也是基于TCP协议的。
HTML5 规范定义了Web Sockets API，支持页面使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道，通过一个单一的套接字在Web上进行操作。HTML5 Web Sockets以最小的开销高效地提供了Web连接。相较于经常需要使用推送实时数据到客户端甚至通过维护两个HTTP连接来模拟全双工连接的旧的轮询或长轮询（Comet）来说，这就极大的减少了不必要的网络流量与延迟。
要使用HTML5 Web Sockets从一个Web客户端连接到一个远程端点，你要创建一个新的WebSocket实例并为之提供一个URL来表示你想要连接到的远程端点。该规范定义了ws://以及wss://模式来分别表示WebSocket和安全WebSocket连接,这就跟http:// 以及https:// 的区别是差不多的。一个WebSocket连接是在客户端与服务器之间HTTP协议的初始握手阶段将其升级到Web Socket协议来建立的，其底层仍是TCP/IP连接。
1.websocket是基于http协议的，在首次 建立连接的时候也是借用的http协议完成一部分握手操作的。
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
其中的Upgrade: websocket；Connection: Upgrade就是告诉服务器，这次的协议是websocket；
然后服务器返回：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
这时候服务器已经将协议升级为websocket协议了，上面的使用的是http协议通信完成的称为websocket握手协议。
在建立连接后，WebSocket服务器端和客户端都能主动向对方发送或接收数据，就像Socket一样。
2.websocket的创建和常用属性方法
WEB API 接口：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
1）创建websocket对象
//url为指定连接的URL, [protocol]为可选的子协议
var websocket = new Websocket(url, [protocol]);
2）常用属性
websocket.readyState:只读属性 readyState 表示连接状态;0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
websocket.bufferedAmount:只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数.
3）常用事件
websocket.open:连接建立时候触发
websocket.message:客户端接收服务端数据时触发
websocket.error:通信发生错误时触发
websocket.close:连接关闭时触发
4）常用方法
websocket.send():使用连接发送数据
websocket.close():关闭连接
四.WebSocket与HTTP、Socket的区别
1.WebSocket与HTTP
image.png
相同点:
1）都是一样基于TCP的，都是可靠性传输协议。
2）都是应用层协议。
不同点:
1）WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息。HTTP是单向的。
2）WebSocket是需要浏览器和服务器握手进行建立连接的。而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接。
联系：WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。
2.WebSocket与Socket
image.png
1）Socket其实并不是一个协议，而是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。
2）WebSocket就像HTTP一样，则是一个典型的应用层协议。。
网友评论