webSocket是啥？
提供浏览器和服务器之间建立持久链接来交换数据。即时通信
实际业务场景
在商城端，参与直播活动的商品，商品活动状态更改，服务器需要主动发送消息通知浏览器。
例如：商品的开售状态。若商品未手动开售，不支持立即购买，若已设置手动开售，此时状态同步需要到商城端，表示该商品已开售，可以按直播价购买。
说webSocket前，先来请2位选手入场，就是这两货：轮询、长轮询。
1. 轮询：实现方式：还是请求** / 响应（效率低，基本不用**）
浏览器定时给后端发送请求。每隔1s发一次。就像下面这样：
C：hi，服务器，有消息发给我吗？
S：暂时没有哦。1s后
C：hi，服务器，有消息发给我吗？
S：暂时没有哦。
……
C：hi，服务器，有消息发给我吗？
S：有的，呐，这是你要的消息包裹。
优点：后端程序编写比较容易。
缺点：浪费服务器和客户端的资源，发送请求越多，加大服务端压力。 Out!^_^
实例：适于小型应用
2. 长轮询：实现方式：队列 +ajax（兼容性好）
服务端给每个客户端建立队列，让浏览器通过ajax朝服务端要数据，去各自的队列中获取
如果没有数据则会阻塞但是不会一直阻塞，比如阻塞你30秒，还没有数据则返回，然后让客户端浏览器再次发送请求数据的请求
C：hi，服务器，砸门连接通信了哦~
S：挂起~~~
……
S：hi，client，呐，这是你要的消息包裹。
优点：在无消息的情况下不会频繁的请求，节省了网络流量，解决了服务端一直疲于接受请求的窘境
缺点：连接挂起也会导致资源的浪费。 Out!^_^
实例：WebQQ、Hi网页版、Facebook IM
两者：服务器不会主动推送信息。
3. 长连接（SSE）这个未实验，待续……
4. webSocket
const url = `${protocol === 'https:' ? 'wss' : 'ws'}://${hostname}/mall/api/ws/liveActivity/Websocket`;
this.socket = new WebSocket(url)
这是new WebSocket() 发出的请求的浏览器 header 示例。
1. webSocket事件
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
2. webSocket方法
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
js封装websocket，网上看到一个比较好的例子：
总结：
性能方面考虑，WebSocket > 长连接SSE > 长轮询 > 短轮询
参考：
zh.javascript.info/websocket
zh.javascript.info/long-pollin…
blog.csdn.net/sugelachao/…
t.zoukankan.com/KrisYzy-p-1…
