Java（16）
WebSocket介绍与原理
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。
——百度百科
目的：即时通讯，替代轮询
网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。
HTTP协议是非持久化的，单向的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。当需要即时通讯时，通过轮询在特定的时间间隔（如1秒），由浏览器向服务器发送Request请求，然后将最新的数据返回给浏览器。这样的方法最明显的缺点就是需要不断的发送请求，而且通常HTTP request的Header是非常长的，为了传输一个很小的数据 需要付出巨大的代价，是很不合算的，占用了很多的宽带。
缺点：会导致过多不必要的请求，浪费流量和服务器资源，每一次请求、应答，都浪费了一定流量在相同的头部信息上
然而WebSocket的出现可以弥补这一缺点。在WebSocket中，只需要服务器和浏览器通过HTTP协议进行一个握手的动作，然后单独建立一条TCP的通信通道进行数据的传送。
WebSocket同HTTP一样也是应用层的协议，但是它是一种双向通信协议，是建立在TCP之上的。
连接过程 —— 握手过程
1. 浏览器、服务器建立TCP连接，三次握手。这是通信的基础，传输控制层，若失败后续都不执行。2. TCP连接成功后，浏览器通过HTTP协议向服务器传送WebSocket支持的版本号等信息。（开始前的HTTP握手）3. 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。4. 当收到了连接成功的消息后，通过TCP通道进行传输通信。
WebSocket与HTTP的关系
1. 都是一样基于TCP的，都是可靠性传输协议。2. 都是应用层协议。
1. WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息。HTTP是单向的。2. WebSocket是需要握手进行建立连接的。
WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。
WebSocket与Socket的关系
Socket其实并不是一个协议，而是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。
Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。
当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。
WebSocket则是一个典型的应用层协议。
Socket是传输控制层协议，WebSocket是应用层协议。
HTML5与WebSocket的关系
WebSocket API 是 HTML5 标准的一部分， 但这并不代表 WebSocket 一定要用在 HTML 中，或者只能在基于浏览器的应用程序中使用。
实际上，许多语言、框架和服务器都提供了 WebSocket 支持，例如：
* 基于 C 的 libwebsocket.org* 基于 Node.js 的 Socket.io* 基于 Python 的 ws4py* 基于 C++ 的 WebSocket++* Apache 对 WebSocket 的支持： Apache Module mod_proxy_wstunnel* Nginx 对 WebSockets 的支持： NGINX as a WebSockets Proxy 、 NGINX Announces Support for WebSocket Protocol 、WebSocket proxying* lighttpd 对 WebSocket 的支持：mod_websocket
WebSocket 机制
以下简要介绍一下 WebSocket 的原理及运行机制。
WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在 TCP 之上，同 HTTP 一样通过 TCP 来传输数据，但是它和 HTTP 最大不同是：
WebSocket 是一种双向通信协议，在建立连接后，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据，就像 Socket 一样；
WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。
非 WebSocket 模式传统 HTTP 客户端与服务器的交互如下图所示：
图 1. 传统 HTTP 请求响应客户端服务器交互图
使用 WebSocket 模式客户端与服务器的交互如下图：
图 2.WebSocket 请求响应客户端服务器交互图
上图对比可以看出，相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式，WebSocket 是类似 Socket 的 TCP 长连接的通讯模式，一旦 WebSocket 连接建立后，后续数据都以帧序列的形式传输。在客户端断开 WebSocket 连接或 Server 端断掉连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。
我们再通过客户端和服务端交互的报文看一下 WebSocket 通讯与传统 HTTP 的不同：
在客户端，new WebSocket 实例化一个新的 WebSocket 客户端对象，连接类似 ws://yourdomain:port/path 的服务端 WebSocket URL，WebSocket 客户端对象会自动解析并识别为 WebSocket 请求，从而连接服务端端口，执行双方握手过程，客户端发送数据格式类似：
清单 1.WebSocket 客户端连接报文
GET /webfin/websocket/ HTTP/1.1
Host: localhost
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xqBt3ImNzJbYqRINxEFlkg==
Origin: :8080
Sec-WebSocket-Version: 13
可以看到，客户端发起的 WebSocket 连接报文类似传统 HTTP 报文，”Upgrade：websocket”参数值表明这是 WebSocket 类型请求，“Sec-WebSocket-Key”是 WebSocket 客户端发送的一个 base64 编码的密文，要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept”应答，否则客户端会抛出“Error during WebSocket handshake”错误，并关闭连接。
服务端收到报文后返回的数据格式类似：
清单 2.WebSocket 服务端响应报文
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: K7DJLdLooIwIG/MOpvWFB3y3FE8=
“Sec-WebSocket-Accept”的值是服务端采用与客户端一致的密钥计算出来后返回客户端的,“HTTP/1.1 101 Switching Protocols”表示服务端接受 WebSocket 协议的客户端连接，经过这样的请求-响应处理后，客户端服务端的 WebSocket 连接握手成功, 后续就可以进行 TCP 通讯了。
在开发方面，WebSocket API 也十分简单，我们只需要实例化 WebSocket，创建连接，然后服务端和客户端就可以相互发送和响应消息，在下文 WebSocket 实现及案例分析部分，可以看到详细的 WebSocket API 及代码实现。
WebSocket 实现
如上文所述，WebSocket 的实现分为客户端和服务端两部分，客户端（通常为浏览器）发出 WebSocket 连接请求，服务端响应，实现类似 TCP 握手的动作，从而在浏览器客户端和 WebSocket 服务端之间形成一条 HTTP 长连接快速通道。两者之间后续进行直接的数据互相传送，不再需要发起连接和相应。
以下简要描述 WebSocket 服务端 API 及客户端 API。
WebSocket 服务端 API
WebSocket 服务端在各个主流应用服务器厂商中已基本获得符合 JEE JSR356 标准规范 API 的支持，以下列举了部分常见的商用及开源应用服务器对 WebSocket Server 端的支持情况：
表 1.WebSocket 服务端支持
应用服务器
WebSphere 8.0 以上版本支持，7.X 之前版本结合 MQTT 支持类似的 HTTP 长连接
WebLogic 12c 支持，11g 及 10g 版本通过 HTTP Publish 支持类似的 HTTP 长连接
IIS 7.0+支持
Tomcat 7.0.5＋支持，7.0.2X 及 7.0.3X 通过自定义 API 支持
Jetty 7.0＋支持
以下我们使用 Tomcat7.0.5 版本的服务端示例代码说明 WebSocket 服务端的实现：
JSR356 的 WebSocket 规范使用 javax.websocket.*的 API，可以将一个普通 Java 对象（POJO）使用 @ServerEndpoint 注释作为 WebSocket 服务器的端点，代码示例如下：
清单 3.WebSocket 服务端 API 示例
@ServerEndpoint(&/echo&)
public class EchoEndpoint {
public void onOpen(Session session) throws IOException {
//以下代码省略...
@OnMessage
public String onMessage(String message) {
//以下代码省略...
@Message(maxMessageSize=6)
public void receiveMessage(String s) {
//以下代码省略...
public void onError(Throwable t) {
//以下代码省略...
public void onClose(Session session, CloseReason reason) {
//以下代码省略...
代码解释：
上文的简洁代码即建立了一个 WebSocket 的服务端，@ServerEndpoint(&/echo&) 的 annotation 注释端点表示将 WebSocket 服务端运行在 ws://[Server 端 IP 或域名]:[Server 端口]/websockets/echo 的访问端点，客户端浏览器已经可以对 WebSocket 客户端 API 发起 HTTP 长连接了。
使用 ServerEndpoint 注释的类必须有一个公共的无参数构造函数，@onMessage 注解的 Java 方法用于接收传入的 WebSocket 信息，这个信息可以是文本格式，也可以是二进制格式。
OnOpen 在这个端点一个新的连接建立时被调用。参数提供了连接的另一端的更多细节。Session 表明两个 WebSocket 端点对话连接的另一端，可以理解为类似 HTTPSession 的概念。
OnClose 在连接被终止时调用。参数 closeReason 可封装更多细节，如为什么一个 WebSocket 连接关闭。
更高级的定制如 @Message 注释，MaxMessageSize 属性可以被用来定义消息字节最大限制，在示例程序中，如果超过 6 个字节的信息被接收，就报告错误和连接关闭。
注意：早期不同应用服务器支持的 WebSocket 方式不尽相同，即使同一厂商，不同版本也有细微差别，如
Tomcat 服务器 7.0.5 以上的版本都是标准 JSR356 规范实现，而 7.0.2x/7.0.3X 的版本使用自定义 API （WebSocketServlet 和 StreamInbound， 前者是一个容器，用来初始化 WebSocket 环境；后者是用来具体处理 WebSocket 请求和响应，详见案例分析部分），且 Tomcat7.0.3x
与 7.0.2x 的 createWebSocketInbound 方法的定义不同，增加了一个 HttpServletRequest 参数，使得可以从 request 参数中获取更多 WebSocket 客户端的信息，如下代码所示：
清单 4.Tomcat7.0.3X 版本 WebSocket API
public class EchoServlet extends WebSocketServlet {
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest request) {
//以下代码省略....
return new MessageInbound() {
//以下代码省略....
protected void onBinaryMessage(ByteBuffer buffer)
throws IOException {
//以下代码省略...
protected void onTextMessage(CharBuffer buffer) throws IOException {
getWsOutbound().writeTextMessage(buffer);
//以下代码省略...
因此选择 WebSocket 的 Server 端重点需要选择其版本，通常情况下，更新的版本对 WebSocket 的支持是标准 JSR 规范 API，但也要考虑开发易用性及老版本程序移植性等方面的问题，如下文所述的客户案例，就是因为客户要求统一应用服务器版本所以使用的 Tomcat 7.0.3X 版本的 WebSocketServlet 实现，而不是 JSR356 的 @ServerEndpoint 注释端点。
WebSocket 客户端 API
对于 WebSocket 客户端，主流的浏览器（包括 PC 和移动终端）现已都支持标准的 HTML5 的 WebSocket API，这意味着客户端的 WebSocket JavaScirpt 脚本具备良好的一致性和跨平台特性，以下列举了常见的浏览器厂商对 WebSocket 的支持情况：
表 2.WebSocket 客户端支持
Chrome version 4+支持
Firefox version 5+支持
IE version 10+支持
IOS 5+支持
Android Brower
Android 4.5+支持
客户端 WebSocket API 基本上已经在各个主流浏览器厂商中实现了统一，因此使用标准 HTML5 定义的 WebSocket 客户端的 JavaScript API 即可，当然也可以使用业界满足 WebSocket 标准规范的开源框架，如 Socket.io。
以下以一段代码示例说明 WebSocket 的客户端实现：
清单 5.WebSocket 客户端 API 示例
var ws = new WebSocket(“ws://echo.websocket.org”);
ws.onopen = function(){ws.send(“Test!”); };
ws.onmessage = function(evt){console.log(evt.data);ws.close();};
ws.onclose = function(evt){console.log(“WebSocketClosed!”);};
ws.onerror = function(evt){console.log(“WebSocketError!”);};
第一行代码是在申请一个 WebSocket 对象，参数是需要连接的服务器端的地址，同 HTTP 协议开头一样，WebSocket 协议的 URL 使用 ws://开头，另外安全的 WebSocket 协议使用 wss://开头。
第二行到第五行为 WebSocket 对象注册消息的处理函数，WebSocket 对象一共支持四个消息 onopen, onmessage, onclose 和 onerror，有了这 4 个事件，我们就可以很容易很轻松的驾驭 WebSocket。
当 Browser 和 WebSocketServer 连接成功后，会触发 onopen 消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser 会触发 onerror 消息；当 Browser 接收到 WebSocketServer 发送过来的数据时，就会触发 onmessage 消息，参数 evt 中包含 Server 传输过来的数据；当 Browser 接收到 WebSocketServer 端发送的关闭连接请求时，就会触发 onclose 消息。我们可以看出所有的操作都是采用异步回调的方式触发，这样不会阻塞
UI，可以获得更快的响应时间，更好的用户体验。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：56760次
积分：1263
积分：1263
排名：千里之外
原创：60篇
转载：69篇
(2)(6)(4)(2)(4)(1)(3)(8)(5)(1)(4)(4)(2)(6)(1)(4)(5)(11)(3)(11)(8)(6)(2)(4)(13)(10)(1)更多公众号：gh_fba前端小白变怪兽最新文章相关作者文章搜狗：感谢您阅读WebSocket实战 | 有用功，本文由网友投稿产生，如果侵犯了您的相关权益，请联系管理员。WebSocket和长连接的区别 - 博客频道 - CSDN.NET
分类：Java基础
长连接应该是，客户端往服务器端发送一个http请求，然后服务端等到任务完成之后才返回。这个任务完成的时间可以是几个小时，而一般的http请求得到返回的时间没那么长。客户端得到服务器端返回的信息之后，马上又发一个请求，然后服务器端继续前面的事情，也就是不立即返回，等有了新的信息之后再返回。
websocket是指客户端和服务器之间建立一个websockt连接，然后客户端可以给服务器发信息，服务器也可以给客户端发信息。从行为上来说，对比长连接，服务器的不需要把请求hold住，而客户端也不需要接收一次信息后再立刻发送请求。
在没有websocket之前，只有长连接可以选择。
排名：第5976名
（108）（80）（9）（8）（13）（42）（1）（1）（17）（21）（18）（14）（2）（21）（22）（6）（2）（1）（16）（5）（7）（8）（2）（2）（1）（1）（2）（4）（0）（3）（7）（6）（1）（1）（1）（1）（1）（1）还没有帐号？ 赶紧
用户版块帖子
Jack 张   讲：HTML5 中websocket 长连接的具体实现方法
UID：84894
HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。Socket又称为套接字，是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常情况下，Socket用于描述IP地址和端口，是通信过程中的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时，通过通信中的字符句柄，实现不同端口对应不同应用服务功能。目前，大部分浏览器都支持HTML5中Socket API的运行。 WebSocket连接服务器和客户端，这个链接是一个实时的长连接，服务器端一旦与客户端建立了双向链接，就可以将数据推送到Socket中，客户端只要有一个Socket绑定的地址和端口与服务器建立联系，就可以接收推送来的数据。 WebSocket API 的使用分为以下几个步骤： 步骤1、 创建连接，新建一个WebSocket对象十分的方便，代码如下：var host = &ws://echo.websocket.org/&;var socket=new WebSocket(host);注意：其中，URL必须以“ws”字符开头，剩余部分可以使用像HTTP地址一样来编写。该地址没有使用HTTP协议写法，因为它的属性为WebSocket URL;URL必须由4个部分组成，分别是通信标记（ws）、主机名称（host），端口号（port）及WebSocket Server. 步骤2，发送数据。当WebSocket对象与服务器建立联系后，使用如下代码发送数据：socket.send(dataInfo);注意：其中，objWs为新创建的WebSocket对象，send()方法中的dataInfo参数为字符类型，即只能使用文本数据或者将JSON对象转换成文本内容的数据格式。 步骤3，接收数据。客户端添加事件机制接收服务器发送来的数据，代码如下： socket.onmessage=function(event){&&&&//弹出收到的信息&&&&alert(event.data);&&&&//其他代码}其中，通过回调函数中event对象的&data&属性来获取服务器端发送的数据内容，该内容可以是一个字符串或者JSON对象。 步骤4 状态标志。通过WebSocket对象的“readyState”属性记录连接过程中的状态值。&readyState&属性是一个连接的状态标志，用于获取WebSocket对象在连接，打开，变比中和关闭时的状态。该状态标志共有4中属性值，如下表所示：
————————————————————————————————————&&&&属性值&&&&&&&&属性常量&&&&&&&&描述————————————————————————————————————&&&&0&&&&&&&&CONNECTING&&&&&&&&连接尚未建立&&&&&&&&1&&&&&&&&OPEN&&&&&&&&&&&&WebSocket的链接已经建立&&&&2&&&&&&&&CLOSING&&&&&&&&&&&&连接正在关闭&&&&3&&&&&&&&CLOSED&&&&&&&&&&&&连接已经关闭或不可用———————————————————————————————————— WebSocket对象在连接过程中，通过侦测这个状态标志的变化，可以获取服务器端与客户端连接的状态，并将连接状态已状态码形式返回给客户端。 步骤5 关闭socket连接。
socket.close(); ————————————————————————————————————————————————————————————————在实际应用中，socket服务器端的代码可以是Python，node.js,java,php。在这里我可以使用网站提供的，socket服务端。协议地址为：ws://echo.websocket.org/完整代码如下：————————————————————————————————————————————————————————————————&html&&head&&title&Jack张WebSocket实例&/title& &style& html,body{font:normal 14margin:0} #log {width:440 &&&&&&&&&&&&height:270 &&&&&&&&&&&&text-align:&&&&&&&&&&&&overflow:margin:0&&&&&&&&&&&&font-weight:color:#F8F8F8;&&&&&&&&&&&&} #msg {width:330margin:0} #imagebg{&&&&background-image: url(images/images.jpg);&&&&background-repeat: no-&&&&background-position:&&&&height:643&&&&overflow:&&&&text-align:&&&&padding-top:120} &/style& &script&//声明一个socket//初始化方法function init(){&&var host = &ws://echo.websocket.org/&;//声明host注意：是ws协议&&try{&&&&socket = new WebSocket(host);//新创建一个socket对象&&&&log('WebSocket - status '+socket.readyState);//将连接的状态信息显示在log&&&&socket.onopen&&&&= function(msg){ log(&Welcome - status &+this.readyState); };//监听打开连接&&&&socket.onmessage = function(msg){ log(&Received: &+msg.data); };//监听当接收信息时触发匿名函数&&&&socket.onclose&& = function(msg){ log(&Disconnected - status &+this.readyState); };//关闭连接&&}&&catch(ex){ log(ex); }&&$(&msg&).focus();}//声明一个发送信息方法function send(){&&var txt,&&txt = $(&msg&);&&msg = txt.&&if(!msg){ alert(&Message can not be empty&); }&&txt.value=&&;&&txt.focus();&&try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }}//声明一个对开连接，关闭socket方法function quit(){&&log(&Goodbye!&);&&socket.close();&&socket=} // 根据id获取DOM元素function $(id){ return document.getElementById(id); }//将信息显示在id为log的div中function log(msg){ $(&log&).innerHTML+=&&br&&+ }//键盘事件（回车）function onkey(event){ if(event.keyCode==13){ send(); } }&/script& &/head&&body onload=&init()&&&div id=&imagebg&&&&&&&div style=&width:520text-align:margin:0color:#000;&& &a href=&/jackyo&&&strong&新浪微博：Jack张&/strong&&/a& &/div&&&&&&br&&&&& &div id=&log&&&/div&&&&& &input id=&msg& type=&textbox& onkeypress=&onkey(event)&/&&&&& &button onclick=&send()&&发送&/button&&&&& &button onclick=&quit()&&断开&/button&
&/div&&/body&&/html& ———————————————————————————————————————————————————————————————— 如果你通过浏览器浏览该网页看到如下效果：700)this.width=700;" > 说明你已经成功连接上socket服务端。 在输入框中输入“Jack's socket test”,如果能看到如下效果，700)this.width=700;" >
恭喜你，你的socket测试成功啦。socket实例代码 (220 K) 下载次&#2
有兴趣的兄弟可以自己写一个php的socket服务器端进行测试，我在网上为大家找到了一个完整的PHP环境的websocket聊天实例。如果您感兴趣可以下载测试（供参考）。 (462 K) 下载次&#2
【一】 【二】
我幽默，兄弟们说我“猥琐”我低调，兄弟们说我“闷骚”，我深沉，兄弟们说我“假正经”，我绅士，兄弟们说我“装高雅”，我对兄弟们说 “其实我很单纯！”
UID：109321
诚哥一直在搞html5啊！带上小弟一起上路吧！
UID：109321
诚哥，这个真心好，能录个视频吗？
光头也开始搞html5了
UID：117726
Re:Jack 张&& 讲：HTML5 中websocket 长连接的具体实现方法
诚哥，加油！
Re:Jack 张&& 讲：HTML5 中websocket 长连接的具体实现方法
有代码，有文档哟！
=700) window.open('http://bbs.lampbrother.net/attachment/Mon_4_00b37f07f0e6410.jpg');" style="max-width:700max-height:700" onload="if(is_ie6&&this.offsetWidth>700)this.width=700;" >本人微信公众账号， 扫扫加吧， 好处大大的！  
UID：62789
这个必须顶起来！！
赵桐正QQ:Email:欢迎收听微博:/zhaotongzheng技术文章:http://ishare..cn/f/.html
UID：42792
Re:Jack 张&& 讲：HTML5 中websocket 长连接的具体实现方法
支持一下哦！
UID：15311
&socket.onmessage&,html5的socket技术，不错，好东西，赶快收集起来!
微博:微刊:
UID：48806
UID：173153
诚哥威武，霸气，正在收集相关资料，过年回去再研究这个
UID：167335
免费学Android啦，兄弟连震撼福利,最适合初学者的学习圣地，猥琐但不下流的讲授方式，国内唯一把IT学习娱乐化的教学模式，最全最深入的讲解，真正企业实战项目，成就android开发者达人，拿万元高薪，下一个就是你！详情官网咨询:http://4g.lampbrother.net
UID：396041
好像不支持多人聊天？&&打开2个页面&&一个页面接受不到另一个页面的消息！！！
UID：33854
websocket 的 onMessage是和后端PHP的message必须对应吗
访问内容超出本站范围，不能确定是否安全
限100 字节
批量上传需要先选择文件，再选择上传
您目前还是游客，请
&回复后跳转到最后一页
验证问题：
兄弟连高老师出的书的书名是？（细说PHP） （答案：细说PHP）
Powered by & Copyright Time now is:02-11 05:21 &2006 - 2017
版权所有 Gzip disabled
Total 0.014041(s) query 0, Time now is:02-11 05:21, Gzip disabled
京公网安备77}