WebSocket实战，后台修改订单状态，前台实现数据变更，提供前端和后端多种语言

案例场景：

在实际的后台中需要变更某个订单的状态，在官网中不刷新页面，可以自动更新状态

在前端页面实现订单状态的实时更新（不刷新页面），可以通过 WebSocket 的方式与后台保持通信，监听订单状态的变化并更新页面。以下是实现方式的详细说明：

后端支持 WebSocket 服务: 后端需要支持 WebSocket，并在订单状态变更时推送消息到前端。

前端实现 WebSocket 连接: 在官网前端页面通过 WebSocket 接收订单状态变更的通知。

方法 1：使用 WebSocket（推荐） 本次后端使用GO实现

检查连接是否成功，可以在浏览器开发者工具中查看 WebSocket 连接状态。

    const socket = new WebSocket('ws://192.168.0.123:8080/ws')socket.onopen = () => {console.log('WebSocket connected')socket.send('Hello, server!')}socket.onmessage = event => {console.log('Message from server:', event.data)}socket.onclose = () => {console.log('WebSocket connection closed')}socket.onerror = error => {console.error('WebSocket error:', error)}

  // 建立 WebSocket 连接const socket = new WebSocket('ws://192.168.0.123:8080/ws')// 监听连接打开事件socket.addEventListener('open', () => {console.log('WebSocket connected')})// 接收服务器推送的消息socket.addEventListener('message', event => {const data = JSON.parse(event.data)if (data.orderId && data.status) {// 假设订单状态在页面中通过订单ID显示updateOrderStatus(data.orderId, data.status)}})// 更新订单状态的函数function updateOrderStatus (orderId, newStatus) {const orderElement = document.querySelector(`#gong`)if (orderElement) {orderElement.textContent = newStatus // 假设状态是文本console.log(`订单 ${orderId} 状态更新为: ${newStatus}`)}}

后端推送消息格式（示例）:


{"orderId": "12345","status": "已完成"
}

后端多种语言

1. Node.js 使用 ws 库 安装 WebSocket 库

npm install ws

const WebSocket = require('ws');// 创建 WebSocket 服务
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', (ws) => {console.log('客户端已连接');// 接收消息ws.on('message', (message) => {console.log(`收到消息: ${message}`);});// 向客户端发送消息ws.send(JSON.stringify({ orderId: '12345', status: '已完成' }));// 模拟订单状态更新推送setInterval(() => {ws.send(JSON.stringify({ orderId: '12345', status: '已完成' }));}, 5000);
});console.log('WebSocket 服务已启动，监听端口 8080');

2、Python 使用 FastAPI 和 websockets 安装依赖

pip install fastapi uvicorn websockets

from fastapi import FastAPI, WebSocket
import asyncioapp = FastAPI()@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):await websocket.accept()print("客户端已连接")# 模拟向客户端发送订单状态while True:await asyncio.sleep(5)await websocket.send_json({"orderId": "12345", "status": "已完成"})

启动服务

uvicorn main:app --reload --host 0.0.0.0 --port 8000

3、Java 使用 Spring Boot 添加依赖

在 pom.xml 中添加 Spring WebSocket 依赖：

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

配置 WebSocketimport org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(new OrderStatusHandler(), "/ws").setAllowedOrigins("*");}
}

WebSocket Handlerimport org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.TextMessage;public class OrderStatusHandler extends TextWebSocketHandler {@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("客户端已连接");// 模拟订单状态推送new Thread(() -> {try {while (true) {session.sendMessage(new TextMessage("{\"orderId\": \"12345\", \"status\": \"已完成\"}"));Thread.sleep(5000);}} catch (Exception e) {e.printStackTrace();}}).start();}
}

3、Go 使用 gorilla/websocket 安装依赖

go get github.com/gorilla/websocket

package mainimport ("fmt""net/http""time""github.com/gorilla/websocket"
)var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true },
}func handler(w http.ResponseWriter, r *http.Request) {conn, err := upgrader.Upgrade(w, r, nil)if err != nil {fmt.Println("连接失败:", err)return}defer conn.Close()fmt.Println("客户端已连接")// 模拟订单状态推送for {time.Sleep(5 * time.Second)err = conn.WriteJSON(map[string]interface{}{"orderId": "12345","status":  "已完成",})if err != nil {fmt.Println("发送消息失败:", err)break}}
}func main() {http.HandleFunc("/ws", handler)fmt.Println("WebSocket 服务已启动，监听端口 8080")http.ListenAndServe(":8080", nil)
}

最佳实践:

在实际生产环境中，可以结合 消息队列（如 Kafka、RabbitMQ）处理大规模 WebSocket 消息推送。
实现断线重连功能，确保客户端始终连接到服务端。

1. 基本规则

WebSocket 使用 ws:// 或 wss:// 协议：

ws://：用于未加密的连接（通常在本地或不使用 HTTPS 的环境中使用）。
wss://：用于加密的连接（必须在 HTTPS 环境中使用）。
地址的格式类似于 HTTP，但协议是 WebSocket，端口与后端配置保持一致：
ws://host:port/path
wss://host:port/path
确保 /ws 路径与后端路由匹配。