websocket深入

websocket怎么建立连接

博主之前的websocket入门文章已经提供了基础的websocket项目。没看过的小伙伴可以先看一下之前的那边博文，然后再来阅读这篇文章。我们使用fiddler来查看websocket请求和响应头信息。

连接过程

连接信息

字段值说明

• Result，101状态码，表示协议切换
• Protocol，http协议
• Host，主机
• URL，请求的路径
• Body，响应体或者响应体的内容

从protocol字段值，我们可以看出websocket协议是建立在http协议的基础之上，并且只进行了一次通信就建立了全双工通信。

请求头

#请求方式 请求地址 协议/版本
GET http://127.0.0.1:8088/websocket HTTP/1.1
#主机信息
Host: 127.0.0.1:8088
#连接类型，Upgrade表示升级
Connection: Upgrade
#没有缓存
Pragma: no-cache
#没有缓存
Cache-Control: no-cache
#浏览器代理信息
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
#升级为websocket协议
Upgrade: websocket
#请求是哪里发起的
Origin: http://localhost:8088
#客户端支持WebSocket的版本
Sec-WebSocket-Version: 13
#接收压缩类型
Accept-Encoding: gzip, deflate, br
#接收语言类型
Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh-TW;q=0.7,zh;q=0.6
#客户端采用base64编码的24位随机字符序列
Sec-WebSocket-Key: 1E9XNliLi5RlhW1kLX3gBQ==
#协议扩展类型
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

响应头

#协议/版本
HTTP/1.1 101
Upgrade: websocket
Connection: upgrade
#Sec-WebSocket-Accept的值跟之前的Sec-WebSocket-Key有关
Sec-WebSocket-Accept: ngTcxZptzYXtZhRbKD1LOa2uyi0=
Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15
Date: Tue, 04 Aug 2020 13:12:39 GMT

反向代理踩坑

从websocket建立连接时的http请求和响应头可以得知，客户端需要发送Upgrade，Connection等请求头，而服务器也要响应Upgrade，Connection等请求头。博主在实际websocket项目开发中就遇到了nginx反向代理之后websocket握手失败的问题。

错误信息

错误信息

响应头

enter description here

解决方案

server {
    listen 80;
    server_name ourway.ourwaysoft.com;

    #charset koi8 - r;
    #access_log logs / host.access.log main;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        #这里改成具体的ip地址和端口号
        proxy_pass http: //{ip}:{port}/;
    }
}