socket.io客户端刷新后多次侦听同一事件 [英] socket.io client listening to same event multiple times after refresh

问题描述

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

I got a master page which contains a table of items and the table data will be refreshed continuously after a successful socket.io connection with the server.

点击表格中的项目（项目的ID将传递给服务器），将使用ajax加载子视图，并通过收听事件连续刷新来自服务器。

upon clicking an item in the table (id of the item will be passed to the server), a child view will be loaded using ajax and that will be refreshed continuously by listening to an event from the server.

现在的问题是，通过选择表中的另一个项目，子视图正在多次监听（即使我清除子视图（HTML）成功的ajax操作后）。例如，如果你选择了10个项目，它会监听10次，看不到子视图中发生的事情（一切都快速闪烁）。

Now the problem is, by selecting another item in the table, the child view is listening multiple times(even though I clear the child view (HTML) after successful ajax operation). For example, if you select 10 items, it listens 10 times and can't see whats happening in the child view (everything is blinking very fast).

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）

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& jquery）

childpage.html(html & 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>

推荐答案

我遇到了同样的问题。
在 socket.on（端点，回调）的每个实例之前，在它前面加上 socket.off（端点，回调）。

I had the same issue. Before each instance of socket.on(endpoint, callback), precede it with 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 端点关联的所有回调函数（拥有多个是完全合法的），那么你可以省略回调参数并简单地执行

This removes only the dataCallback callback from the data endpoint. If you want to delete all callback functions associated with the data endpoint (it's perfectly legal to have more than one), then you can omit the callback argument and simply do

<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>

这篇关于socket.io客户端刷新后多次侦听同一事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！