From 7db9d8b90a64f8c39db9dbdbeed1c25f4dc3afe8 Mon Sep 17 00:00:00 2001
From: "suk.bear" <suk.bear.suwu@gmail.com>
Date: Sat, 7 Sep 2024 09:35:00 +0800
Subject: [PATCH] fix:  add use web channel

---
 app/composables/webChannel.ts                |  92 ++++++++++++++++
 app/pages/v-screen/index/web-camera.vue      | 105 ++++++++++---------
 app/plugins/bridge.ts                        |  18 ----
 {public/plugins => app/utils}/web-channel.js |  25 +++--
 4 files changed, 164 insertions(+), 76 deletions(-)
 create mode 100644 app/composables/webChannel.ts
 delete mode 100644 app/plugins/bridge.ts
 rename {public/plugins => app/utils}/web-channel.js (96%)

diff --git a/app/composables/webChannel.ts b/app/composables/webChannel.ts
new file mode 100644
index 0000000..ea3a896
--- /dev/null
+++ b/app/composables/webChannel.ts
@@ -0,0 +1,92 @@
+/* eslint-disable no-new */
+import QWebChannel, { isQtClient } from '~/utils/web-channel.js'
+
+interface QtWebSocketOptions {
+  onDataUpdated?: (data: any) => void
+  onConnected?: () => void
+  onDisconnected?: () => void
+  onError?: (error: any) => void
+}
+
+export function useWebChannel(options: QtWebSocketOptions = {}) {
+  const { onDataUpdated } = options
+
+  const qtObject = ref<any>(null)
+  // const isConnected = ref(false)
+
+  // const { status: wsStatus, send: wsSend, open, close } = useWebSocket('ws://your-websocket-url', {
+  //   autoReconnect: true,
+  //   onConnected: () => {
+  //     isConnected.value = true
+  //     onConnected?.()
+  //   },
+  //   onDisconnected: () => {
+  //     isConnected.value = false
+  //     onDisconnected?.()
+  //   },
+  //   onError,
+  // })
+
+  const sendMessageToCpp = (message: any) => {
+    if (qtObject.value && typeof qtObject.value.receiveMessage === 'function') {
+      qtObject.value.receiveMessage(message)
+    }
+    else {
+      console.error('myObject or receiveMessage function not available')
+    }
+  }
+
+  const initQtWebChannel = () => {
+    if (import.meta.env.DEV || !isQtClient) {
+      window.qt = {
+        webChannelTransport: {
+          send() {
+            window.console.log(`
+              QWebChannel simulator activated !
+            `)
+          },
+
+          onmessage: () => {
+            window.console.log(`
+              QWebChannel simulator activated !
+            `)
+          },
+        },
+      }
+    }
+
+    new QWebChannel(window.qt.webChannelTransport, (channel: any) => {
+      if (channel.objects.myObject) {
+        window.console.log('myObject is available')
+        qtObject.value = channel.objects.myObject
+        qtObject.value.dataUpdated.connect((data: any) => {
+          if (data) {
+            onDataUpdated?.(data)
+          }
+          else {
+            console.error('data is null')
+          }
+        })
+      }
+      else {
+        console.error('myObject is not available')
+      }
+    })
+  }
+
+  onMounted(() => {
+    initQtWebChannel()
+  })
+
+  // onUnmounted(() => {
+  //   close()
+  // })
+
+  return {
+    // isConnected,
+    // wsStatus,
+    // sendWebSocketMessage: wsSend,
+    sendMessageToCpp,
+    qtObject,
+  }
+}
diff --git a/app/pages/v-screen/index/web-camera.vue b/app/pages/v-screen/index/web-camera.vue
index fad02b9..0896787 100644
--- a/app/pages/v-screen/index/web-camera.vue
+++ b/app/pages/v-screen/index/web-camera.vue
@@ -1,61 +1,66 @@
 <script setup lang="ts">
