WebSocket 消息推送：Spring Boot + Vue3 实现一个“网页版即时聊天室”（附源码）

💬 前言：为什么轮询 (Polling) 被淘汰了？

在 Web 1.0 时代，如果我们要实现“收到新消息提醒”，通常只能让前端每隔 2 秒发一次 HTTP 请求问后端：“有新消息吗？”
这叫短轮询。

• 缺点：服务器压力大，99% 的请求都是无用的，且消息有延迟。

到了 Web 2.0，WebSocket横空出世。
它像一条**“专线管道”，一旦建立连接，服务器就可以主动**把消息推给前端。

• 优点：零延迟，服务器资源消耗极低，全双工通讯。

今天，我们就用最主流的Spring Boot + Vue3，在 30 分钟内手撸一个多人在线聊天室！

---

🏗️ 系统架构：一条永不断的线

我们要实现的功能：

1. 用户登录（输入昵称）。
2. 进入群聊，显示在线人数。
3. 发送消息，所有人（包括自己）实时收到。

架构设计图：

---

💻 后端实战：Spring Boot + WebSocket

不需要 Netty，Spring Boot 自带的 WebSocket 模块足够应对中小规模场景。

1. 引入依赖

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

2. 开启支持 (WebSocketConfig.java)

@ConfigurationpublicclassWebSocketConfig{@BeanpublicServerEndpointExporterserverEndpointExporter(){returnnewServerEndpointExporter();}}

3. 核心服务 (WebSocketServer.java)

这是整个聊天室的心脏。

@ServerEndpoint("/ws/{username}")// 前端连接地址: ws://localhost:8080/ws/张三@Component@Slf4jpublicclassWebSocketServer{// 存放每个客户端对应的 WebSocketServer 对象privatestaticConcurrentHashMap<String,Session>onlineSessions=newConcurrentHashMap<>();@OnOpenpublicvoidonOpen(Sessionsession,@PathParam("username")Stringusername){onlineSessions.put(username,session);broadcast("系统消息: 欢迎用户 ["+username+"] 加入群聊！");}@OnClosepublicvoidonClose(@PathParam("username")Stringusername){onlineSessions.remove(username);broadcast("系统消息: 用户 ["+username+"] 已离开。");}@OnMessagepublicvoidonMessage(Stringmessage,Sessionsession,@PathParam("username")Stringusername){// 收到消息，转发给所有人broadcast("【"+username+"】: "+message);}// 群发消息辅助方法privatevoidbroadcast(Stringmsg){onlineSessions.forEach((user,session)->{try{session.getBasicRemote().sendText(msg);}catch(IOExceptione){e.printStackTrace();}});}}

---

🎨 前端实战：Vue 3 Composition API

Vue3 写 WebSocket 简直不要太丝滑。

<template><divclass="chat-box"><divclass="msg-list"ref="msgRef"><divv-for="msg in msgList":key="msg">{{ msg }}</div></div><divclass="input-area"><inputv-model="inputMsg"placeholder="输入消息..."/><button@click="sendMsg">发送</button></div></div></template><scriptsetup>import{ref,onMounted,onUnmounted}from'vue';constusername='User_'+Math.floor(Math.random()*1000);constsocketUrl=`ws://localhost:8080/ws/${username}`;constmsgList=ref([]);constinputMsg=ref('');letws=null;onMounted(()=>{initWebSocket();});constinitWebSocket=()=>{ws=newWebSocket(socketUrl);ws.onopen=()=>{msgList.value.push("✅ 连接服务器成功...");};ws.onmessage=(event)=>{// 收到后端推送的消息msgList.value.push(event.data);};};constsendMsg=()=>{if(ws&&inputMsg.value){ws.send(inputMsg.value);inputMsg.value='';}};onUnmounted(()=>{if(ws)ws.close();// 页面销毁时断开连接});</script>

---

🛡️ 进阶挑战：心跳检测与断线重连

在真实生产环境中，网络是不稳定的。如果用户断网了，WebSocket 连接会“假死”。
你需要实现心跳机制 (Heartbeat)：

1. Ping/Pong：前端每隔 30 秒发送一个 “PING”，后端回复 “PONG”。
2. 断线重连：前端监听ws.onclose事件，如果非主动断开，则在 5 秒后尝试重新new WebSocket()。

(这部分代码在下方的源码中均有体现)

---

🎁 源码推荐与下载

如果你想看企业级的 IM 架构（支持千万级并发、集群部署、Redis 存储离线消息），那么仅仅看 Spring Boot 原生 WebSocket 是不够的，你需要引入Netty。

我为你精选了一个 GitHub 上1.4万+ Star的神级项目，它是 Java 领域即时通讯的标杆。

开源项目：CIM (Cross-platform Instant Messaging)

• GitHub 地址：https://github.com/crossoverJie/cim
• 推荐理由：
  1. 基于Netty + Spring Boot + Redis构建，性能吊打原生 WebSocket。
  2. 代码结构清晰，包含命令行客户端、Web 客户端、安卓客户端。
  3. 文档极其详细，适合做毕业设计或企业内部通讯系统的底座。

---