SpringBoot配合Vue实现WebSocket 常用WebSocket前后端联调【教程】-js教程-PHP中文网

websocket联调失败主因是握手失败、路径不匹配或代理/防火墙拦截；需检查后端serverendpoint配置、前端ws://协议与路径一致性、开发服务器ws代理设置、spring security放行握手路径等。

springboot配合vue实现websocket 常用websocket前后端联调【教程】

Spring Boot + Vue 的 WebSocket 联调失败，八成不是代码写错了，而是握手没过、路径不匹配、或代理/防火墙拦了 ws 协议。

这是最常见问题，本质是前端请求的 URL 根本没被后端识别为 WebSocket 端点。

检查后端是否真正启用了 WebSocket 支持：必须有 @Configuration 类中注册了 ServerEndpointExporter bean（嵌入式 Tomcat 必须加；若部署到独立 Tomcat 则不需要）
确认前端连接地址协议和路径完全匹配：比如后端用 @ServerEndpoint("/chat")，前端必须用 new WebSocket("ws://localhost:8080/chat") —— 注意是 ws://（开发环境），不是 http://；生产环境若走 HTTPS，则必须用 wss://
Vue 开发服务器（Vite/Webpack Dev Server）默认不代理 ws 协议。若后端端口不是 8080，需在 vite.config.ts 中显式配置：
```
export default defineConfig({ server: { proxy: { '/ws': { target: 'ws://localhost:8080', ws: true, changeOrigin: true } } } )
```
注意：这里 /ws 是前端请求路径前缀，必须和实际连接 URL 的 path 部分一致（如 new WebSocket("/ws/chat")）