From 2a58e93f966863b0495a597f47d16dab24d28f30 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 20 Nov 2025 10:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0websocket=E8=BF=9E=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/memorial/nfcPairing.vue | 307 ++++++++++++++++++++++++++++++----
 1 file changed, 278 insertions(+), 29 deletions(-)

diff --git a/pages/memorial/nfcPairing.vue b/pages/memorial/nfcPairing.vue
index 7bedc88..dadb0b5 100644
--- a/pages/memorial/nfcPairing.vue
+++ b/pages/memorial/nfcPairing.vue
@@ -6,21 +6,30 @@
     <view class="content">
       <view class="status-card">
         <view class="status-header">
-          <view :class="['status-dot', socketConnected ? 'online' : 'offline']" />
+          <view
+            :class="['status-dot', socketConnected ? 'online' : 'offline']"
+          />
           <text class="status-title">{{ connectionText }}</text>
         </view>
         <text class="status-desc">
           请保持手机在线，等待刷卡设备将NFC卡号传递到本页面。
         </text>
-        <view class="card-box" :class="{ ready: !!cardNo }">
+        <view :class="{ ready: !!cardNo }" class="card-box">
           <text class="card-label">NFC卡号</text>
           <text class="card-value">{{ cardNo || "等待刷卡..." }}</text>
         </view>
-        <view v-if="connectionError" class="error-text">{{ connectionError }}</view>
+        <view v-if="connectionError" class="error-text">
+          <text class="error-content">{{ connectionError }}</text>
+        </view>
         <view v-else-if="lastMessage" class="hint-text">{{ lastMessage }}</view>
         <view class="status-actions">
           <view class="text-btn" @click="handleRetry">重新连接</view>
-          <view class="text-btn" @click="resetCard" v-if="cardNo">清空卡号</view>
+          <view v-if="cardNo" class="text-btn" @click="resetCard"
+            >清空卡号
+          </view>
+          <view v-if="connectionError" class="text-btn" @click="testServerConnection"
+            >测试服务器
+          </view>
         </view>
       </view>
 
@@ -65,10 +74,11 @@
 <script>
 import BaseBackground from "@/components/base-background/base-background.vue";
 import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
-import { getRequestConfig } from "@/utils/request.js";
+import { getRequestConfig, getToken } from "@/utils/request.js";
 import { bindNfcCard } from "@/api/memorial/index.js";
 
