首页 > 代码库 > websocket

websocket

WebSocket protocol是H5的一种新协议,实现了浏览器与服务器的全双工通信,所以可以实现web实时交互。并节省了资源和带宽

 

在WebSocket出现之前,一般通过两种方式来实现web实时应用:轮询和流

 

轮询:是一种定时的同步调用,客户端向服务器端以固定时间间隔发送请求,查看是否有更新。如果有新的信息,客户端会得到响应,否则服务器返回一个拒绝响应,客户端关闭连接。

然而实时数据并不总是可预测的,轮询会带来很多不必要的请求,而每次请求都会带有完整的请求头,这样会浪费资源和带宽;轮询是一种低效的实时方案

技术分享

长轮询(Comet/反向ajax)客户端向服务端发送请求,并保持一段设定的时间,直到服务端有响应或者设定的时间过期,请求才会关闭。之后,客户端会重新向服务器发送请求

 技术分享

流:在客户端页面使用一个隐藏的窗口(iframe)向服务器发出一个长连接请求(无限或规定的时间段内,一直保持打开),每当服务器端有更新时,就将信息推送至客户端。

这种方式的缺陷在于:1.要针对不同浏览器改善用户体验。2.服务器不会发送请求完成响应,连接一直打开,对防火墙和代理网络不友好

 

 

websocket:使用javascript调用浏览器API, 发送一个websocket请求到服务器,经过一次握手,和服务器简历TCP通讯。它本质上是一个TCP连接,所以稳定性强、数据传输量小。

 

websocket协议基于TCP协议建立一个websocket连接的步骤:

  1.客户端向服务器发送一个特殊http请求,包含了一些附加头信息("Upgrade:WebSocket"),表明这是一个申请协议升级的http请求。

  2.服务端解析并产生应答信息返回客户端,websocket连接建立成功

  3.连接一直打开,直到B/S端的某一方中关闭连接。

 

常用接口方法和属性:

readyState表示四种连接状态:

0:未连接

1:连接成功,可通讯

2:正在关闭

3:连接已关闭或无法打开

 

url代表websocket的服务器网络地址,协议通常是“ws”或“wss(加密)”;send()发送数据到服务端

close()关闭连接

onopen(),握手成功触发的事件

onmessage(),收到服务器消息时触发

onerror(),异常时触发

onclose(),关闭连接时触发

 

JavaScript调用浏览器接口示例如下:

 1 var wsServer = ‘ws://localhost:8888/Demo‘; //服务器地址 2 var websocket = new WebSocket(wsServer); //创建WebSocket对象 3 websocket.send("hello");//向服务器发送消息 4 alert(websocket.readyState);//查看websocket当前状态 5 websocket.onopen = function (evt) { 6 //已经建立连接 7 }; 8 websocket.onclose = function (evt) { 9 //已经关闭连接10 };11 websocket.onmessage = function (evt) {12 //收到服务器消息,使用evt.data提取13 };14 websocket.onerror = function (evt) {15 //产生异常16 }; 

 

 

服务器端对websocket的实现:

技术分享

websocket