组态实时数据更新-socket@stomp/stompjssockjs-client(sockjs的client)jav

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

@stomp/stompjs
sockjs-client (sockjs 的client)

<script src="${cms_path}/res/js/sockjs-client/sockjs.min.js"></script>
<script src="${cms_path}/res/js/stomp-websocket/stomp.js"></script>

 //  websocket 推送消息
export function getWebsocketData(){
    var stompClient = null;
    // 下面的url是本地运行的jar包的websocket地址 
    var socket = new SockJS('http://www.smartiot-china.com:8080/websocket');

    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        //setConnected(true);
        console.log('Connected: ' + frame);

        // websocket订阅一个topic，第一个参数是top名称
       // 第二个参数是一个回调函数,表示订阅成功后获得的data
       //订阅组态 id
        stompClient.subscribe('/configMap/{组态id}', function (data) {  
            // 一般来说这个data是一个 Frame对象,需要JSON.parse(data)一下拿到数据
                var msg=JSON.parse(data.body)
                // 这样才能拿到需要的数据格式,一个对象。  下面是一个例子
  //  {name:"Andy",age:30,"lastLogin":"2018-08-15 12:33:12","ipAddress":"45.123.12.4"}
                //  然后对这个数据进行处理,渲染到页面就可以了。
                // 根据返回的数据来更新data ,
                // 当data变化时 canvas.render()重新渲染.
        }, {'token': xxx})


    }, function (res) {
                    console.log("error");
                    console.log(res);
        });


    stompClient.ws.onclose = function (res) {
        console.log('Connection closed!');
        console.log(res);
    };
}

组态实时数据更新-socket

java 只提供需要更新的点值(全部返回由于点值太多而造成效率低下)

fe 只有当有点值更新时才重新渲染canvas (寻求优化方案)