当前位置：首页 > web >正文

[特殊字符] 苍穹外卖项目中的 WebSocket 实战：实现来单与催单提醒功能

web 2025/5/17 17:09:35

🚀 苍穹外卖项目中的 WebSocket 实战：实现来单与催单提醒功能

在这里插入图片描述

在现代 Web 应用中，实时通信成为提升用户体验的关键技术之一。WebSocket 作为一种在单个 TCP 连接上进行全双工通信的协议，被广泛应用于需要实时数据交换的场景，如在线聊天、实时通知等。本文将结合苍穹外卖项目，介绍如何使用 WebSocket 实现来单提醒与催单提醒功能。

📖 WebSocket 简介 WebSocket 是一种网络通信协议，允许在客户端和服务器之间建立持久的连接，双方可以随时发送数据。与传统的 HTTP 请求-响应模式不同，WebSocket 提供了更高效的通信方式，特别适用于需要实时交互的应用场景。

🛠️ 项目中 WebSocket 的应用场景在苍穹外卖项目中，WebSocket 被用于实现以下功能：

来单提醒：当用户下单并支付成功后，系统通过 WebSocket 向商家管理端发送通知，提示有新订单。
- 催单提醒：用户在等待订单过程中，可以点击“催单”按钮，系统通过 WebSocket 向商家管理端发送催单通知。这些功能依赖于客户端与服务器之间的实时通信，确保商家能够及时响应用户的需求。

🧱 实现步骤

引入WebSocket依赖
在pom.xml中添加以下依赖：

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

配置WebSocket
创建配置类WebSocketConfiguration，注册WebSocket组件：

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

创建WebSocket服务端
实现WebSocketServer类，处理连接、消息收发逻辑：

@Component  
@ServerEndpoint("/ws/{sid}")  
public class WebSocketServer {  private static Map<String, Session> sessionMap = new HashMap<>();  @OnOpen  public void onOpen(Session session, @PathParam("sid") String sid) {  sessionMap.put(sid, session);  }  @OnMessage  public void onMessage(String message, @PathParam("sid") String sid) {  // 处理接收到的消息  }  @OnClose  public void onClose(@PathParam("sid") String sid) {  sessionMap.remove(sid);  }  public void sendToAllClient(String message) {  for (Session session : sessionMap.values()) {  try {  session.getBasicRemote().sendText(message);  } catch (Exception e) {  e.printStackTrace();  }  }  }  
}

业务逻辑中集成消息发送

订单支付成功提醒

public void paySuccess(String outTradeNo) {  // 更新订单状态  Orders ordersDB = orderMapper.getByNumber(outTradeNo);  Orders orders = Orders.builder()  .id(ordersDB.getId())  .status(Orders.TO_BE_CONFIRMED)  .payStatus(Orders.PAID)  .checkoutTime(LocalDateTime.now())  .build();  orderMapper.update(orders);  // 构造消息并广播  Map<String, Object> map = new HashMap<>();  map.put("type", 1); // 1=来单提醒  map.put("orderId", ordersDB.getId());  map.put("content", "订单号：" + outTradeNo);  String json = JSON.toJSONString(map);  webSocketServer.sendToAllClient(json);  
}

用户催单提醒

public void reminder(Long id) {  Orders orders = orderMapper.selectByOId(id);  if (orders == null || orders.getStatus() != Orders.TO_BE_CONFIRMED) {  throw new OrderBusinessException("订单状态不允许催单");  }  Map<String, Object> map = new HashMap<>();  map.put("type", 2); // 2=催单提醒  map.put("orderId", id);  map.put("content", "订单号：" + orders.getNumber());  String json = JSON.toJSONString(map);  webSocketServer.sendToAllClient(json);  
}

前端消息处理
建立WebSocket连接并解析通知：

// 初始化连接（clientId为前端用户标识）  
var websocket = new WebSocket("ws://localhost:8080/ws/" + clientId);  // 消息监听  
websocket.onmessage = function(event) {  var data = JSON.parse(event.data);  if (data.type === 1) {  alert("来单提醒：" + data.content);  } else if (data.type === 2) {  alert("催单提醒：" + data.content);  }  
};

🧪 测试与验证

测试流程：

启动后端服务与前端页面，建立WebSocket连接；
模拟用户下单并支付，验证商家端是否弹出“来单提醒”；
触发用户催单操作，验证是否收到“催单提醒”弹窗。

Nginx配置（如需代理）：

location /ws/ {  proxy_pass http://localhost:8080;  proxy_http_version 1.1;  proxy_set_header Upgrade $http_upgrade;  proxy_set_header Connection "Upgrade";  
}