一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第22天，点击查看活动详情。
一 、websocket是什么?
HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。 （ 全双工数据通信允许数据同时在两个方向上传输）
Http1.0 短连接 一个request对应一个response
Http1.1 长连接 keep-alive 多个request对应多个response （response是被动的，不能主动发起），主要解决频繁建立连接的问题
Websocket 永久连接 客户端可以给服务端发送消息，服务端也可以主动发送消息给客户的，解决了传统http请求这种一问一答的模式。（推送）
二、 轮询、长轮询 与websocket 的区别
客户端要获取服务器端的变化，常用的实现方式有：轮询，长轮询， websocket
轮询：让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息；效率低，非常浪费资源
长轮询：采取的是阻塞模型（一直打电话，没收到就不挂电话），即客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。 效率低，非常浪费资源
Websocket: 一次HTTP请求，就可以做到源源不断的信息传送了； 节省服务器资源和带宽，实时通讯
应用场景：体育赛事、聊天室、实时位置之类的场景
三、websocket的握手阶段
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
Upgrade: websocket 和 Connection: Upgrade是websocket 的核心，告诉服务器客户端发起的是websocket协议
Sec-WebSocket-Key 是一个Base64 encode的值，是浏览器随机生成的
然后服务器会返回下列东西，表示已经接受到请求， 成功建立Websocket啦！
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
这里开始就是HTTP最后负责的区域了，告诉客户，我已经成功切换协议啦~
四、websocket如何使用？
const wsUrl = "wss://XXXXXXXX"
function createWebSocket (url) {
ws = new WebSocket(url);
ws.onopen = function () {
console.log('连接成功')
ws.send('Hello WebSocket') // 心跳检测重置 // heartCheck.start();
};
ws.onmessage = function (event) {
console.log('接收到消息:' + event.data); // 拿到任何消息都说明当前连接是正常的
// heartCheck.start();
}
ws.onclose = function () {
console.log('连接关闭'); // reconnect(wsUrl);
};
ws.onerror = function() {
console.log('发生异常了');
// reconnect(wsUrl);
};
}
createWebSocket(wsUrl)
