#websocket

Junjie

2023-10-31 d2fd7cfc1a426baabe4fac47f88b4db03432e22b

 src/main/webapp/views/shuttle2.html

@@ -48,6 +48,7 @@
                                <th>故障状态</th>
                                <th>故障码</th>
                                <th>管制状态</th>
                                <th>低电量</th>
                            </tr>
                        </thead>
                        <tbody>
@@ -229,18 +230,46 @@
    var shuttleMsgTableFullRows = 0;
    // 初始化
    var shuttleOutputDom = document.getElementById("shuttle-output");

    var ws = new WebSocket("ws://" + window.location.host + baseUrl + "/shuttle/websocket");

    //当WebSocket创建成功时，触发onopen事件
    ws.onopen = function(){
        console.log("open");
    }

    //当客户端收到服务端发来的消息时，触发onmessage事件
    ws.onmessage = function(e){
        const result = JSON.parse(e.data);
        if (result.url == "/shuttle/table/shuttle/state") {
            setShuttleStateInfo(JSON.parse(result.data))
            setShuttleMsgInfo(JSON.parse(result.data))
        }else if (result.url == "/shuttle/output/shuttle") {
            setShuttleOutput(JSON.parse(result.data))
        }
        // console.log(e.data,result);
    }

    //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    ws.onclose = function(e){
        console.log("close");
    }

    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    ws.onerror = function(e) {
        console.log(error);
    }

    $(document).ready(function() {
        initShuttleStateTable();
        getShuttleStateInfo();
        initShuttleMsgTable();
        getShuttleMsgInfo();
        operatorBlockShow();
        setShuttleRadio();
    });

    setInterval(function () {
        getShuttleStateInfo()
        getShuttleMsgInfo();
        getShuttleStateInfo();
    },1000)
    setInterval(function () {
        getShuttleOutput();
@@ -318,12 +347,12 @@

    // 四向穿梭车信息表获取 ---- 表一
    function getShuttleStateInfo() {
        sendWs("{\"url\":\"/shuttle/table/shuttle/state\",\"data\":{}}")
    }

    // 四向穿梭车信息表设置 ---- 表一
    function setShuttleStateInfo(res) {
        let tableEl = $('#shuttle-state-table');
        $.ajax({
            url: baseUrl+ "/shuttle/table/shuttle/state",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200){
                    let table = res.data;
                    if (table.length > shuttleStateTableBlankRows && table.length !== shuttleStateTableFullRows) {
@@ -349,6 +378,7 @@
                        setVal(tr.children("td").eq(13), table[i-1].errState$);
                        setVal(tr.children("td").eq(14), table[i-1].errCode$);
                        setVal(tr.children("td").eq(15), table[i-1].suspendState$);
                setVal(tr.children("td").eq(16), table[i-1].lowerPower);
                    }
                } else if (res.code === 403){
                    window.location.href = baseUrl+"/login";
@@ -356,17 +386,10 @@
                    console.log(res.msg);
                }
            }
        });
    }

    // 四向穿梭车数据表获取 ---- 表二
    function getShuttleMsgInfo() {
    function setShuttleMsgInfo(res) {
        let tableEl = $('#shuttle-msg-table');
        $.ajax({
            url: baseUrl+ "/shuttle/table/shuttle/state",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
                if (res.code === 200){
                    var table = res.data;
                    if (table.length > shuttleMsgTableBlankRows && table.length !== shuttleMsgTableFullRows) {
@@ -400,16 +423,13 @@
                    console.log(res.msg);
                }
            }
        });
    }

    // 穿梭车日志输出 -----------------------------------------------------------------------
    function getShuttleOutput() {
        $.ajax({
            url: baseUrl + "/shuttle/output/shuttle",
            headers: {'token': localStorage.getItem('token')},
            method: 'POST',
            success: function (res) {
        sendWs("{\"url\":\"/shuttle/output/shuttle\",\"data\":{}}")
    }

    function setShuttleOutput(res) {
                if (res.code === 200) {
                    shuttleOutput(res.data);
                } else if (res.code === 403) {
@@ -417,8 +437,6 @@
                } else {
                    console.log(res.msg);
                }
            }
        })
    }

    // 任务指令下发
@@ -622,5 +640,10 @@
        layer.close(layerDetl);
    })

    function sendWs(message) {
        if (ws.readyState == WebSocket.OPEN) {
            ws.send(message)
        }
    }

</script>