websocket浅析

HTML5 WebSocket

• 允许服务端主动向客户端发送数据

• 浏览器和服务器只需完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

• 节省服务器资源和带宽，实现更实时的通讯

创建websocket

• 第一个参数为目标路径

• 第二个参数为可选参数，可以是字符串或数组，用来表示子协议，这样可以让一个服务器实现多种websocket子协议

var ws = new WebSocket([url],[option])

实例对象的方法

• send()：接收一个String|ArrayBuffer|Blob数据，发送到客户端

• close()：客户端主动断开连接

  • 第一个参数可选，为关闭状态号，默认1000

  • 第二个参数可选，字符串类型，表示断开原因

表示连接状态的常量

• WebSocket.CONNECTING 0 连接还没开启

• WebSocket.OPEN 1 连接已开启并准备好进行通信

• WebSocket.CLOSING 2 连接正在关闭的过程中

• WebSocket.CLOSED 3 连接已关闭，或者连接无法建立

• 通过readyState属性来判断当前状态

事件监听

• open：连接已建立-----OPEN

• message：接收到消息，回调函数中收到messageEvent数据，其中messageEvent.data为消息信息

• closed：连接关闭--CLOSED

• error：建立和连接过程中发生错误

事件监听方式和数据解析

• 可以对on[事件]直接赋值

  • ws.onopen = function(){alert('连接成功')}

• 也可以使用addEventListener监听事件

  • ws.addEventListener('open', funtion(){})

• 不论是服务端还是客户端，其接收到的都是序列化后的字符串，很多时候需要通过JSON.parse(e.data)解析

连接稳定性

• 某些情况下出现断开连接或连接出错时，需要在error或open中进行监听非正常断开并重连

• 在open后开启一个定时任务去判断当前readyState，在出现异常情况下尝试重连

心跳

• WebSocket中规定了心跳机制，一方通过发送ping(opcode 0x9)消息给另一方，另一方收到ping后应尽可能快的返回pong(0xA)

• 用来检测连接的对方在线状态。因此如果没有心跳，那么没有办法判断对方的连接状态，就会断开连接

建连阶段

• 借助于HTTP

• 部分请求头意义

  • Connection：Upgrade : 表示要升级协议

  • Upgrade:websocket: 表示要升级到websocket协议

  • Sec-WebSocket-Version: websocket版本

  • Sec-WebSocket-Key：是一个Base64 encode的值，由浏览器随机生成，与服务端响应头中的Sec-WebSocket-Accept配套

• 部分响应头意义

  • 状态码101 ：表示切换协议

  • Upgrade和Connection用于回复客户端已经切换协议成功