讲师中心 微信公众号
AI工具推荐 视频效率加速

SpringBoot配合Vue实现WebSocket 常用WebSocket前后端联调【教程】

夏涛姑娘_5982

夏涛姑娘_5982

发布时间:2026-06-01 14:23:26

|

207人浏览过

|

来源于php中文网

原创

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

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

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

WebSocket 连接 404 或直接报错 ERR_CONNECTION_REFUSED

这是最常见问题,本质是前端请求的 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({<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-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2543

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6510

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5926

2024.03.19

C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

3249

2023.06.20

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2328

2023.07.25

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

1260

2023.08.02

c语言数据结构
c语言数据结构

数据结构是指将数据按照一定的方式组织和存储的方法。它是计算机科学中的重要概念,用来描述和解决实际问题中的数据组织和处理问题。数据结构可以分为线性结构和非线性结构。线性结构包括数组、链表、堆栈和队列等,而非线性结构包括树和图等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1218

2023.08.09

c语言random函数用法
c语言random函数用法

c语言random函数用法:1、random.random,随机生成(0,1)之间的浮点数;2、random.randint,随机生成在范围之内的整数,两个参数分别表示上限和下限;3、random.randrange,在指定范围内,按指定基数递增的集合中获得一个随机数;4、random.choice,从序列中随机抽选一个数;5、random.shuffle,随机排序。

1376

2023.09.05

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

60

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn