怎样设计异步接口(被动接收数据)的 Vue.js 应用的数据处理层?

怿祺
  • 324

正在做一个基于 Vue.js 和 C++ 的 Windows 应用,Vue 负责界面和逻辑,C++ 只负责提供数据接口,C++ 会通过 .dll 文件将 API 挂载在 window 对象上,以供 js 调用。
js 调用 API 的过程大概是:

window.api.action('someAction', args, id, function (status, data, id) {
  // callback
  // 处理 data 数据
  // 传参的 id 和 callback 里返回的 id 一致,用来标识请求返回的结果
});

但是 callback 函数里的逻辑只是注册在 C++ 层,所以这里跟常见的回调函数不同:

  1. 初始化 API 之后,即可监听 C++ 主动传过来的数据,即 js 层被动执行 callback 里的逻辑;
  2. 循环调用时 callback 会被覆盖,比如遍历调用时,必须传入特定 id 标识返回的结果,在callback 里调用处理,否则结果会被最后一个覆盖。

因为 C++ 层需要有能够主动向 Web 层发送数据的权力,所以面临的问题是:怎样在 Vue 里面封装 API 这部分,才能方便的将接收的数据传递给特定的组件呢?

回复
阅读 2k
2 个回答

长连接,推送
Socket -> WebSocket

你的问题就与vue无关了,其实是因为http通信导致服务端无法像客户端发送数据造成的,该类问题有两个解决方案

方案一 兼容性较好,但是延时性较高。

 cpp 接受统一请求接口,然后vue这边通过轮询的方式统一请求,感觉返回数据修改vue的数据,根据watch的trigger,vue可以做到很好的回调
 

方案二 对于你的应用场景,我觉得你其实需要的是双方都可以主动双工通信,因此我建议你通过长socket的方式来处理问题

 你可以有一台代理服务器,cpp 和 vue以不同的身份连接到代理服务器上,
 可以都用websocket(当然cpp与服务端可以是私有的socket协议),
 服务端只做恢复和转发的角色,在此场景下,cpp可以自由给浏览器发送数据,浏览器也能便捷的给cpp发送请求
 但是需要自己设计响应头和反馈状态,防止异常等待
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