WebSocket
WebSocket 是一种网络通信协议。
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
Websocket和HTTP关系
WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充
HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。弊端：HTTP 协议无法实现服务器主动向客户端发起消息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步JavaScript和XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源
WebSocket连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。
Websocket的作用
在讲Websocket之前，我就顺带着讲下 long poll 和 ajax轮询 的原理。
ajax轮询
ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。（需要服务器有很快的处理速度和资源。）
场景再现：
客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：没有。。（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：你好烦啊，没有啊。。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：好啦好啦，有啦给你。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：。。。。。没。。。。没。。。没有（Response） —- loop（以此类推）
long poll
long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。（需要有很高的并发，也就是说同时接待客户的能力。（场地大小））
场景再现：
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。 等待到有消息的时候。。来 给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop
从上面可以看出其实这两种方式，体现HTTP协议一个特点：被动性。即服务端不能主动联系客户端，只能有客户端发起。
简单地说就是，服务器是一个很懒的冰箱（这是个梗）（不会、不能主动发起连接），但是上司有命令，如果有客户来，不管多么累都要好好接待。
Websocket
服务端就可以主动推送信息给客户端啦。
场景再现：
客户端：啦啦啦，我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）
服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：balabalabalabala
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
服务端：笑死我了哈哈哈哈哈哈哈
（在程序设计中，这种设计叫做回调，即：你有信息了再来通知我，而不是我傻乎乎的每次跑来问你 ）
其实我们所用的程序是要经过两层代理的，即HTTP协议在Nginx等服务器的解析下，然后再传送给相应的Handler（PHP等）来处理。简单地说，我们有一个非常快速的 接线员（Nginx） ，他负责把问题转交给相应的 客服（Handler） 。
WebSocket 事件
WebSocket 方法
wx.sendSocketMessage
通过 WebSocket 连接发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
wx.sendSocketMessage参数
示例：
const socketOpen = false
const socketMsgQueue = []
wx.connectSocket({
url: 'test.php'
})
wx.onSocketOpen(function (res) {
socketOpen = true
for (let i = 0; i < socketMsgQueue.length; i++) {
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
})
function sendSocketMessage(msg) {
if (socketOpen) {
wx.sendSocketMessage({
data: msg
})
} else {
socketMsgQueue.push(msg)
}
}
wx.onSocketOpen(function callback)
监听 WebSocket 连接打开事件
wx.onSocketOpen参数
WebSocket 连接打开事件的回调函数
wx.onSocketMessage(function callback)
监听 WebSocket 接受到服务器的消息事件
wx.onSocketMessage参数
WebSocket 接受到服务器的消息事件的回调函数
wx.onSocketError(function callback)
监听 WebSocket 错误事件
function callback
WebSocket 错误事件的回调函数
wx.onSocketClose(function callback)
监听 WebSocket 连接关闭事件
function callback
WebSocket 连接关闭事件的回调函数
wx.connectSocket(Object object)
创建一个 WebSocket 连接。
wx.connectSocket参数
返回值
WebSocket 任务
并发数
- 1.7.0 及以上版本，最多可以同时存在 5 个 WebSocket 连接。
- 1.7.0 以下版本，一个小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。
示例
wx.connectSocket({
url: 'wss://example.qq.com',
header: {
'content-type': 'application/json'
},
protocols: ['protocol1'],
method: 'GET'
})
wx.closeSocket(Object object)
关闭 WebSocket 连接
wx.closeSocket参数
示例
wx.connectSocket({
url: 'test.php'
})
// 注意这里有时序问题，
// 如果 wx.connectSocket 还没回调 wx.onSocketOpen，而先调用 wx.closeSocket，那么就做不到关闭 WebSocket 的目的。
// 必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。
wx.onSocketOpen(function () {
wx.closeSocket()
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭！')
})
SocketTask
WebSocket 任务，可通过 wx.connectSocket() 接口创建返回
方法
SocketTask.send(Object object)
通过 WebSocket 连接发送数据
SocketTask.send属性
SocketTask.close(Object object)
关闭 WebSocket 连接
SocketTask.close属性
SocketTask.onOpen(function callback)
监听 WebSocket 连接打开事件
SocketTask.onOpen属性
SocketTask.onClose(function callback)
监听 WebSocket 连接关闭事件
SocketTask.onError(function callback)
监听 WebSocket 错误事件
SocketTask.onError属性
SocketTask.onMessage(function callback)
监听 WebSocket 接受到服务器的消息事件
SocketTask.onMessage属性
