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

Spring Boot + Vue 的 WebSocket 联调失败,八成不是代码写错了,而是握手没过、路径不匹配、或代理/防火墙拦了 ws 协议。
WebSocket 连接 404 或直接报错 ERR_CONNECTION_REFUSED
这是最常见问题,本质是前端请求的 URL 根本没被后端识别为 WebSocket 端点。
- 检查后端是否真正启用了 WebSocket 支持:必须有
@Configuration类中注册了ServerEndpointExporterbean(嵌入式 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({<br> server: {<br> proxy: {<br> '/ws': {<br> target: 'ws://localhost:8080',<br> ws: true,<br> changeOrigin: true<br> }<br> }<br> }<br>)注意:这里/ws是前端请求路径前缀,必须和实际连接 URL 的 path 部分一致(如new WebSocket("/ws/chat"))
连接成功但收不到消息,或 onMessage 不触发
说明 TCP 连接建立了,但消息路由或序列化出了问题。
- 后端使用
@ServerEndpoint注解时,所有消息收发都靠Session.getBasicRemote().sendText()手动推送,没有自动消息绑定机制 —— 检查你是不是忘了调用session.getBasicRemote().sendText(...),而不是只存了 session - 如果后端用了 STOMP(即
@EnableWebSocketMessageBroker),前端就不能用原生WebSocket对象直连,必须用stompjs库,并连接到/ws端点、订阅/topic/xxx—— 两种模式(原生 WebSocket vs STOMP)不能混用 - 消息体类型要一致:后端
@OnMessage方法参数是String,前端就别发JSON.stringify({})后不加任何处理;反之亦然。建议统一用字符串传 JSON,再手动JSON.parse()
Vue 中 WebSocket 断开后无法自动重连
原生 WebSocket 对象没有内置重连逻辑,断开即销毁,必须自己实现。
Vue 3 组合式 API 与
相关专题
Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。
2543
2023.08.11
c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。
3249
2023.06.20
c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。
1260
2023.08.02
数据结构是指将数据按照一定的方式组织和存储的方法。它是计算机科学中的重要概念,用来描述和解决实际问题中的数据组织和处理问题。数据结构可以分为线性结构和非线性结构。线性结构包括数组、链表、堆栈和队列等,而非线性结构包括树和图等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。
1218
2023.08.09
c语言random函数用法:1、random.random,随机生成(0,1)之间的浮点数;2、random.randint,随机生成在范围之内的整数,两个参数分别表示上限和下限;3、random.randrange,在指定范围内,按指定基数递增的集合中获得一个随机数;4、random.choice,从序列中随机抽选一个数;5、random.shuffle,随机排序。
1376
2023.09.05
Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。
60
2026.10.16
热门下载
相关下载
精品课程
最新文章


