简介 #

当后端已有 WebSocket 实时接口时，SmartChart 可以通过在模板中建立 WebSocket 连接，将实时推送的数据映射到共享数据集变量，再通过 ds_refresh() 触发图形刷新，实现毫秒级的实时大屏更新，无需轮询。

与前端定时刷新相比，WebSocket 方式由服务端主动推送，实时性更强，适合股票行情、IoT 传感器、生产线监控等场景。

应用场景 #

对于实时程度要求比较高的情况下, 如果你后端已有实现websocket的接口, smartchart也可以很方便的接入 参考以下步骤即可

1. 在"模板"中定义一个全局变量, 如ws_data
2. 编写连接和接收代码段逻辑
3. 在接收代码段加入ds_refresh, 如要刷新0号图形, 则加入ds_refresh(0)
4. 在"高级"设定中加入共享数据集设定, 把ws_data映射到0号图形即可

代码段参考 #

    let ws_data = [['初始化','V'],['A','2']];
    let ws = null;
    
    if('webSocket' in window){
        print('支持webSocket');
        ws = new webSocket('ws://127.0.0.1:2222/abc');
        //连接成功
        ws.onopen = function(){
            print('ws连接成功');
        }
        //接收消息
        ws.onmessage = function(evt){
            ws_data = evt.data;
            ds_refresh(0);
        }
    }
    else{
        print('浏览器不支持ws')
    }

WebSocket 接入步骤总结 #

1. 模板 JS 区：定义全局变量 ws_data，编写 WebSocket 连接代码
2. 消息回调中：将收到的数据赋给 ws_data，调用 ds_refresh(图形序号)
3. 高级设定：配置共享数据集，将 ws_data 变量映射到对应图形序号
4. 图形 JS 端：使用 let dataset = __dataset__; 正常读取数据即可

// 高级设定中共享数据集配置示例（将 ws_data 映射给 0 号图形）
// 在高级 --> 共享数据集中填写：
// {"0": "ws_data"}