websocket详解和使用

一、WebSocket概述

websocket是在HTML5的基础上定义的一种新的协议，是在TCP协议的基础上实现的；

二、为什么使用websocket协议

通常情况下，客户端访问服务器端使用的是http或https协议，客户端发起请求，服务器端处理请求然后返回数据，客户端再呈现页面，

但是如果想要获取实时信息的时候，则需要通过ajax不挺的刷新数据，或者使用长连接(是对ajax的改进，客户端和服务器端建立连接后，一直保持通信，如果服务器一直没有新消息则一直保持通信，知道服务端有消息返回客户端，然后关闭连接)

不管是ajax轮询还是长连接都是：客户端主动发起请求，服务端被动接收，服务端不能主动发起；怎么才能可以由服务端主动发起将数据给客户端？那么就得使用websocket协议进行通讯。

三、websocket协议的优缺点

1、减少请求费时费资源

http请求需要客户端发起情况后客户端再回应，websocket服务端可以直接发起请求，减少不必要的网络请求时间损耗和网络流量

2:、更持久

http请求是无状态的，请求响应完就断开了连接，websocket经过一次握手后就一直保持连接，直到主动关闭连接

3、更主动

http服务端无法主动发起请求客户端，websocket建立连接后可以主动给客户端发消息

四、websocket协议解析

websocket协议首先需要借助http或https协议来完成握手动作，握手完成后，才会通过websocket协议进行交互

下面是websocket的握手请求信息

Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: 127.0.0.1:40002
Origin: http://coolaf.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: EHJN/pFCvQdo4+q8tUNFNw==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

和http不同的地方有以下几个

Upgrade：websocket表示这个是一个特殊的http请求，请求的目的就是将客户端和服务端的请求升级成websocket协议；

Sec-WebSocket-Key：这是一个使用Base64 encode的值；

Sec-WebSocket-Version：协议版本号

Sec-WebSocket-Extensions：扩展信息

下面我们看一下握手响应信息

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://coolaf.com
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: upgrade
Date: Thu, 13 May 2021 06:31:17 GMT
Expires: 0
Pragma: no-cache
Sec-WebSocket-Accept: msa8SsU6yu1A7HCc/LiQvNnDFPw=
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15
Upgrade: websocket
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; m