websocket技术分享

websocket进阶

开发环境：

spring3+tomcat7+spring-websocket4 + spring security3

运行环境：

windows、Linux

 

一、背景：

产品将要发布的消息或其他需要让客户提前知道的消息，在客户端和服务端建立连接后推送

给客户端。

 

二、WebSocket是什么

WebSocket协议是基于TCP的一种新的网络协议。

 

三、WebSocket身世挖掘

1、WebSocket是HTML5出的东西（协议），跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已

 

2、HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个

 

3、Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说

 

4、典型的Websocket握手

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Version: 13

Origin: http://example.com

 

5、实现了websocket的浏览器

 

Chrome	Supported in version 4+
Firefox	Supported in version 4+
Opera	Supported in version 10+
Safari	Supported in version 5+
IE(Internet Explorer)	Supported in version 10+

 

 

 

 

 

 

 

 

四、WebSocket的特点

1、长连接，实现双向通信， 具有底层socket的特点，实现真正意义上的推送功能。

2、是HTML5的技术之一，具有巨大的应用前景

3、节约带宽，节省服务器资源

缺点：

少部分浏览器不支持，浏览器支持的程度与方式有区别

 

五、WebSocket如何用

前端代码：

 1 var DJCW_webSocket = (function(){
 2     var webSocket = null,
 3         tryTime = 0,
 4         initSocket;
 5     
 6     initSocket = function(){
 7         debugger
 8         var _marquee = "<marquee behavior='scroll' direction='left' behavior='scroll'>";
 9         
10         if (!window.WebSocket) {
11             alert("您的浏览器不支持websocket！");
12             return false;
13         }
14 
15         webSocket = new WebSocket('ws://127.0.0.1:8082/projectname/websocket');
16 
17         // 收到服务端消息
18         webSocket.onmessage = function(msg) {
19             DJCW.messagesScroll(msg.data);
20         };
21 
22         // 异常
23         webSocket.onerror = function(event) {};
24 
25         // 建立连接