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

news2025/5/20 9:01:45

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

在这里插入图片描述

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