-import { h, onMounted, ref } from 'vue'
-import PopupMessage from './popup-message.vue'
-
-const { $myObject } = useNuxtApp()
-
-const msgVNode = h(PopupMessage, { name: '👏👏👏' }, {
-  default: () => [
-    h('div', '签到成功'),
-  ],
-})
+// import { h } from 'vue'
+// import PopupMessage from './popup-message.vue'
 
 const containerRef = ref<HTMLCanvasElement | null>(null)
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 
-onMounted(async () => {
-  loadSequenceFrame()
-  //  window.addEventListener("resize", drawSequenceFrameOnResize);
-  window.console.log($myObject, '获取的qt对象')
+const { sendMessageToCpp } = useWebChannel({
+  onDataUpdated(data) {
+    window.console.log('这是QT数据:', data)
+    drawSequenceFrame(data.img)
+    sendMessageToCpp('这是JS数据')
+  },
 })
 
-function loadSequenceFrame() {
-  let frameCount = 1
-  const totalFrames = 32
-  const frameRate = 10 // 每秒10帧
-  const frameDuration = 1000 / frameRate
-  let lastFrameTime = 0
-
-  function animate(timestamp: number) {
-    if (!lastFrameTime)
-      lastFrameTime = timestamp
-
-    const elapsed = timestamp - lastFrameTime
-
-    if (elapsed >= frameDuration) {
-      drawSequenceFrame(`/sequence-frame/${frameCount}.jpg`)
-      frameCount++
-      lastFrameTime = timestamp - (elapsed % frameDuration)
-
-      if (frameCount > totalFrames) {
-        ElMessage.success({
-          message: msgVNode,
-          duration: 5000,
-          offset: 800,
-        })
-
-        setTimeout(() => {
-          navigateTo('/v-screen/data')
-        }, 5000)
-        return
-      }
-    }
-
-    requestAnimationFrame(animate)
-  }
+// const msgVNode = h(PopupMessage, { name: '👏👏👏' }, {
+//   default: () => [
+//     h('div', '签到成功'),
+//   ],
+// })
+
+// onMounted(async () => {
+//   loadSequenceFrame()
+//   //  window.addEventListener("resize", drawSequenceFrameOnResize);
+// })
+
+// function loadSequenceFrame() {
+//   let frameCount = 1
+//   const totalFrames = 32
+//   const frameRate = 10 // 每秒10帧
+//   const frameDuration = 1000 / frameRate
+//   let lastFrameTime = 0
+
+//   function animate(timestamp: number) {
+//     if (!lastFrameTime)
+//       lastFrameTime = timestamp
+
+//     const elapsed = timestamp - lastFrameTime
+
+//     if (elapsed >= frameDuration) {
+//       drawSequenceFrame(`/sequence-frame/${frameCount}.jpg`)
+//       frameCount++
+//       lastFrameTime = timestamp - (elapsed % frameDuration)
+
+//       if (frameCount > totalFrames) {
+//         ElMessage.success({
+//           message: msgVNode,
+//           duration: 5000,
+//           offset: 800,
+//         })
+
+//         setTimeout(() => {
+//           navigateTo('/v-screen/data')
+//         }, 5000)
+//         return
+//       }
+//     }
+
+//     requestAnimationFrame(animate)
+//   }
 
-  requestAnimationFrame(animate)
-}
+//   requestAnimationFrame(animate)
+// }
 
 function drawSequenceFrame(url: string) {
   const canvas = canvasRef.value
diff --git a/app/plugins/bridge.ts b/app/plugins/bridge.ts
deleted file mode 100644
index d65a0f9..0000000
--- a/app/plugins/bridge.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable no-new */
-export const isQtClient = (function () {
-  return navigator.userAgent.includes('QtWebEngine')
-})()
-
-export default defineNuxtPlugin(() => {
-  if (isQtClient) {
-    new window.QWebChannel(window.qt.webChannelTransport, (channel: any) => {
-      const myObject = channel.objects.myObject
-
-      return {
-        provide: {
-          myObject,
-        },
-      }
-    })
-  }
-})
diff --git a/public/plugins/web-channel.js b/app/utils/web-channel.js
similarity index 96%
rename from public/plugins/web-channel.js
rename to app/utils/web-channel.js
index 04ee9e3..0442c25 100644
--- a/public/plugins/web-channel.js
+++ b/app/utils/web-channel.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-prototype-builtins */
 /****************************************************************************
 **
 ** Copyright (C) 2016 The Qt Company Ltd.
@@ -152,11 +153,12 @@ const QWebChannel = function (transport, initCallback) {
   }
 
   channel.exec({ type: QWebChannelMessageTypes.init }, (data) => {
-    for (var objectName in data) {
+    for (const objectName in data) {
+      // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars
       const object = new QObject(objectName, data[objectName], channel)
     }
     // now unwrap properties, which might reference other registered objects
-    for (var objectName in channel.objects) {
+    for (const objectName in channel.objects) {
       channel.objects[objectName].unwrapProperties()
     }
     if (initCallback) {
@@ -316,6 +318,7 @@ function QObject(name, data, webChannel) {
       const args = []
       let callback
       for (let i = 0; i < arguments.length; ++i) {
+        // eslint-disable-next-line prefer-rest-params
         const argument = arguments[i]
         if (typeof argument === 'function') {
           callback = argument
@@ -401,14 +404,20 @@ function QObject(name, data, webChannel) {
 
   data.signals.forEach((signal) => { addSignal(signal, false) })
 
-  for (var name in data.enums) {
+  for (const name in data.enums) {
     object[name] = data.enums[name]
   }
 }
 
 // required for use with nodejs
-if (typeof module === 'object') {
-  module.exports = {
-    QWebChannel,
-  }
-}
+// if (typeof module === 'object') {
+//   module.exports = {
+//     QWebChannel,
+//   }
+// }
+
+export default QWebChannel
+
+export const isQtClient = (function () {
+  return navigator.userAgent.includes('QtWebEngine')
+})()