一首歌的时间说清楚WebSocket

携手创作，共同成长！这是我参与「掘金日新计划 · 8月更文挑战」的第9天，点击查看活动详情

前言

我们要想实现服务端有更新，客户端就可以获取到，如果通过http轮询来解决，每隔一段时间发一个请求，十分浪费性能。所以，WebSocket就非常重要，它是计算机网络应用层的协议，使服务端和客户端之间可以双向数据传输。

WebSocket协议的原理
基于http协议建立通道，然后再通过WebSocket协议进行通信。
具体做法：客户端发起http请求，三次握手，建立tcp连接，http请求相比常规请求，多了 Upgrade：websocket，Connection：Upgrade，Sec-WebSocket-Key（客户端随机生成的一个base64编码），Sec-WebSocket-Protocol（用户定义的字符串），Sec-WebSocket-Version（协议版本）。
服务端收到握手请求后，返回Upgrade，Connection，Sec-WebSocket-Accept（服务端确认过Sec-WebSocket-Key，在它基础上根据固定算法生成，为连接做基本的防护），Sec-WebSocket-Protocol（表示最终使用的协议）。
客户端收到服务端响应后，开始借助TCP传输信道进行全双工通信。

Websocket的优缺点
优：节省资源，效率高，实现服务端主动向客户端通信
缺：受网络限制比较大，浏览器支持的程度与方式有区别

客户端的使用

function connectWebsocket() {
    ws = new WebSocket('ws://localhost:1234');
    // 监听连接成功
    ws.onopen = () => {
        console.log('连接服务端WebSocket成功');
        ws.send(JSON.stringify(msgData));	// send 方法给服务端发送消息
    };

    // 监听服务端消息(接收消息)
    ws.onmessage = (msg) => {
        let message = JSON.parse(msg.data);
        console.log('收到的消息：', message)
    };

    // 监听连接失败
    ws.onerror = () => {
        console.log('连接失败，正在重连...');
        connectWebsocket();
    };

    // 监听连接关闭
    ws.onclose = () => {
    	console.log('连接关闭');
    };
};
connectWebsocket();

心跳包
可以在连接成功之后，每隔一个固定时间发送心跳包，告诉服务器，我还在线。这个包通常是很小的包。