【Web系列十七】Springboot+Vue实现websocket通信

最新推荐文章于 2025-04-02 16:01:28 发布

原创

最新推荐文章于 2025-04-02 16:01:28 发布 · 2.5k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在SpringBoot后端与Vue前端之间实现WebSocket通信。通过在SpringBoot中使用ServerEndpoint注解来创建WebSocket服务，并在Vue中封装WebSocket客户端，实现双方的数据交互与状态管理。

前言

想实现websocket通信并不复杂，这篇文章列举了多种选择，感兴趣的可以移步了解。

一文搞懂四种 WebSocket 使用方式，建议收藏！ - 知乎 (zhihu.com)

而本文是使用ServerEndpoint实现的。

SpringBoot

使用maven添加依赖

maven搭建springboot环境可以参考博主的这篇文章。

【web系列十六】idea下使用Maven搭建spring boot开发环境_Nicholson07的博客-CSDN博客

找到pom.xml添加以下内容

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

创建websocket服务

创建service文件夹及WebSocket.java

@Component
@Slf4j
@ServerEndpoint(value = "/websocket/{sessionId}")
public class WebSocket {
    
    public static int onlineCount = 0;
	
    public static Map<String, WebSocket> clients = new HashMap<String, WebSocket>();
    public Session session;  
    public String  sessionId;  
	
    public String getses

标签