增加代客下单页面

src/utils/websocket.ts

@@ -1,6 +1,36 @@
+import qs from "qs";
+import { useUserStoreHook } from "@/store";
+
+const user = useUserStoreHook()
+
+export interface ApifoxModel {
+  account: string;
+  /**
+   * 操作类型
+   */
+  operate_type: string;
+  shop_id: string;
+  /**
+   * 桌码
+   */
+  table_code?: string;
+  /**
+   * 消息类型
+   */
+  type: string;
+  [property: string]: any;
+}
+export type msgType = 'add' | 'reduce' | 'remove' | 'edit' | 'init' | 'cleanup' | 'del'
 class WebSocketManager {
   private client: WebSocket | null = null;
   private connected: boolean = false;
+  private initParams: ApifoxModel = {
+    type: 'manage',
+    account: `${user.userInfo.shopId}`,
+    operate_type: 'init',
+    table_code: '',
+    shop_id: `${user.userInfo.shopId}`,
+  };
   private onMessage: (message: any) => void = function () { };
   private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
   private type: string = 'manage';
@@ -22,11 +52,13 @@ class WebSocketManager {
       console.log("客户端已存在并且连接正常");
       return this.client;
     }
-    this.client = new WebSocket(endpoint)
+    const url = qs.stringify(this.initParams)
+    console.log(this.initParams)
+    this.client = new WebSocket(endpoint + '?' + url);
     this.client.onopen = () => {
       this.connected = true;
       console.log("WebSocket 连接已建立");
-      this.sendMessage('test')
+      this.sendMessage(this.initParams)
     };
     this.client.onclose = () => {
       this.connected = false;
@@ -42,28 +74,45 @@ class WebSocketManager {
     };
     this.client.onmessage = (event) => {
       const message = event.data;
-      this.getMessage(message)
+      const msg = JSON.parse(message)
+      if (msg && msg.msg_id) {
+        this.onMessageHandler({ msg_id: msg.msg_id })
+      }
+      this.onMessage(msg);
     };
   }
-  private getMessage(message: any) {
-    console.log("收到消息:", message);
+
+  // 消息回执
+  public onMessageHandler(data: any) {
+    if (this.client) {
+      this.client.send(JSON.stringify({ ...data, type: 'receipt' }));
+    }
   }
 
   // 订阅主题
-  public subscribeToTopic(topic: string, onMessage: (message: string) => void) {
-    console.log(`正在订阅主题: ${topic}`);
-    if (!this.client || !this.connected) {
-      this.setupWebSocket();
-    }
-    if (this.connected) {
-      this.onMessage = onMessage;
+  public subscribeToTopic(initParams: ApifoxModel, onMessage: (message: any) => void) {
+    console.log(`正在订阅主题: `);
+    console.log(initParams);
+
+    this.initParams = { ...this.initParams, ...initParams }
+    if (this.client && this.connected) {
+      this.disconnect();
     }
+    this.setupWebSocket();
+    this.onMessage = onMessage;
   }
   public sendMessage(message: any) {
     if (this.client) {
-      this.client.send(message);
+      const msg = JSON.stringify({
+        ...this.initParams,
+        ...message,
+      })
+      this.client.send(msg);
     }
   }
+  public canSendMessage() {
+    return this.client && this.connected;
+  }
   // 断开 WebSocket 连接
   public disconnect() {
     if (this.client) {