基于HTML5的websocket实现

基于HTML5的WebSocket实现邵天岑JAVA组时间：[e-mail]途谱（上海）信息科技有限公司目录1、WebSocket的基本概念及其解决的问题2、WebSocket的基本原理和编程接口3、WebSocket实例应用4、WebSocket的支持状况、局限性以及未来的展望5、常见问题1、WebSocket的基本概念及其解决的问题（1）、Web应用的窘境（2）、Web应用实时通信技术（3）、WebSocket基本概念及其解决的问题1.1、Web应用的窘境这种机制对于信息变化不是特别频繁的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线游戏、在线证券、设备监控、新闻在线播报、RSS订阅推送等等，当客户端浏览器准备呈现这些信息的时候，这些信息在服务器端可能已经过时了。1.2、Web应用实时通信技术（1）、轮询(Polling)技术（2）、Comet技术①、长轮询机制②、流技术1.2.1、轮询(Polling)技术这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。1.2.2、Comet技术（1）、长轮询机制这种方式从某种程度上减小了网络带宽和CPU利用率等问题。但是，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能提高。长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。1.2.2、Comet技术（2）、流技术这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。1.2、Web应用实时通信技术总结：综合这几种方案，我们会发现，这些目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用Ajax方式来模拟实时的效果，在每次客户端和服务器端交互的时候都是一次HTTP的请求和应答的过程，而每一次的HTTP请求和应答都带有完整的HTTP头信息，这就增加了每次传输的数据量，而且这些方案中客户端和服务器端的编程实现都比较复杂，在实际的应用中，为了模拟比较真实的实时效果，开发人员往往需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯，一个连接用来处理客户端到服务器端的数据传输，一个连接用来处理服务器端到客户端的数据传输，这不可避免地增加了编程实现的复杂度，也增加了服务器端的负载，制约了应用系统的扩展性。1.3、WebSocket基本概念及其解决的问题（1）、WebSocket的基本概念WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC6455，WebSocketAPI被W3C定为标准。在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。1.3、WebSocket基本概念及其解决的问题（2）、WebSocket解决的问题HTML5WebSocket设计出来的目的就是要取代轮询和Comet技术，使客户端浏览器具备像C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。因为WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及Comet技术比较，具有很大的性能优势。1.3、WebSocket基本概念及其解决的问题（2）、WebSocket解决的问题Websocket.org网站对传统的轮询方式和WebSocket调用方式作了一个详细的测试和比较，将一个简单的Web应用分别用轮询方式和WebSocket方式来实现，在这里引用一下他们的测试结果图：通过这张图可以清楚的看出，在流量和负载增大的情况下，WebSocket方案相比传统的Ajax轮询方案有极大的性能优势。2、WebSocket的基本原理和编程接口（1）、WebSocket的基本原理（2）、WebSocket的编程接口①、WebSocketapi（HTML5前端）②、JavaapiforWebSocket（Java后台）2.1、WebSocket的基本原理（1）、HTTP握手+TCP数据传输（2）、握手过程（3）、数据传输过程2.1.1、HTTP握手+TCP数据传输客户端和服务端建立websocket连接的过程：（1）、客户端浏览器首先要向服务器发起一个HTTP请求，然后等待服务器响应。需要说明的是：这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息”Upgrade:WebSocket”表明这是一个申请协议升级的HTTP请求。（2）、服务器解析这些附加的头信息，然后返回握手响应，告诉浏览器将后续的数据按照WebSocket指定的数据格式传过来。此时，客户端和服务器端的WebSocket连接就建立起来了。（3）、客户端和服务器有任何需要传递的数据的时候，可以通过这个连接通道自由的传递信息。（4）、这个连接会持续存在，直到客户端或者服务器端的某一方主动的关闭连接。2.1.2、握手的过程这是一个握手过程的例子：（1）、Upgrade：表示的意思是“客户端准备使用websocket协议进行通信，服务端如果支持的话，咱们就换websocket协议吧！”。（2）、sec-websocket-version：是指浏览器支持的websocket版本号。需注意的是这里不会出现9-12的版本号，因为websocket协议规定9-12是保留字段。（3）、sec-websocket-key：是一种验证服务端是不是支持websocket的验证算法。与Response中的sec-websocket-accept是对应的。（4）、sec-websocket-accept与sec-websocket-key的对应算法是：sec-websocket-accept=base64(hsa1(sec-websocket-key+258EAFA5-E914-47DA-95CA-C5AB0DC85B11))如果返回的sec-websocket-accept不对，在chrome下会出现Sec-WebSocket-Acceptdismatch的错误。（5）、HTTPStaus：Response返回的是101，代表服务端说“我们双方后面就按照websocket协议来进行数据传输吧！”。2.1.3、数据传输的过程websocket的数据传输是frame形式传输的，比如会将一条消息分为几个frame，按照先后顺序传输出去，（具体的协议标准可以参考rfc6455）。这样做会有几个好处：1、大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。2、和http的chunk一样，可以边生成数据边传递消息，即提高传输效率。另外需要说明的是：1、客户端向服务器传输的数据帧必须进行掩码处理：服务器若接收到未经过掩码处理的数据帧，则必须主动关闭连接。2、服务器向客户端传输的数据帧一定不能进行掩码处理。客户端若接收到经过掩码处理的数据帧，则必须主动关闭连接。针对上情况，发现错误的一方可向对方发送close帧（状态码是1002，表示协议错误），以关闭连接。2.1.3、数据传输的过程传输协议：读取数据需要按照这个格式读取，发送数据也需要按照这个格式发送返回。2.2、WebSocket的编程接口（1）、WebSocketAPI（HTML5前端）客户端浏览器对WebSocket协议的处理，需要做以下三件事：1、建立连接和断开连接2、发送数据和接收数据3、处理错误2.2、WebSocket的编程接口（2）、JavaapiforWebSocket（Java后台）①、在服务器方面，网上都有不同对websocket支持的服务器：php-://jetty.codehaus.org/jetty/（版本7开始支持websocket）netty-://github.com/gimite/web-socket-rubyKaazing-://tomcat.apache.org/（7.0.27支持websocket，建议用tomcat8，7.0.27中的接口已经过时）WebLogic-（12.1.2开始支持）node.js-://socket.ionginx-://mojolicio.us/python-://github.com/stephenmcd/django-socketio2.2、WebSocket的编程接口②、tomcat对webSocket的支持：a、tomcat从7.0.27版本开始，支持webSocket协议，不过，它使用的是其内部专有的webSocketAPI实现的，依赖于容器，可移植性比较差；b、tomcat从7.0.47版本开始，便废弃了内部专有的webSocketAPI，开始支持JSR356（JAVAAPIforwebSocekt）。需注意的是，这个版本对webSocekt的实现需要JDK的版本为7或以上，并且需要引入javaee-apijar包，其maven依赖如下：dependencygroupIdjavax/groupIdartifactIdjavaee-api/artifactIdversion7.0/versionscopeprovided/scope/dependency2.2、WebSocket的编程接口③、在Java中使用WebSockets在Java社区中下面的情形很普遍，不同的供应商和开发者编写类库来使用某项技术，一段时间之后当该技术成熟时它就会被标准化，来使开发者可以在不同实现之间互相操作，而不用冒供应商锁定的风险。当JSR365启动时，WebSocket就已经有了超过20个不同的Java实现。它们中的大多数都有着不同的API。JSR356是把Java的WebSocketAPI进行标准化的成果。开发者们可以撇开具体的实现，直接使用JSR356API来创建WebSocket应用。WebSocketAPI是完全由事件驱动的。2.2、WebSocket的编程接口④、JSR356--WebSockets的JavaAPIJSR356，规定了开发者把WebSockets整合进他们的应用时可以使用的J