HTML5(十一)——WebSocket 基础教程
一、为什么要学 WebSocket?
websocket 是 HTML5 提供的一种长链接双向通讯协议，使得客户端和服务器之间的数据交换更简单，允许服务端主动向客户端推送数据，并且客户端与服务端只需连接一次，就可以保持长久连接，并进行数据通信。
websocket 与 http 区别：
- http 链接分为长链接、短链接，短链接是发送一个请求，返回一个响应，长链接是在一定周期内保持链接。但是 websocket 只需连接一次就可以保持长链接，不需要的时候可以手动断开。
- http 通信中，客户端是主动的，服务端是被动的。但是 websocket，服务端可以主动向客户端推送数据。
- http 通过轮询建立的长链接，多次建立 request / response 会产生冗余的头部信息。
ajax 轮询与 websocket 通信原理如图：
websocket 就是为了解决客户端发起多个 http 请求到服务器资源，浏览器必须要经过长时间的，轮询问题而生的，实现多路复用。它最大特点就是服务器可以主动向客户端推送信息。
二、WebSocket 对象
2.1、创建对象：
let ws = new WebSocket( url , [ protocol ] )url：指定连接的后台服务地址。
protocol：指定可接受的子协议，是可选参数。
2.2、对象属性
readyState：表示连接状态，是一个只读属性。
使用语法：ws.readyState
返回的值有4个，分别表示的意义：
- 0 – 未建立连接
- 1 – 已建立连接，可正常通信
- 2 – 连接正在进行关闭
- 3 – 连接已经关闭或断开，无法通信
bufferedAmount：已被放入等待传输队列，但是还没有发出的 UTF-8 文本字节数，也是只读属性。
2.3、对象事件
onopen – 连接时触发，用于指定连接成功后的回调函数。
使用语法：
// 方法一 ：只可以指定一个回调函数 ws.onopen = function(){ } //方法二 ：可以指定多个回调函数 ws.addEventListener('open',function(){ })
onclose – 关闭时触发，指定连接关闭时回调函数。
使用语法：与 onopen 完全一致。
onmessage – 客户端接收服务端数据时触发，指定回调函数。
使用语法：
// 方法一： ws.inmessage = function(event){ let data = event.data //服务器传给客户端的数据 } // 方法二： ws.addEventListener('inmessage', function(event){ let data = event.data //服务器传给客户端的数据 })
onerror – 通信发生错误时触发，并指定回调函数。
使用语法：
//方法一 ws.onerror = function(){ //错误处理 } //方法二 ws.addEventListener('error',function(){ //错误处理 })
2.3、对象事件
send – 用于向服务器发送数据。
使用语法：
ws.send( data )data ：是发给服务器的数据，这个数据可以是字符串、数组、json、Blob 对象或 ArrayBuffer 对象等。
如发送 Blob 对象例子：
var file = document.querySelector('input='file'').files[0] ws.send(file)
close – 关闭连接
使用语法：
ws.close()
