热更新的ws连接不适用

这篇文章上次修改于 10 个月前，可能部分内容已经不适用，如有疑问可询问作者。

热更新的ws连接不适用

开发时候遇到了如标题一样的问题 按理来说这种问题应该放在归类里一起整理 但是实在没有博客可以水了，就这么整了

问题

热更新的 ws 连接不适用 开发者工具里显示

BASH
WebSocket connection to 'wss://localhost:9000/' failed:
client:511 [vite] failed to connect to websocket.
your current setup:
  (browser) www.xingtu.cn/ <--[HTTP]--> localhost:9000/ (server)
  (browser) www.xingtu.cn:/ <--[WebSocket (failing)]--> localhost:9000/ (server)
Check out your Vite / network configuration and
Copy

打开网络连接，发现尝试连接了，但是显示不适用的状态 那确实是 ws 连接出问题了，从热更新服务启动和连接各看看吧

排查

1. 检查vite的配置

首先是检查vite的配置，看看有没有启动

TS
// vite.config.ts
server: {
  hmr: {
    port: 9000,
  },
},
Copy

没啥问题，正常启动 使用debug模式启动下vite服务看看有没有启动hmr服务

BASH
DEBUG=vite:* pnpm dev
Copy

打开后可以看到大量的vite:hmr信息，说明hmr服务启动的没有问题，那就是链接的问题了

2. 检查连接

用抓包器看看ws连接的请求 请求结果是

BASH
WSS/1.1 400
Copy

emmm非常简朴的相应结果，排排请求信息吧 请求信息很正常 但是多了一个rule 原来是中间件规则给wss请求加了个请求头

BASH
Xt-env: dev
Copy

这个请求头是用来区分开发环境和生产环境的，结果他就挂了 解决方法就是在匹配规则里排除掉wss

BASH
www.matto.top https://localhost:9000/

# 排除掉wss
https://www.matto.top https://localhost:9000/
Copy