WebSocket 库存实时监控实战（Java 服务端 + 前端）

目录一、技术选型二、搭建 Spring Boot 服务端1. 创建项目 引入依赖2. WebSocket 配置类3. 库存实体类库存 预警规则4. WebSocket 服务端核心代码5. 提供接口手动修改库存并推送6. 启动类三、前端页面实时监控 预警提醒四、运行 测试1. 启动 Spring Boot 服务2. 访问前端页面3. 测试功能五、核心功能说明六、生产环境优化建议总结本文用Spring Boot WebSocket实现库存实时推送、缺货 / 超储预警的完整功能包含服务端、前端、库存模拟、预警逻辑代码可直接运行。一、技术选型服务端Spring Boot 3.x WebSocket前端原生 HTML JS无需框架通信WebSocket 长连接功能实时推送库存、缺货预警、超储预警、主动刷新库存二、搭建 Spring Boot 服务端1. 创建项目 引入依赖创建 Spring Boot 项目在pom.xml添加 WebSocket 依赖dependencies !-- Spring Boot Web -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- WebSocket 核心依赖 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-websocket/artifactId /dependency /dependencies2. WebSocket 配置类开启 WebSocket 支持import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.server.standard.ServerEndpointExporter; Configuration public class WebSocketConfig { /** * 注入 ServerEndpointExporter自动注册 ServerEndpoint 注解的 Bean */ Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }3. 库存实体类库存 预警规则import lombok.AllArgsConstructor; import lombok.Data; import java.math.BigDecimal; Data AllArgsConstructor public class Stock { private String goodsId; // 商品ID private String goodsName; // 商品名称 private Integer stockNum; // 当前库存 private Integer warnStockMin;// 缺货预警阈值 此值报警 private Integer warnStockMax;// 超储预警阈值 此值报警 }4. WebSocket 服务端核心代码实现长连接、推送库存、群发消息、预警逻辑import com.alibaba.fastjson2.JSON; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; /** * WebSocket 服务端 * 连接地址ws://localhost:8080/ws/{客户端ID} */ ServerEndpoint(/ws/{clientId}) Component public class StockWebSocketServer { // 线程安全的集合保存所有 WebSocket 连接 private static final CopyOnWriteArraySetStockWebSocketServer webSocketSet new CopyOnWriteArraySet(); // 与某个客户端的会话需要通过它发送数据 private Session session; // 客户端ID private String clientId; /** * 连接建立成功调用 */ OnOpen public void onOpen(Session session, PathParam(clientId) String clientId) { this.session session; this.clientId clientId; webSocketSet.add(this); System.out.println(新客户端接入 clientId 当前在线人数 webSocketSet.size()); // 连接成功后主动推送一次库存 pushStockInfo(); } /** * 连接关闭调用 */ OnClose public void onClose() { webSocketSet.remove(this); System.out.println(客户端断开 clientId 当前在线人数 webSocketSet.size()); } /** * 收到客户端消息 */ OnMessage public void onMessage(String message, Session session) { System.out.println(收到客户端[ clientId ]消息 message); // 客户端主动请求刷新库存 if (refresh.equals(message)) { pushStockInfo(); } } /** * 发生错误 */ OnError public void onError(Session session, Throwable error) { System.out.println(WebSocket 发生错误); error.printStackTrace(); } /** * 服务端推送消息给当前客户端 */ public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); } // 库存推送核心方法 public void pushStockInfo() { try { // 1. 模拟真实库存数据实际项目从数据库/Redis读取 Stock stock new Stock( GOODS001, 华为Mate70, (int) (Math.random() * 150), // 随机库存 0~150 20, // 低于20缺货预警 100 // 高于100超储预警 ); // 2. 预警判断 String warnMsg ; if (stock.getStockNum() stock.getWarnStockMin()) { warnMsg 【缺货预警】商品 stock.getGoodsName() 库存不足当前库存 stock.getStockNum(); } else if (stock.getStockNum() stock.getWarnStockMax()) { warnMsg 【超储预警】商品 stock.getGoodsName() 库存过多当前库存 stock.getStockNum(); } // 3. 封装推送消息 PushMessage pushMessage new PushMessage(stock, warnMsg); String json JSON.toJSONString(pushMessage); // 4. 推送给当前客户端 sendMessage(json); System.out.println(推送库存给[ clientId ] json); } catch (Exception e) { e.printStackTrace(); } } /** * 统一推送库存给所有客户端外部调用比如库存修改后触发 */ public static void pushAllStock() { for (StockWebSocketServer webSocket : webSocketSet) { webSocket.pushStockInfo(); } } // 推送消息结构 Data AllArgsConstructor static class PushMessage { private Stock stock; // 库存数据 private String warnMsg; // 预警消息为空正常 } }5. 提供接口手动修改库存并推送模拟业务系统修改库存后主动触发全量推送import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; RestController RequestMapping(/stock) public class StockController { /** * 手动刷新库存并推送给所有前端 * 访问http://localhost:8080/stock/push */ GetMapping(/push) public String pushStock() { StockWebSocketServer.pushAllStock(); return 库存已刷新并推送给所有前端; } }6. 启动类import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; SpringBootApplication public class WebSocketStockApplication { public static void main(String[] args) { SpringApplication.run(WebSocketStockApplication.class, args); } }三、前端页面实时监控 预警提醒创建index.html直接放在resources/static目录下!DOCTYPE html html langzh-CN head meta charsetUTF-8 title库存实时监控系统/title style body { text-align: center; margin-top: 50px; } .stock-box { font-size: 22px; margin: 20px; padding: 15px; border: 1px solid #ccc; } .warn { color: red; font-weight: bold; font-size: 24px; } .normal { color: green; font-size: 22px; } #refreshBtn { padding: 10px 20px; font-size: 16px; cursor: pointer; } /style /head body h1库存实时监控/h1 div idstockInfo classstock-box normal等待连接.../div button idrefreshBtn手动刷新库存/button script let ws; const clientId client_ new Date().getTime(); // 唯一客户端ID const stockInfo document.getElementById(stockInfo); const refreshBtn document.getElementById(refreshBtn); // 连接 WebSocket function connect() { // ws:// 协议 服务端地址 ws new WebSocket(ws://localhost:8080/ws/ clientId); // 连接成功 ws.onopen function () { stockInfo.innerText WebSocket 连接成功正在监控库存...; stockInfo.className stock-box normal; }; // 收到服务端推送的库存数据 ws.onmessage function (event) { const data JSON.parse(event.data); showStock(data); }; // 连接关闭 ws.onclose function () { stockInfo.innerText 连接断开正在重连...; stockInfo.className stock-box warn; setTimeout(connect, 2000); // 自动重连 }; // 连接错误 ws.onerror function () { stockInfo.innerText 连接异常; stockInfo.className stock-box warn; }; } // 显示库存 预警 function showStock(data) { const stock data.stock; const warnMsg data.warnMsg; if (warnMsg) { // 缺货/超储预警 stockInfo.innerText warnMsg; stockInfo.className stock-box warn; // 弹出浏览器提醒需要授权 new Notification(库存预警, { body: warnMsg }); } else { // 库存正常 stockInfo.innerText 商品 stock.goodsName \n 库存 stock.stockNum \n 缺货阈值 stock.warnStockMin 超储阈值 stock.warnStockMax; stockInfo.className stock-box normal; } } // 手动刷新库存 refreshBtn.onclick function () { if (ws.readyState 1) { ws.send(refresh); } else { alert(连接未建立无法刷新); } }; // 启动连接 connect(); /script /body /html四、运行 测试1. 启动 Spring Boot 服务2. 访问前端页面打开浏览器访问http://localhost:8080/index.html3. 测试功能自动推送页面加载后自动获取库存实时预警库存 20 → 缺货预警红色提醒 浏览器通知库存 100 → 超储预警20~100 → 正常绿色手动刷新点击按钮立即拉取最新库存全量推送浏览器访问http://localhost:8080/stock/push所有打开的页面都会实时收到新库存五、核心功能说明长连接WebSocket 一次连接永久通信比轮询更高效实时推送服务端主动推送库存前端无需刷新预警机制服务端判断缺货 / 超储实时推送给前端自动重连前端断开后自动重连保证监控稳定集群兼容可对接 Redis 发布订阅实现多服务端推送六、生产环境优化建议库存数据从MySQL/Redis读取不要用随机数加入心跳检测防止假连接预警消息存入数据库方便查询历史预警对接短信 / 企业微信 / 钉钉预警通知集群部署时用Redis WebSocket广播消息总结这套代码是可直接运行的完整实战项目包含服务端 前端 预警逻辑核心是StockWebSocketServer实现连接管理、库存推送、预警判断前端自动重连 实时展示 桌面提醒体验接近生产系统可以直接扩展商品列表、历史记录、多仓库监控等功能