xinglie / report-designer

⚡打印设计、可视化、标签打印、编辑器、设计器、数据分析、报表设计、组件化、表单设计、h5页面、调查问卷、pdf生成、流程图、试卷、SVG、图形元素、物联网、标签纸
https://xinglie.github.io/report-designer/
902 stars 232 forks source link

IoT 预览器中的 WebSocket 连接如何使用 #65

Open xinglie opened 1 year ago

xinglie commented 1 year ago

设计器

在设计器中,服务端数据仅是辅助功能,因此在设计器中使用http接口,未来也将会一直如此,这部分的接口配置可查阅:https://github.com/xinglie/report-designer/issues/27

预览器

IoT 预览器

IoT 对数据要求实时性,因此优先采用 WebSocket 连接,这就需要设计器中的数据源字段与 WebSocket 推送的数据进行一定的配合

在 viewer.html 预览器入口中,可配置 iotUrl 直接为 WebSocket 地址 iotUrl: "ws://your.address" 即可对接真实的服务端数据,目前 WebSocket 的数据格式要求返回如下格式的 JSON

{
    type: 'data'|'heartbeat',
    success: boolean
    message: 'exception message',
    data: object
}

其中的 data 的 key 要求与设计器中数据源中的绑定的字段名称要一致。

同时在首次连接到 WebSocket 服务器时,需要全量推送页面中需要的数据,在后续数据有变化时,可只推送变化的部分,否则页面中未收到数据的可设计元素将展示设计器中给定的初始状态

IoT 预览器中如果对数据实时性要求不高,可支持配置 http 协议的接口,格式如下

iotUrl: "//pull.data.url^//push.data.url"

如果仅展示不需要通过 IoT 预览器向服务器发送数据,则配置成 iotUrl: "//pull.data.url"即可