vue前端使用qwebchannel 如何实现实时接收qt发送数据

在Vue前端使用QWebChannel接收Qt发送的实时数据，需要按照以下步骤进行操作：

1. 在Vue项目中安装 QWebChannel-bridge 库。

npm install qwebchannel-bridge --save

2. 在Vue项目中创建一个名为 `qwebchannel.js` 的文件，并在其中导入 `QWebChannel` 和 `QWebChannelBridge` 对象。

import QtWebChannel from '@qt/qtwebchannel'

const QWebChannelBridge = require('qwebchannel-bridge')

export default {
  install(Vue) {
    Vue.prototype.$qwebchannel = {
      connect(cb) {
        const socket = new WebSocket('ws://localhost:1234') // 修改为 Qt 发送数据的 WebSocket 地址
        socket.onopen = () => {
          const channel = new QtWebChannel(socket)
          const bridge = new QWebChannelBridge(channel)
          bridge.init(() => {
            cb(bridge)
          })
        }
      }
    }
  }
}

3. 在Vue项目中使用 `QWebChannel` 接收Qt发送的实时数据。

import QWebChannel from './qwebchannel'

Vue.use(QWebChannel)

export default {
  data() {
    return {
      value: '',
      bridge: null
    }
  },
  mounted() {
    this.$qwebchannel.connect((bridge) => {
      this.bridge = bridge
      // 接收 Qt 发送的实时数据
      this.bridge.on('valueChanged', (value) => {
        this.value = value
      })
    })
  }
}

在上述代码中，我们在 `mounted` 钩子函数中调用 `this.$qwebchannel.connect()` 方法来建立 WebSocket 连接，并创建 `QWebChannelBridge` 对象。在 WebSocket 连接成功后，我们将 `QWebChannelBridge` 对象传递给回调函数，并在回调函数中通过 `this.bridge.on()` 方法注册一个 `valueChanged` 事件。当Qt端发送新的值时，会触发该事件，并将新值传递给Vue前端，从而实现实时接收Qt发送数据。

需要注意的是，在Qt端发送实时数据时，需要调用 `QWebChannel` 对象的 `send() `方法将数据发送到WebSocket中。在Vue前端接收到数据后，需要更新数据并强制重新渲染视图，以便用户能够看到新的数据。