H5：webSocket详解

websocket是html5规范中的一部分,客户端新建一个websocket实例.绑定需要连接到的服务器,当客户端连接服务端的时候，会向服务端发送一个http报文,如果服务端支持websocket协议，那么它就会将自己的通信协议切换到websocket,同时发给客户端响应报文头：

服务端响应报文头

返回的状态码为101，表示同意客户端协议转换请求，并将它转换为websocket协议。以上过程都是利用http通信完成的，称之为websocket协议握手(websocket Protocol handshake)，进过这握手之后，客户端和服务端就建立了websocket连接，以后的通信走的都是websocket协议了。所以总结为websocket握手需要借助于http协议，建立连接后通信过程使用websocket协议。同时需要了解的是，该websocket连接还是基于我们刚才发起http连接的那个TCP连接。一旦建立连接之后，我们就可以进行数据传输了，websocket提供两种数据传输：文本数据和二进制数据。

详细用法参考webIm项目。

1. WebSocket API简介

首先看一段简单的javascript代码，该代码调用了WebSockets的API。

[javascript] view plaincopy

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!”)}

这份代码总共只有5行，现在简单概述一下这5行代码的意义。

第一行代码是在申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。

第二行到第五行为WebSocket对象注册消息的处理函数，WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，当Browser和WebSocketServer连接成功后，会触发onopen消息；如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。我们可以看出所有的 *** 作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

可以传参。

以java为例：

html中：

var websocket = new WebSocket("ws://ws.xxxx.con/what/webSocketServer?sid=" + sid

java中自定义 WebSocketHandshakeInterceptor， 

在 beforeHandshake 方法中

String sid = ((ServletServerHttpRequest) req).getServletRequest().getParameter("sid")

即可拿到 sid 的值，可以添加到 attributes 中使用

在 WebSocketHandler  的方法中

通过

session.getAttributes().get('sid')

可以拿到建立时传递的参数

WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在 TCP 之上，同 HTTP 一样通过 TCP 来传输数据，但是它和 HTTP 最大不同是：

WebSocket 是一种双向通信协议，在建立连接后，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据，就像 Socket 一样；

WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。

---