JS WebSocket概况和要点

一，概念

WebSocket的定义

WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间的实时通信问题。
浏览器和服务器只需完成一次握手，两者之间就可以创建一个持久性的TCP连接，此后服务器和客户端通过此TCP连接进行双向实时通信。

WebSocket的优点

很多网站为了实现数据推送，所用的技术都是ajax轮询。轮询是在特定的时间间隔，由浏览器主动发起请求，将服务器的数据拉回来。轮询需要不断的向服务器发送请求，会占用很多带宽和服务器资源。
WebSocket建立TCP连接后，服务器可以主动给客户端传递数据，能够更好的节省服务器资源和带宽，实现更实时的数据通讯。

ajax轮询模式： //轮询需要不断的向服务器发送请求，会占用很多带宽和服务器资源

function doPolling(type, url, data, delay = 3000) {return new Promise((resolve, reject) =>{ajax[type](url, data).then(res => {if (res.data === 'polling') { // 启动轮询setTimeout(() => {resolve(doPolling(type, url, data, delay));}, delay)} else {resolve(res);}})})
}

二，WebSocke的属性

属性描述
socket.readyState
只读属性，表示websocket链接状态：
0，表示连接尚未建立

1，表示连接已经建立，可以进行通信

2，表示连接正在进行关闭

3，表示连接已经关闭或连接不能打开

socket.bufferedAmount 只读属性，已经被send()放入队列中等待传输，但是还没有发出的utf-8文本字节数

三，WebSocket的方法

方法描述
socket.send() 使用连接发送数据
socket.close() 关闭连接

四，WebSocket的实例

WebSocket协议本质上是一个基于TCP的协议，为了建立一个WebSocket连接，浏览器需要向服务器发起一个HTTP请求，这个请求和普通的HTTP请求不同，它包含了一些附加头信息，服务器解析这些附加头信息后产生应答信息返回给客户端，客户端和服务端的WebSocket连接就建立起来了，双方可以通过连接通道自由的传递信息，并且这个连接会持续存在直到客户端或服务端某一方主动关闭连接。

function webSocket(){if("WebSocket" in window){console.log("您的浏览器支持WebSocket");var ws = new WebSocket("ws://localhost:8080"); //创建WebSocket连接//...}else{console.log("您的浏览器不支持WebSocket");}
}

五，WebSocket的事件

1, 客户端支持WebSocket的浏览器中，在创建socket后，可以通过onopen、onmessage、onclose和onerror四个事件对socket进行响应。

2, WebSocket的所有操作都是采用事件的方式触发的，这样不会阻塞UI，UI有更快的响应时间，有更好的用户体验。

3, 浏览器通过Javascript向服务器发出建立WebSocket连接的请求，连接建立后，客户端和服务器就可以通过TCP连接直接交换数据。
4, 当你获取WebSocket连接后，可以通过send()方法向服务器发送数据，可以通过onmessage事件接收服务器返回的数据。

var ws = new WebSocket("ws://localhost:8080");
//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
ws.onopen = function(){//当WebSocket创建成功时，触发onopen事件console.log("open");ws.send("hello"); //将消息发送到服务端
}
ws.onmessage = function(e){//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据console.log(e.data);
}
ws.onclose = function(e){//当客户端收到服务端发送的关闭连接请求时，触发onclose事件console.log("close");
}
ws.onerror = function(e){//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件console.log(error);
}