Chrome DevTools显示2条WebSocket连接原因咨询（SvelteKit/Vite环境）

实际存在的WebSocket连接数量 #

• 浏览器侧一共真实建立了2条完全独立的WebSocket连接。你推测的“仅1条有效业务连接”的判断部分成立：其中只有1条是对接Golang后端的业务连接，另一条是前端开发工具自动创建的辅助连接，和业务逻辑完全无关。

DevTools显示2条连接的原因 #

• Chrome DevTools没有做任何为了调试方便的拆分展示，只是如实枚举了浏览器发起的所有WebSocket请求，两条连接的服务端、用途完全独立：
  • ws://localhost:3000/连接：是Vite开发服务器自动注入的热更新（HMR）专用连接。SvelteKit开发模式下，Vite会自动向页面注入运行时脚本，页面加载后会自动和前端开发服务（默认监听3000端口）建立这条WS连接。你观察到的连接建立后单条发送connected消息、每30秒一次周期ping的行为，完全匹配Vite HMR连接的默认逻辑——这条连接的作用是实时监听本地前端代码的变更，推送热更新指令到浏览器，实现修改代码后无需手动刷新即可看到效果的开发体验，它既不会传输你的业务数据，也根本不会和你的Golang后端服务产生交互。
  • ws://localhost:18081/api/v1/...连接：才是你在业务代码里主动发起的、对接Golang后端的WebSocket连接，所有你自定义的前后端业务读写消息都走这条连接传输。

补充说明 #

• 这个现象和你用的SvelteKit + Vite技术栈直接相关，属于开发环境的默认行为，既不是代码bug，也和Chrome的调试展示逻辑无关。如果你执行前端生产构建、用生产模式启动前端服务，Vite注入的HMR运行时脚本会被完全移除，届时Chrome DevTools里就只会剩下对接18081端口的那一条业务WebSocket连接。

内容的提问来源于stack exchange，提问作者Eric