socket.io客户端在刷新

时间:2017-08-31 03:25:44

标签: javascript jquery node.js express socket.io

我有一个包含项目表的母版页,在与服务器成功socket.io连接后,表格数据将不断刷新。

单击表中的项目(项目的ID将传递给服务器)时,将使用ajax加载子视图,并通过侦听来自服务器的事件连续刷新。

现在问题是,通过选择表中的另一个项,子视图正在多次监听(即使我在成功执行ajax操作后清除了子视图(HTML))。例如,如果您选择了10个项目,它会监听10次,并且无法看到子视图中发生的事情(一切都快速闪烁)。

app.js(nodejs)

io.on('connection', function (socket) {
    console.log('Client Connected...' + clients[socket.id]);
    // updates master page table.
    socket.emit('data', self.StatusObject(self.allModules));

    socket.on('close', function (err, res) {
        console.log('Client disconnected...' + err + ' ' + res);
    });

    //updates child view.
    socket.on('childData', function (id) {
        var data = self.FindModule(id);
        statusPacketTimer = setInterval(function () {
            socket.emit('publishChildData', self.StatusPacket(id));
        }, 1000);
    });
});

masterpage.html(html& jquery)

<table>
    <tr onclick="getContent(${id})">
        <td>row_id</td>
        <td>status</td>
    </tr>
</table>

<script>
socket.on('data', function (message) {
    $('#mainTable').find('tr:gt(0)').remove();
    updateTable(message);
});

function getContent(id) {
if (id){
        $.ajax({
            async: true,
            type: 'get',
            cache: false,
            url: 'getContext',
            data: { 'id': id },
            success: function (data, status, moduleData) {
                if (status == 'success') {
                    $('#content').html('').html(data);
                }
            }
        });
    }
}
</script>

childpage.html(html&amp; jquery)

<div id="content"></div>
<script>
    socket.emit('childData', $('#id').val());
    socket.on('publishChildData', function (data) {
        // replace the data in div with new data
    })
</script>

2 个答案:

答案 0 :(得分:0)

//updates child view.
socket.on('childData', function (id) {
    var data = self.FindModule(id);
    statusPacketTimer = setInterval(function () {
        socket.emit('moduleData', self.LocateStatusPacket(id));
    }, 1000);
});

在此代码中setInterval连续。 如果通过socket.emit('moduleData', self.LocateStatusPacket(id));

触发子视图渲染

然后每秒渲染

答案 1 :(得分:0)

我有同样的问题。 在socket.on(endpoint, callback)的每个实例之前,先于socket.off(endpoint, callback)

<script>
    const dataCallback = function (message) {
        $('#mainTable').find('tr:gt(0)').remove();
        cupdateTable(message);
    };
    socket.off('data', dataCallback); // Removes existing handler, if present.
    socket.on('data', dataCallback);
</script>

这仅从dataCallback端点中删除data回调。如果您想删除与data端点关联的所有回调函数(拥有多个回调函数是完全合法的),则可以省略该回调参数而只需执行

<script>
    const dataCallback = function (message) {
        $('#mainTable').find('tr:gt(0)').remove();
        cupdateTable(message);
    };
    socket.off('data'); // Removes ALL existing handlers for this endpoint.
    socket.on('data', dataCallback);
</script>