HTTPS + WSS(WebSockets) 完整请求流程架构说明及本地开启HTTPS

背景

WebSocket 可以通过 HTTP（ws://）或 HTTPS（wss://）进行初始握手。WS（ws://）通常与 HTTP 一起使用，而 WSS（wss://）是 WebSocket 的加密版本，使用 TLS/SSL 加密，通常与 HTTPS 一起使用。

原理

运维开启ws协议
路径匹配+NGINX代理
前端将协议更换为wss。如wss://my-server.cn/ws_control

其实大部分都是运维的工作，前端只要提供需要匹配的路径即可。注意：这个路径要唯一，不能和路由路径重复

Mermaid 流程图代码【运维】

HTTPS/WSS 443端口
SSL/TLS 加密 HTTP 内网已解密 HTTP/WebSocket 内网 WebSocket 内网客户端浏览器
wss://my-server.cn/ws_control 阿里云 SLB/ALB
负载均衡器 APISIX
API 网关 Nginx
反向代理后端服务
WebSocket Server SSL 终端
域名解析
负载均衡
安全防护路由管理
认证鉴权
限流熔断
监控日志协议升级
请求转发
负载均衡处理连接
WebSocket 协议
返回数据流

流程图【运维】

🔄 详细流程说明【运维】

阶段 1: 客户端发起连接

复制代码

浏览器 → wss://my-server.cn/ws_control?id=xxx

使用 WSS（WebSocket Secure）协议
域名：my-server.cn
端口：443（HTTPS/WSS 默认端口）
SSL/TLS 加密传输

阶段 2: 阿里云 SLB/ALB 处理

复制代码

阿里云负载均衡器：
├─ DNS 解析：my-server.cn → SLB 公网IP
├─ SSL 终端：解密 HTTPS/WSS 流量
├─ 健康检查：检查后端服务可用性
└─ 负载均衡：分发到 APISIX 实例

关键点：

SSL 证书在阿里云 SLB 上配置
客户端到 SLB 是加密的（HTTPS/WSS）
SLB 到后端是内网 HTTP（已解密）

阶段 3: APISIX 网关处理

复制代码

APISIX 配置示例：
routes:
  - uri: ws_control
    methods: [GET, POST]
    upstream:
      nodes:
        nginx-service:80: 1  # 内网 Nginx 服务
    plugins:
      websocket: {}          # 启用 WebSocket 支持
      cors: {}               # 跨域配置
      auth: {}               # 认证插件

APISIX 的作用：

路由匹配 ：根据 /ws_control 路径匹配到对应上游
协议保持：保持 WebSocket 协议特性
认证鉴权：验证 Token、API Key 等
监控日志：记录请求日志和性能指标

阶段 4: Nginx 反向代理

复制代码

Nginx 配置：
location /ws_control {
    proxy_pass http://my-server:6080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
    proxy_buffering off;
}

Nginx 的作用：

协议升级：确保 WebSocket 升级头正确传递
请求转发：转发到实际的后端 WebSocket 服务
连接保持：配置长超时时间

阶段 5: 后端服务处理

复制代码

后端 WebSocket 服务：
├─ 接收 WebSocket 连接
├─ 解析请求参数（id、node、type、vm）
├─ 建立 WebSocket 会话
└─ 返回 WebSocket 数据流

🔑 为什么 WSS 地址必须是域名？【前端】【运维】

SSL 证书绑定域名

SSL/TLS 证书是为特定域名签发的（如 my-server.cn）
浏览器会验证证书域名与访问地址是否匹配
使用 IP 地址无法通过证书验证，会显示安全警告

浏览器安全策略

现代浏览器对 WebSocket 连接有严格的安全策略
跨域请求需要正确的域名和证书
使用域名可以避免 CORS 和安全策略问题

阿里云 SLB 配置要求

阿里云 SLB 的 HTTPS 监听器需要绑定域名和证书
证书必须与访问域名匹配
DNS 解析将域名指向 SLB 的公网 IP

为什么需要走 APISIX？

统一 API 网关管理
- 集中管理所有 API 路由和策略
- 统一入口，便于监控和运维
- 支持动态路由配置，无需重启服务
认证鉴权
- 统一处理 Token 验证、API Key 认证
- 支持多种认证方式（JWT、OAuth2、API Key 等）
- 可以在网关层拦截未授权请求
限流和熔断保护
- 防止后端服务过载
- 支持多种限流策略（QPS、并发数等）
- 自动熔断保护后端服务
监控和日志
- 统一收集请求日志和性能指标
- 便于问题排查和性能分析
- 支持实时监控和告警
WebSocket 支持
- APISIX 原生支持 WebSocket 协议
- 自动处理协议升级和连接保持
- 支持 WebSocket 路由和负载均衡

为什么还需要 Nginx？

协议转换和升级
- 确保 WebSocket 升级头（Upgrade、Connection）正确传递
- 处理 HTTP/1.1 到 WebSocket 的协议转换
- 配置长连接超时时间
请求转发
- 将请求转发到实际的后端 WebSocket 服务
- 支持负载均衡（如果有多个后端实例）
- 可以配置不同的转发策略
缓冲和性能优化
- 禁用缓冲以确保 WebSocket 实时通信
- 优化连接池和超时配置
- 减少后端服务的连接压力

本地开启https

@vitejs/plugin-basic-ssl 插件

@vitejs/plugin-basic-ssl 插件用于在本地开发环境中启用 HTTPS，通过自动生成自签名证书，让 Vite 开发服务器支持 HTTPS 和 WSS 协议。

工作原理：

插件会自动生成自签名 SSL 证书（首次运行时会创建）
将证书配置到 Vite 开发服务器，启用 HTTPS 模式
浏览器访问时会提示证书不受信任（因为是自签名），需要手动接受

安装命令：

bash 复制代码

# 使用 npm
npm install -D @vitejs/plugin-basic-ssl

# 使用 pnpm
pnpm add -D @vitejs/plugin-basic-ssl

使用方式：

javascript 复制代码

import basicSsl from "@vitejs/plugin-basic-ssl"

export default {
  plugins: [basicSsl()],
  server: {
    https: true  // 启用 HTTPS
  }
}

注意事项：

自签名证书会在浏览器中显示安全警告，需要手动点击"继续访问"
证书存储在本地，仅用于开发环境，不能用于生产环境

HTTPS + WSS(WebSockets) 完整请求流程架构说明及本地开启HTTPS