websocket材料总结

之前的项目中运用了websocket、socketJS，趁此机会将一些知识点及材料举行整顿总结。正所谓温故而知新~
本文源地点： http://lsxj615.com/2016/08/14&＃8230;

websocket是什么

根据通例，在运用之前，先相识一下观点。

websocket是在html5中供应了一种浏览器和服务器间举行全双工通讯的网络手艺。

浏览器向服务端发送一个要求，经由过程报文头部Upgrade来表明须要从HTTP切换至Websocket协定。

GET ws://echo.websocket.org/?encoding=text HTTP/1.1
Origin: http://websocket.org
COOKIE: __utma=99as
Connection: Upgrade
Host: echo.websocket.org
Sec-WebSocket-Key: uRovscZjNol/umbTt5uKmw==
Upgrade: websocket
Sec-WebSocket-Version: 13


假如服务端明白websocket协定，它也是经由过程报文Upgrade从HTTP转换为Websocket协定。

HTTP/1.1 101 WebSocket Protocol Handshake
Date: Fri, 10 Feb 2012 17:38:18 GMT
Connection: Upgrade
Server: Kaazing Gateway
Upgrade: WebSocket
Access-Control-Allow-Origin: http://websocket.org
Access-Control-Allow-Credentials: true
Sec-WebSocket-Accept: rLHCkw/SKsO9GAH/ZSFhBATDKrU=
Access-Control-Allow-Headers: content-type


这个时刻就竖立起了websocket衔接，基于TCP/IP。运用端口与HTTP(80)和HTTPS(443)一样。

为何要用websocket？

晓得了什么是websocket，那末为何要运用websocket呢？除了websocket以外，浏览器举行立即通讯的体式格局另有以下几种：

• 按期查询
  每隔一个时间段就向服务器发送一个要求，要求服务器的最新数据再举行更新。但如许做的效果就是糟蹋大批流量，对服务端造成了庞大压力。

• Comet
  基于http长衔接的“服务器推”手艺。客户端与服务器端坚持一个长衔接，只要客户端须要的数据更新时，服务器才主动将数据推送给客户端。有两种情势：

  • 基于Ajax的长轮询（long-polling）体式格局
    浏览器发出XMLHttpRequest要求，服务器端吸收到要求后，会壅塞要求直到有数据或许超时才返回，浏览器在处置惩罚要求返回信息（超时或有用数据）后再次发出要求，从新竖立衔接。在此期间服务器端能够已经有新的数据抵达，服务器会挑选把数据保留，直到从新竖立衔接，浏览器会把一切数据一次性取回。

  • 基于Iframe及htmlfile的流（http streaming）体式格局
    平常的做法是在页面中嵌入一个隐蔽的iframe,然后让这个iframe的src属性指向我们要求的一个服务端地点，而且为了数据更新，我们将页面上数据更新操纵封装为一个js函数，将函数名当作参数通报到这个地点当中。服务端收到要求后剖析地点掏出参数（客户端js函数挪用名），每当有数据更新的时刻，返回对客户端函数的挪用，而且将要跟新的数据以js函数的参数填入到返回内容当中，比方返回“”如许一个字符串，意味着以data为参数挪用客户端update函数举行客户端view更新。

  当运用程序有高吞吐量的需求，Comet的长轮询就不合适了。

• SSE
  SSE(服务端推送事宜)是一种许可服务端向客户端推送新数据的HTML5手艺。与websocket比拟，WebSocket相较SSE最大的上风在于它是双向交流的，这意味向服务端发送数据就像从服务端吸收数据一样简朴。用SSE时，平常经由过程一个自力的Ajax要求从客户端向服务端传送数据。相对于WebSocket，如许运用Ajax会增添开支，但也就多一点点罢了。

比拟于中断的轮询或长轮询来模仿全双工衔接的处理体式格局，Websocket极大的减少了不必要的网络流量和耽误。除此以外，Websocket-based的运用减轻了服务器的累赘，让现有的机械能支撑更多的并发衔接。以下图所示：

怎样运用websocket

【以下例子来源于http://www.websocket.org/abou&＃8230;】
只须要建立一个新的Websocket实例，供应一个URL，这个URL示意的是你愿望衔接的谁人end-point。以下所示。
须要注重的是: ws://和wss://的前缀示意了Websokcet和平安协定的Websocket衔接。


var myWebsocket = new Websocket("ws://www.websocket.org");


在衔接到一个端点发送音讯之前，你能够将一系列的事宜监听器来处置惩罚衔接的生命周期的每一个阶段。以下所示：

myWebSocket.Onopen= function(evt) {
alert("Connection open ...");
};
myWebSocket.Onmessage= function(evt) {
alert( "Received Message: " + evt.data);
};
myWebSocket.Onclose= function(evt) {
alert("Connection closed.");
};


向服务端发送信息，只须要简朴的send并供应你愿望通报的内容。发送信息后，close停止衔接。以下所示：


myWebSocket.send("Hello WebSockets!");
myWebSocket.close();


socketJS

我们都晓得，webscoket是HTML5的新玩意，那末兼容性方面，以下图所示：

能够看出IE8以及Android 4.3是不支撑的。这个时刻，我们就能够来看看socketJS的上风了。

SockJS is a browser Javascript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.

socketJS的一大优点在于供应了浏览器兼容性。优先运用原生websocket，假如在不支撑websocket的浏览器中，会自动降为轮询的体式格局。
除此以外，spring也对socketJS供应了支撑。假如代码中添加了withSockJS()以下，服务器也会自动降级为轮询。

registry.addEndpoint("/coordination").withSockJS();


怎样运用socketJS


var sock = new SockJS('/coordination');
sock.Onopen= function() {
console.log('open');
};
sock.Onmessage= function(e) {
console.log('message', e.data);
};
sock.Onclose= function() {
console.log('close');
};
sock.send('test');
sock.close();


更多内容，可检察github地点：https://github.com/sockjs/soc&＃8230;

什么是Stomp

经由过程以上部份我们能够晓得websocket的上风，兼容性的题目socketJS也帮我们处理了。不过这个时刻，我还要安利一个好东西，也就是Stomp。

STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can communicate with any STOMP message broker to provide easy and widespread messaging interoperability among languages and platforms (the STOMP web site has a list of STOMP client and server implementations.

具体内容，可检察官网：http://jmesnil.net/stomp-webs&＃8230;。或许等我下一篇文章详谈吧~

参考材料：

1. Spring WebSocket教程（一）

2. WebSocket详解（一）：开端熟悉WebSocket手艺

3. STOMP Over WebSocket

4. sockjs/sockjs-client

5. Spring websocket 运用

6. Web端立即通讯手艺清点：短轮询、Comet、Websocket、SSE

7. websocket官网About HTML5 WebSocket