WebSocket是一种全新的协议,作为HTML5中进行全双工通讯的网络技术,它能够在浏览器和服务器之间建立双向连接。
服务器端和客户端可以同时发送并响应请求,而不再像HTTP的请求和响应。浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket不属于HTTP无状态协议,协议名为"ws"。ws不是HTTP,所以传统的web服务器不一定支持,需要服务器与浏览器同时支持。
使用WebSocket技术,服务器可以随时向客户端推送消息,以保证服务器和客户端状态统一。只需要实例化WebSocket,创建连接,查看是否连接成功,然后就可以发送和响应消息了。
1、使用WebSocket 协议的好处
1) 浏览器发出websocket连线请求,然后服务器发出回应,通过一次握手建立一次连接。WebSocket是基于TCP的,TCP的握手和WebSocket的握手是不同层次的。TCP的握手用来保证链接的建立,WebSocket的握手是在TCP链接建立后告诉服务器这是个WebSocket链接,服务器你要按WebSocket的协议来处理这个TCP链接。
2) WebSocket API最伟大之处在于全双工通信,服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息,在建立连接之后,服务器可以主动传送数据给客户端。
3) 较少的控制开销。在连接创建后,服务器和客户端之间交换数据时,用于协议控制的数据包头部相对较小。在不包含扩展的情况下,对于服务器到客户端的内容,此头部大小只有2至10字节(和数据包长度有关);对于客户端到服务器的内容,此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部,此项开销显著减少了。
2、怎么使用webSocket
1) 客户端:
浏览器要支持webSocket,目前有:谷歌,火狐,IE10+,在创建webSocket时,需要检测浏览器是否支持webSocket。
2) 服务器端:
传统的web服务器通常不支持WebSocket,比如tomcat(tomcat 7.0.26 才开始支持WebSocket),jetty服务器支持WebSocket。
3、WebSocket工作流程:
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接,所以在数据传输的稳定性和数据传输量的大小方面,和传统轮询以技术比较,具有很大的性能优势。
为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
4、WebSocket协议规范:
这是一个握手的http请求,它与普通的http请求有一些区别,首先请求和响应的,”Upgrade:WebSocket”表示请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。从客户端到服务器端请求的信息里包含有”Sec-WebSocket-Extensions”、“Sec-WebSocket-Key”这样的头信息。这是客户端浏览器需要向服务器端提供的握手信息,服务器端解析这些头信息,并在握手的过程中依据这些信息生成一个 28 位的安全密钥并返回给客户端,以表明服务器端获取了客户端的请求,同意创建 WebSocket 连接。
5、WebSocket构造函数
WebSocket(url, protocols)构造函数接受一个或两个参数。
第一个参数url指定要连接的url。这个url可能是ws:或wss:,类似于HTTP请求的HTTP:或者HTTPs:。WebSocket也提供了传输层安全性的连接( TLS/SSL )。
第二个参数protocols是一个协议数组,非必填项。如果它是一个字符串,它相当于一个数组组成的字符串,如果省略,它相当于空数组。其实在protocols参数指定的协议基本有3种类型:
1) 注册协议,向注册管理实体IANA正式注册的标准协议;
2) 开放协议,广泛使用的标准化协议,如XMPP或STOMP;
3) 自定义协议,自己编写并和WebSocket一起使用的协议。
当创建的WebSocket构造函数被调用时,会先解析URL参数,获取主机、端口、资源名称、安全。如果操作失败,抛出SyntaxError异常并终止操作。如果存在一个安全组件,例如套接字安全协议HTTPs,但分析出这个安全是false,例如无效的安全证书,那么抛出一个SecurityError异常。如果protocols协议数组或字符串中Sec-WebSocket-Protocol头字段定义的值超过一次不匹配,则抛出一个SyntaxError异常并中止。此时返回这个WebSocket的对象,但是后台依然会继续这些操作。
var url =""; //URL地址
var protocols = []; //协议数组
var ws = new WebSocket(url, protocols); //构造函数
6、WebSocket事件
由于WebSocket应用程序监听WebSocket对象上的事件,用于处理数据和连接状态,WebSocket对象存在4个事件,包括open、message、error、close。
var ws = new WebSocket("ws://192.168.1.24:8080/webSocket/mywebsocket.do");
ws.onopen = function(e) {
alert("open");
};
ws.onmessage = function(e) {
alert(e.data);
};
ws.onerror = function(e) {
alert("error");
};
ws.onclose = function(e) {
alert("close");
};
7、WebSocket方法
WebSocket有两个方法:send()和close()。
send()方法在WebSocket连接打开之后使用。
var ws = new WebSocket("ws://192.168.1.24:8080/webSocket/mywebsocket.do");
// 发送消息
var msg ="";
// 定义消息
socket.onopen = function(e) {
socket.send(msg); //发送
}
// or
function sendHandler(e) {
if (ws.readState === WebSocket.Open)
socket.send(msg);
else {
}
}
// 关闭方法
var code = ""; //定义代码
var reason = ""; //关闭原因
socket.close(code, reason);
8、WebSocket对象特性
1) readState,用于报告连接状态。从下图可以看到WebSocket的只读状态从连接到关闭的取值的整个对象生命周期。
常量 | 值 | 状态 |
WebSocket.CONNECTION | 0 | 正在握手请求中,还未完成连接 |
WebSocket.OPEN | 1 | 连接已打开 |
WebSocket.CLOSING | 2 | 连接正在关闭 |
WebSocket.CLOSED | 3 | 连接已关闭 |
2) bufferAmount,用于检查发往服务器的缓冲数据量。调用send()方法能使我们立即往服务器发送数据,但是数据量较大、网络带宽有限的时候,就想知道网络传输速率。这时候就可以用bufferedAmount检查发送队列中未发送到服务器的字节数。
客户端:
var info_size= 1024 * 100; //传输数据长度
var _url =""; //WebSocket服务器地址
var ws = new WebSocket(_url);
ws.onopen = function(){
setInterval(function(){
if(ws.bufferedAmount < info_size){
//do something
}
},1000);
}
3) protocol,用于服务器理解客户端在WebSocket上使用的协议。只有在握手完成之后、关闭之前,且服务器选择了客户端提供的协议,这个特性才会存值。否则为空。