-const NFC_WS_PATH = "/ws/nfc/swipeCard";
+const WS_PATH = "/ws/device";
+const FIXED_MAC = "111111111111";
 
 export default {
   components: {
@@ -87,6 +97,7 @@ export default {
       lastMessage: "",
       usingGlobalSocketEvents: false,
       globalSocketHandlers: null,
+      connectTimeout: null,
     };
   },
   computed: {
@@ -116,11 +127,39 @@ export default {
     buildSocketUrl() {
       try {
         const { baseUrl } = getRequestConfig();
-        if (!baseUrl) return "";
-        const protocol = baseUrl.startsWith("https") ? "wss" : "ws";
+        if (!baseUrl) {
+          console.error("buildSocketUrl: baseUrl 为空");
+          return "";
+        }
+
+        // 获取当前登录的 token
+        const token = getToken();
+        if (!token) {
+          console.error("buildSocketUrl: token 为空，请先登录");
+          this.connectionError = "未登录，请先登录后再试";
+          return "";
+        }
+
+        // 根据 baseUrl 的协议自动选择 ws 或 wss
+        const isHttps = baseUrl.startsWith("https://");
+        const protocol = isHttps ? "wss" : "ws";
         const host = baseUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
-        const query = this.unitId ? `?unitId=${this.unitId}` : "";
-        return `${protocol}://${host}${NFC_WS_PATH}${query}`;
+        
+        // 构建查询参数：token 和固定的 mac
+        const query = `?token=${encodeURIComponent(token)}&mac=${FIXED_MAC}`;
+        const url = `${protocol}://${host}${WS_PATH}${query}`;
+        
+        console.log("构建 WebSocket URL:", {
+          baseUrl,
+          protocol,
+          host,
+          path: WS_PATH,
+          token: token ? `${token.substring(0, 20)}...` : "无",
+          mac: FIXED_MAC,
+          finalUrl: url.replace(token, "***"), // 日志中隐藏完整token
+        });
+        
+        return url;
       } catch (error) {
         console.error("构建WebSocket地址失败", error);
         return "";
@@ -132,30 +171,76 @@ export default {
       const url = this.buildSocketUrl();
       if (!url) {
         this.connectionError = "缺少WebSocket地址，请检查配置";
+        console.error("initSocket: URL 构建失败");
         return;
       }
       this.cleanupSocket();
       console.log("NFC配对页面发起WebSocket连接:", url);
-      this.socketTask = uni.connectSocket({ url });
-      if (!this.socketTask) {
-        this.connectionError = "当前环境不支持WebSocket";
-        return;
-      }
-      if (typeof this.socketTask.onOpen === "function") {
-        this.bindTaskSocketEvents();
-      } else {
-        this.bindGlobalSocketEvents();
+      
+      try {
+        // 添加连接超时处理
+        this.connectTimeout = setTimeout(() => {
+          if (!this.socketConnected) {
+            console.error("WebSocket 连接超时");
+            this.connectionError = "连接超时，请检查网络和服务器状态";
+            this.cleanupSocket();
+          }
+        }, 10000); // 10秒超时
+
+        this.socketTask = uni.connectSocket({ 
+          url,
+          success: (res) => {
+            console.log("uni.connectSocket success:", res);
+          },
+          fail: (err) => {
+            console.error("uni.connectSocket fail:", err);
+            clearTimeout(this.connectTimeout);
+            this.connectionError = `连接失败: ${err.errMsg || "未知错误"}`;
+            this.socketConnected = false;
+          }
+        });
+        
+        if (!this.socketTask) {
+          clearTimeout(this.connectTimeout);
+          this.connectionError = "当前环境不支持WebSocket";
+          console.error("initSocket: socketTask 为 null");
+          return;
+        }
+        
+        if (typeof this.socketTask.onOpen === "function") {
+          console.log("使用 Task 级别事件绑定", this.socketTask);
+          this.bindTaskSocketEvents();
+        } else {
+          console.log("使用全局事件绑定", this.socketTask);
+          this.bindGlobalSocketEvents();
+        }
+      } catch (error) {
+        console.error("initSocket 异常:", error);
+        clearTimeout(this.connectTimeout);
+        this.connectionError = `连接异常: ${error.message || "未知错误"}`;
       }
     },
     cleanupSocket() {
+      // 清除连接超时定时器
+      if (this.connectTimeout) {
+        clearTimeout(this.connectTimeout);
+        this.connectTimeout = null;
+      }
+      
       if (this.socketTask && typeof this.socketTask.close === "function") {
         try {
           this.socketTask.close();
+          console.log("WebSocket 连接已关闭 (Task级别)");
         } catch (error) {
           console.warn("关闭WebSocket失败", error);
         }
       } else {
-        uni.closeSocket && uni.closeSocket({});
+        try {
+          uni.closeSocket && uni.closeSocket({});
+          console.log("WebSocket 连接已关闭 (全局)");
+        } catch (error) {
+          console.warn("关闭WebSocket失败", error);
+        }
       }
       this.unbindGlobalSocketEvents();
       this.socketTask = null;
@@ -164,18 +249,54 @@ export default {
     bindTaskSocketEvents() {
       if (!this.socketTask) return;
       this.socketTask.onOpen(() => {
-        console.log("NFC WebSocket 已连接");
+        console.log("NFC WebSocket 已连接 (Task级别)");
+        if (this.connectTimeout) {
+          clearTimeout(this.connectTimeout);
+          this.connectTimeout = null;
+        }
         this.socketConnected = true;
         this.connectionError = "";
+        this.lastMessage = "连接成功，等待刷卡...";
       });
       this.socketTask.onClose((event) => {
-        console.warn("NFC WebSocket 连接关闭", event);
+        console.warn("NFC WebSocket 连接关闭 (Task级别)", event);
+        if (this.connectTimeout) {
+          clearTimeout(this.connectTimeout);
+          this.connectTimeout = null;
+        }
         this.socketConnected = false;
         this.socketTask = null;
+        if (!this.connectionError) {
+          this.connectionError = "连接已断开";
+        }
       });
       this.socketTask.onError((error) => {
-        console.error("NFC WebSocket 错误", error);
-        this.connectionError = "连接失败，请重试";
+        console.error("NFC WebSocket 错误 (Task级别)", error);
+        if (this.connectTimeout) {
+          clearTimeout(this.connectTimeout);
+          this.connectTimeout = null;
+        }
+        
+        // 解析错误信息
+        let errorMsg = error.errMsg || error.message || "连接失败";
+        let userFriendlyMsg = "连接失败";
+        
+        // 处理 Invalid HTTP status 错误
+        if (errorMsg.includes("Invalid HTTP status") || error.errCode === 1004) {
+          userFriendlyMsg = "服务器不支持WebSocket或路径不存在\n请检查：\n1. 服务器是否正常运行\n2. WebSocket路径是否正确\n3. 服务器是否支持WebSocket协议";
+          console.error("WebSocket握手失败，可能原因：", {
+            url: this.buildSocketUrl(),
+            errorCode: error.errCode,
+            errorMsg: errorMsg,
+            suggestion: "服务器可能返回了404或500错误，请检查服务器日志"
+          });
+        } else if (errorMsg.includes("timeout")) {
+          userFriendlyMsg = "连接超时，请检查网络连接";
+        } else if (errorMsg.includes("fail")) {
+          userFriendlyMsg = "网络连接失败，请检查网络和服务器地址";
+        }
+        
+        this.connectionError = userFriendlyMsg;
         this.socketConnected = false;
       });
       this.socketTask.onMessage((event) => {
@@ -187,17 +308,53 @@ export default {
       this.usingGlobalSocketEvents = true;
       this.globalSocketHandlers = {
         open: () => {
-          console.log("NFC WebSocket 已连接 (global handler)");
+          console.log("NFC WebSocket 已连接 (全局事件)");
+          if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+          }
           this.socketConnected = true;
           this.connectionError = "";
+          this.lastMessage = "连接成功，等待刷卡...";
         },
         close: (event) => {
-          console.warn("NFC WebSocket 连接关闭", event);
+          console.warn("NFC WebSocket 连接关闭 (全局事件)", event);
+          if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+          }
           this.socketConnected = false;
+          if (!this.connectionError) {
+            this.connectionError = "连接已断开";
+          }
         },
         error: (error) => {
-          console.error("NFC WebSocket 错误", error);
-          this.connectionError = "连接失败，请重试";
+          console.error("NFC WebSocket 错误 (全局事件)", error);
+          if (this.connectTimeout) {
+            clearTimeout(this.connectTimeout);
+            this.connectTimeout = null;
+          }
+          
+          // 解析错误信息
+          let errorMsg = error.errMsg || error.message || "连接失败";
+          let userFriendlyMsg = "连接失败";
+          
+          // 处理 Invalid HTTP status 错误
+          if (errorMsg.includes("Invalid HTTP status") || error.errCode === 1004) {
+            userFriendlyMsg = "服务器不支持WebSocket或路径不存在\n请检查：\n1. 服务器是否正常运行\n2. WebSocket路径是否正确\n3. 服务器是否支持WebSocket协议";
+            console.error("WebSocket握手失败，可能原因：", {
+              url: this.buildSocketUrl(),
+              errorCode: error.errCode,
+              errorMsg: errorMsg,
+              suggestion: "服务器可能返回了404或500错误，请检查服务器日志"
+            });
+          } else if (errorMsg.includes("timeout")) {
+            userFriendlyMsg = "连接超时，请检查网络连接";
+          } else if (errorMsg.includes("fail")) {
+            userFriendlyMsg = "网络连接失败，请检查网络和服务器地址";
+          }
+          
+          this.connectionError = userFriendlyMsg;
           this.socketConnected = false;
         },
         message: (event) => {
@@ -264,6 +421,89 @@ export default {
     handleRetry() {
       this.initSocket();
     },
+    // 测试服务器连接（用于诊断）
+    async testServerConnection() {
+      try {
+        const { baseUrl } = getRequestConfig();
+        console.log("测试服务器连接:", baseUrl);
+        
+        const token = getToken();
+        if (!token) {
+          uni.showModal({
+            title: "未登录",
+            content: "请先登录后再测试服务器连接",
+            showCancel: false,
+          });
+          return;
+        }
+        
+        // 测试 WebSocket 服务器是否可达
+        const isHttps = baseUrl.startsWith("https://");
+        const protocol = isHttps ? "wss" : "ws";
+        const host = baseUrl.replace(/^https?:\/\//, "").replace(/\/$/, "");
+        const testUrl = `${protocol}://${host}${WS_PATH}?token=${encodeURIComponent(token)}&mac=${FIXED_MAC}`;
+        
+        console.log("测试 WebSocket URL:", testUrl.replace(token, "***"));
+        
+        uni.showLoading({ title: "测试连接中...", mask: true });
+        
+        // 尝试连接 WebSocket 来测试服务器
+        const testSocket = uni.connectSocket({
+          url: testUrl,
+          success: () => {
+            console.log("WebSocket 连接测试：连接请求已发送");
+          },
+          fail: (err) => {
+            console.error("WebSocket 连接测试失败:", err);
+            uni.hideLoading();
+            uni.showModal({
+              title: "服务器连接测试",
+              content: `无法连接到 WebSocket 服务器\n错误: ${err.errMsg || "未知错误"}\n\n请检查：\n1. 服务器地址是否正确 (${host})\n2. WebSocket 服务是否运行\n3. 网络是否正常\n4. Token 是否有效`,
+              showCancel: false,
+            });
+          },
+        });
+        
+        // 设置超时
+        const timeout = setTimeout(() => {
+          testSocket.close();
+          uni.hideLoading();
+          uni.showModal({
+            title: "连接超时",
+            content: `WebSocket 连接超时\n\n请检查：\n1. 服务器地址: ${host}\n2. WebSocket 路径: ${WS_PATH}\n3. 服务器是否正常运行`,
+            showCancel: false,
+          });
+        }, 5000);
+        
+        testSocket.onOpen(() => {
+          clearTimeout(timeout);
+          testSocket.close();
+          uni.hideLoading();
+          uni.showToast({
+            title: "服务器连接正常",
+            icon: "success",
+            duration: 2000,
+          });
+        });
+        
+        testSocket.onError((err) => {
+          clearTimeout(timeout);
+          uni.hideLoading();
+          uni.showModal({
+            title: "服务器连接测试",
+            content: `WebSocket 连接失败\n错误: ${err.errMsg || "未知错误"}\n\n请检查：\n1. 服务器地址是否正确\n2. WebSocket 服务是否运行\n3. Token 是否有效`,
+            showCancel: false,
+          });
+        });
+      } catch (error) {
+        console.error("测试连接异常:", error);
+        uni.hideLoading();
+        uni.showToast({
+          title: "测试失败",
+          icon: "none",
+        });
+      }
+    },
     async handleBind() {
       if (!this.canSubmit || this.binding) return;
       this.binding = true;
@@ -385,8 +625,18 @@ export default {
 
 .error-text {
   margin-top: 16rpx;
+  padding: 16rpx;
+  background: #fef0f0;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #f56c6c;
+}
+
+.error-content {
   color: #f56c6c;
   font-size: 24rpx;
+  line-height: 1.6;
+  white-space: pre-line;
+  word-break: break-all;
 }
 
 .hint-text {
@@ -461,4 +711,3 @@ export default {
   opacity: 0.5;
 }
 </style>
-