前后端分离之使用websocket，springboot+vue

最新推荐文章于 2025-07-01 10:28:58 发布

浅笑临轩

最新推荐文章于 2025-07-01 10:28:58 发布

阅读量6.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：错误以及解决方案 websocket Vue

本文链接：https://blog.csdn.net/qq_34075464/article/details/101532293

本文介绍了在前后端分离的项目中，如何使用WebSocket进行通信。作者通过自己的错误经历提醒读者，遇到问题首先要独立思考。文章详细讲解了后端SpringBoot的WebSocket配置和前端Vue.js的实现，并列举了配置过程中的注意事项，如URL路径、端口设置、版本匹配等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---前言提要---

在百度、谷歌、CSDN、博客园...几经折腾之后，终于达到了我想要的结果。springboot+vue，前后端分离项目，网上的大多不是前后端分离，所以排错怎么也排不出，说到底我产生了依赖，只想从网上寻找答案，然后简单的一了百了，而忘记了思考，为什么出错。

其实错误很简单，我是前后端分离，前后端项目的端口都不一样，一个是8080，一个是自定义的63000，在前端发起的请求到了前端，而前端没有启动websocket这个服务，所以连接超时，无关配置无关代码，只是请求错了而已。

这个教训告诉我们，遇到事先自己想一想，想不通的时候再抱着疑问一边想一边去查资料。

---正确配置---

后端pom：（可参考网上其他教程pom导包）

<!--ws(start)-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
    </dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>1.3.5.RELEASE</version>
</dependency>
<!--ws(end)-->

后端websock配置文件：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration  
public class WebSocketConfig {  
    @Bean  
    public ServerEndpointExporter serverEndpointExporter() {  
        return new ServerEndpointExporter();