socket.io客户端在刷新

Question

我有一个包含项目表的母版页，在与服务器成功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＆amp; 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>

Answer 1

//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));

触发子视图渲染

然后每秒渲染

Answer 2

我有同样的问题。 在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>