websocket 发送给前端一个对象_WebSocket协议

WebSocket协议简介

WebSocket是html5规范新引入的功能，用于解决浏览器与后台服务器双向通讯的问题，使用WebSocket技术，后台可以随时向前端推送消息，以保证前后台状态统一，在传统的无状态HTTP协议中，这是“无法做到”的。

在WebSocket出现之前，传统的服务端向浏览器推送消息的技术包括：ajax、flash、comet、java applet等。无一例外，这些技术使用的都是长轮循，即每隔一段时间去请求后台，以获取最新状态。长轮询方式容易实现，但效果也差，频繁盲目的调用后台，带来不必要的开销，且实时性无法保障，后台出现更新，前端需要在下一次轮询时才知道。

WebSocket协议支持服务端与浏览器建立长连接，双方可以随时发送数据给对方，不再是由客户端控制的一问一答的方式。在实现推送功能的时候，主要是由服务端给客户端发送数据。

基于长轮循(polling)和websocket推送的浏览器(browser)和服务端(Server)的交互对比图如下所示：

由于WebSocket协议建立在http协议的基础之上，因此二者有很多的类似之处。事实上，在使用websocket协议时，浏览器与服务端最开始建立的还是http连接，之后再将协议从http转换成websocket，协议转换的过程称之为握手(handshake)，表示服务端与客户端都同意建立websocket协议。

需要注意的是，由于websocket是新的协议，需要浏览器和web服务端都支持的情况下，才能建立连接成功。

正常情况下，连接在建立的时候，浏览器向服务端发送一个HTTP请求，通过包含一些额外信息，表明其希望将协议从HTTP转换成WebSocket。这个额外信息实际上就是增加了一个请求头Update，如下所示：

GET ws://echo.websocket.org/?encoding=text HTTP/1.1

Origin: http://websocket.org

Cookie: __utma=99as

Connection: Upgrade

Host: echo.websocket.org

Sec-WebSocket-Key: uRovscZjNol/umbTt5uKmw==

Upgrade: websocket

Sec-WebSocket-Version: 13

可以看到Update请求头的值为websocket，表示希望将Http协议转换成websocket协议。

Origin表示的是，连接开始时发送http请求的地址。

注意GET的路径是以ws开头，这是因为WebSocket是一种全新的协议，不属于http无状态协议，协议名为”ws"，与http协议使用相同的80端口，类似的，"wss"和https协议使用相同的443端口。

客户端握手请求中的 Sec-WebSocket-Key 头字段中的内容是随机的，采用 base64 编码。服务端会接收到这个值之后，会将其与一个魔幻数字258EAFA5-E914-47DA-95CA-C5AB0DC85B11进行连接，使用SHA-1加密后，采用base64编码，以Sec-WebSocket-Accept响应头返回。

如果服务端接受了客户端将http协议转换成websocket协议连接的请求，会返回类似如下响应，表示协议切换成功：HTTP/1.1 101 WebSocket Protocol Handshake

Date: Fri, 10 Feb 2012 17:38:18 GMT

Connection: Upgrade

Server: Kaazing Gateway

Upgrade: WebSocket

Access-Control-Allow-Origin: http://websocket.org

Access-Control-Allow-Credentials: true

Sec-WebSocket-Accept: rLHCkw/SKsO9GAH/ZSFhBATDKrU=

Access-Control-Allow-Headers: content-type

WebSocket客户端开发

支持html5的浏览器，一般都会提供一个内置的js对象Websocket ，开发者利用这个对象就可以与服务端建立websocket连接。特别的在FireFox中，这个对象为在Firefox中为MozWebSocket。

可以通过以下js代码检测一个浏览器是否支持websocketwindow.WebSocket = window.WebSocket || window.MozWebSocket;

if (!window.WebSocket){

alert("WebSocket not supported by this browser");

return;

}

websocket协议连接的创建var myWebSocket = new WebSocket("ws://www.websockets.org");

关闭连接使用Websocket对象的close方法myWebSocket.close();

发送消息使用Websocket对象的send方法myWebSocket.send("Hello WebSockets!");

Websocket对象还