websocket是H5里新增的一种技术,主要用于web客户端与服务端之间建立双工通信通道,进行实时消息传输。在websocket之前,web客户端与服务器之间传递消息都是基于HTTP协议,总所周知,HTTP是一种无状态的协议,web客户端与服务端传递消息必须由客户端主动request,然后服务端返回response结果,服务端无法主动推送消息给客户端。为此,出现了轮询(polling)和Comet技术,这里不做详细介绍,有兴趣可以自己研究一下。轮询(polling)和Comet的本质还是基于HTTP的请求,虽在性能上有不少提升,但在并发量环境下,对服务器要求较高。HTML5推出的WebSocket,才真正实现了Web的实时通信,使B/S模式具备了C/S模式的实时通信能力。好了,言归正传,结合实例讲一下websocket如何使用。
1、websocket原理
webscoket也是一种基于TCP的协议,与HTTP类似。websocket实现双工通信分为两步:
(1)握手:客户端与服务器进行握手,客户端通过http协议向服务器发出握手请求,服务器响应客户端的握手请求。
客户端到服务端:
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Upgrade: WebSocket
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5
Origin: http://example.com
[8-byte security key]
服务端到客户端:
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
WebSocket-Origin: http://example.com
WebSocket-Location: ws://example.com/demo
[16-byte hash response]
客户端通过Upgrade命令请求服务器,把协议升级为websocket协议,并传递一个秘钥Sec-WebSocket-Key1给服务端,服务端响应请求。
(2)通信:握手完成后,客户端与服务端之间的双工通道建立成功,双方可以进行实时通信。
相比传统基于HTTP协议的通信,websocket只在发送握手请求的时候进行了一次HTTP请求,资源占用大大减少。
2、websocket支持
(1)前端websocket支持:在H5中嵌入websocket对象,实现了对websocket支持
websocket js定义:
[Constructor(in DOMString url, in optional DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned sho