你的位置:首页 > 网页设计

[网页设计]websocket初探


应用背景

首先我们了解一下什么是WebSocket 。WebSocket 是HTML5的重要特性,其通信协议实现的是基于浏览器的远程socket,实现了浏览器和服务器全双工通信(full-duplex)。

在websocket之前,为了实现即时通信,所用的技术都是轮询,在特定的时间间隔内,由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器,这样,浏览器需要对服务器不断发出请求,会占用很多带宽。

在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。它解决了web实时化的问题,相比传统http有如下好处:

1)一个WEB客户端只建立一个TCP连接

2)Websocket服务端可以推送(push)数据到web客户端.

3)有更加轻量级的头,减少数据传送量

websocket原理

我们可以把websocket应用看做有两个部分,客户端和服务端。在客户端会实例化一个websocket对象,如:

ws = new WebSocket( “ws://yourdomain:port/path” );

websocket对象会自动解析这段字符串,发送到指定的服务器端口,接着客户端与服务端会建立握手。客户端发送的数据格式类似:

GET /echo HTTP/1.1 
Upgrade: WebSocket 
Connection: Upgrade 
Hosthttp://www.51wp7.com:8080 
Originhttp://www.51wp7.com

服务端应该返回的信息为:

HTTP/1.1 101 Web Socket Protocol Handshake 
Upgrade: WebSocket 
Connection: Upgrade 
WebSocket-Originhttp://www.51wp7.com 
WebSocket-Location: ws:// www.51wp7.com:8080/echo

客户端握手成功后,会触发webscoket对象的onopen事件,告诉客户端连接已经成功建立。

客户端一共绑定了四个事件。

clip_image002

1)onopen 建立连接后触发

2)onmessage 收到消息后触发

3)onerror 发生错误时触发

4)onclose 关闭连接时触发