在我的web开发中遇到的websocket项目还是很少的，由此也出现了不少问题。趁此在这个vue的人工客服的项目中总结下websocket的使用经验。
1.socket基本用法
let socket = new WebSocket(url)
// 建立连接
socket.onopen = () => {}
** 一般在这个回调里面想后台发送心跳信息
// 接收信息
socket.onmessage = () => {}
// 连接关闭
socket.onclose = () => {}
** 并非所有的socket断开都会触发此事件
*** 客户端刷新时socket连接中断但不会触发此事件
// 连接发生错误时
socket.onerror = () => {}
// 发送信息
socket.send()
** socket可以发送的信息类型有 string 和 二进制文件
2.websocket心跳机制
目前的话，浏览器中没有相关api发送ping给服务器，只能由服务器发ping给浏览器，浏览器返回pong消息；所以目前采用的是模拟心跳的连接：客户端写个定时器每隔一定的时间给服务器发送一个消息
let socket = new WebSocket(url)
// socket连接成功
socket.onopen = () => {
let timer = setInterval(() => {
socket.send('心跳信息')
},20000)
}
3. socket实例存放何处？
在本项目中，socket实例是一个要在各个组件内都能访问到的对象。对此有三个地方可以考虑
let socket = new WebSocket(url) // socket连接实例
第一： 存放到window下
第二： 存放到vuex的store里面
第三： 存放到vue.prototype
*** 目前的了解深度是： 无论以何种方式存放都只是访问方法的不同，其他并无大区别
4. socket连接中的异常断开处理？
浏览器异常断开处理：
第一： 浏览器的刷新会中断websockt连接，但不会触发close事件
第二： 浏览器断网后到触发close事件有一定的时间延迟
服务器异常断开处理：
服务端的异常断开socket连接会触发前端socket的close事件，在事件中做好监听即可
5. socket中断重连
对于由于网络原因或用户操作（刷新页面）等导致的socket非正常断开，是否要做重新连接的处理。这个要根据业务逻辑来做相关处理。
业务类型1： 客户端只是单方面接收服务端的推送（比如彩票开奖业务）
客户端只是通过socket接收每次的开奖信息，并不需要向服务端发送什么信息。socket中断重连不会影响原有的数据。
业务类型2： 会话时的socket连接
客户端和服务端有会话业务，此时的中断重连需要保存原来的会话记录和当前会话人。需要在本地做好对这些信息的存储，可以考虑存储到 localstorage 内。
6. ws协议和http协议的对应
http访问的页面中使用ws的协议进行socket连接；https访问的页面中使用wss的协议进行socket连接
