node.js/socket.io：重新连接时刷新表？

Question

我有 node.js 和 socket.io 在 DataTables 表上执行实时更新。编辑行时，其他客户端无需刷新即可看到该行的更新。

这一切都很好，但我不知道如何在断开连接后节点/套接字重新连接到服务器时自动刷新表。

目前，情况如下：

1. 转到包含表格的页面
2. 让设备休眠/断开连接 服务器
3. 打开设备电源并查看包含表格的页面
4. socket.io 重新连接到服务器，但表没有刷新以获取最新更改。

如何让 socket.io 在重新连接到服务器时刷新表？ 理想情况下，该过程如下所示：

1. 打开设备电源
2. socket.io 重新连接到服务器，触发 CSS“正在加载...”覆盖以防止用户对表进行更改
3. socket.io 刷新表格以显示最新内容
4. CSS“正在加载...”覆盖关闭

服务器端脚本：

console.log('Starting the server');
var app = require('express')();
var express = require('express');
var fs = require("fs");

var server = require('https').createServer(SSL, app);
var io = require('socket.io')(server);
server.listen(100);

io.on('connection', function (socket) {
  /*socket.emit('news', { hello: 'world' });
  /socket.on('my other event', function (data) {
    console.log(data);
  });*/
});

io.set('authorization', function(handshakeData, accept) {
    console.log('io.authorization called');
    accept(null, true);
} );

var lockedRowIDs = [];

io.sockets.on('connection', function(socket) {
    console.log('io.connection called');

    socket.on('lock', function(rowID) {
        console.log('Lock event for rowID: '+rowID);
        lock(socket, rowID);
        lockedRowIDs.push(rowID);
    } );

    socket.on('clientJoin', function(username) {
        console.log('clientJoin event received');
        socket.join('clients');
        if (typeof lockedRowIDs !== 'undefined' && lockedRowIDs.length > 0) {
            socket.emit('lockedRows', lockedRowIDs);
        }
    } );

    socket.on('unlock', function(rowID) {
        console.log('Unlock event for rowID: '+rowID);
        unlock(socket, rowID);
        removeItemFromArray(lockedRowIDs, rowID);
    } );

    socket.on('updateData', function(json, action, id) {
        if (action == "edit" || action == "create") {
            console.log('updateData event for rowID: '+json.row['DT_RowId']);
        }
        updateData(socket, json, action, id);
    } );
} );

function lock(socket, rowID) {
    socket.broadcast.to('clients').emit('lock', rowID);
    setTimeout(function() {
        io.sockets.in('clients').emit('timeout', rowID);
        removeItemFromArray(lockedRowIDs, rowID);
    },
    180000);
}

function unlock(socket, rowID) {
    socket.broadcast.to('clients').emit('unlock', rowID);
}

function removeItemFromArray(array, item) {
    console.log('removeItemFromArray called with item: '+item);
    for(var i = array.length - 1; i >= 0; i--) {
        if(array[i] === item) {
            array.splice(i, 1);
        }
    }
}

function updateData(socket, json, action, id) {
    if (action == "edit" || action == "create") {
        console.log('updateData called with rowID:'+json.row['DT_RowId']);
    }
    socket.broadcast.to('clients').emit('updateData', json, action, id);
}

客户端脚本：

var socket = io('https://www.***.com:100');
socket.on('connect', function() {
    console.log('Connected');
    socket.emit('clientJoin');
} );

socket.on('lock', function(rowID) {
    console.log('Lock event received for rowID: '+rowID);
    row = $("tr[id='"+rowID+"']");
    row.addClass('locked');
    /* Pagenation fix Start */
    var table = $('#example').DataTable();
    table.row('#'+rowID).nodes().to$().addClass('locked');
    /* Pagenation fix End */
} );

socket.on('unlock', function(rowID) {
    console.log('Unlock event received for rowID: '+rowID);
    row = $("tr[id='"+rowID+"']");
    row.removeClass('locked');
    /* Pagenation fix Start */
    var table = $('#example').DataTable();
    table.row('#'+rowID).nodes().to$().removeClass('locked');
    /* Pagenation fix End */
} );

socket.on('timeout', function(rowID) {
    console.log('Time out event received for rowID: '+rowID);
    row = $("tr[id='"+rowID+"']");
    row.removeClass('locked');
    /* Pagenation fix Start */
    var table = $('#example').DataTable();
    table.row('#'+rowID).nodes().to$().removeClass('locked');
    /* Pagenation fix End */
    /* Check if the editor corresponds to the timed out rowID - start */
    var modifier = editor.modifier();
    if (modifier) {
        var data = table.row(modifier).data();
        console.log('rowID is '+data.DT_RowId);
        if (data.DT_RowId == rowID) {
            console.log('Timed out rowID: '+rowID+' matches Editor rowID: '+data.DT_RowId+'. Closing Editor now.');
            editor.close();
        }
        else {
            console.log('Timed out rowID: '+rowID+' does not match Editor rowID: '+data.DT_RowId+'. Keeping Editor open.');
        }
    }
    /* Check if the editor corresponds to the timed out rowID - end */
} );

socket.on('lockedRows', function (rowIDs) {
    console.log('Iterate through the list of rows and mark it as locked');
    table = $('#example').DataTable();
    rowCount = rowIDs.length;
    console.log('Row count: '+rowCount);
    for (var i=0; i<rowCount; i++) {
        console.log(rowIDs[i]);
        row = $("tr[id='"+rowIDs[i]+"']");
        row.addClass('locked');
        table.row('#'+rowIDs[i]).nodes().to$().addClass('locked');
    }
} );

socket.on('updateData', function(json, action, id) {
    if (action == "create" || action == "edit") {
        var DT_RowId = json.row['DT_RowId'];
        console.log('updateData socket event for rowID: '+DT_RowId+' and action: '+action);
    }
    var table = $('table#example').DataTable();
    if (action == "edit") {
        var editedRow = table.row('#'+DT_RowId).nodes().to$();
        table.row(editedRow).data(json.row).draw();
        console.log('Row updated');
    }
    if (action == "create") {
        console.log('Row created');
        table.row.add(json.row).draw();
    }
    if (action == "remove") {
        var removedRow = table.row('#'+id).nodes().to$();
        table.row(removedRow).remove().draw();
        console.log('Row removed with id '+id);
    }
} );

/* Ajax request has been completed, data retrieved from the server */

editor.on('postSubmit', function(e,json, data, action) {
    console.log('Post submit');
    console.log(data);
    console.log('With JSON:');
    console.log(json);
    console.log('With action:');
    console.log(action);
    if (action == "create" || action== "edit") {
        if (json.row){
            console.log('rowID from JSON: '+json.row['DT_RowId']);
            socket.emit('updateData', json, action);
        }
    }
    if (action == "remove") {
        console.log('rowID from JSON: '+data.id[0]);
        socket.emit('updateData', null, action, data.id[0]);
    }
} );

editor.on('close', function(e) {
    console.log('Close event');
    console.log(e);
    var modifier = editor.modifier();
    console.log(modifier)
    if (modifier !== null) {
        console.log('Inside modifier')
        table = $('#example').DataTable();
        if (table.row(modifier).node()) {
            rowID = table.row(modifier).node().id;
            console.log('rowID='+rowID);
            row = $("tr[id='"+rowID+"']");
            row.removeClass('locked');
            table.row('#'+rowID).nodes().to$().removeClass('locked');
            socket.emit('unlock', rowID);
        }
    }
} );

Answer 1

我想您知道，当您连接时，数据会保持最新，但如果您暂时断开连接然后重新连接，您可能会错过一些数据更新。

有许多可能的策略来处理这个问题。

1. 蛮力。重新连接后，获取所有数据的新副本，就好像设备刚刚打开一样。效率较低，但易于实施。

2. 事务 ID 或事务时间。 每次服务器发送更新时，它都会随该更新发送事务 ID 或事务服务器时间。然后，客户端跟踪它收到的最后一个事务 ID 或事务时间。当它重新连接时，它会发送一条初始消息，其中包含最后一个事务 ID 或事务时间，询问自上一个事务以来发生的任何更新。然后，服务器可以查看其数据库以查看是否有任何更新的事务，如果有，则将它们发送到该客户端。这需要跟踪数据库中的事务。通常，服务器可能会返回“不支持事务 id”类型的响应，然后强制客户端从头开始进行暴力更新。这是在数据库重建或服务器崩溃导致旧事务值丢失时的后盾。

3. 真正的同步。客户端重新连接，然后与服务器进行真正的同步，客户端基本上说“这就是我拥有的，你有什么更新的”。出于效率的考虑，许多同步系统通过实现选项 2 中描述的事务 id 来解决这个问题，但当然还有许多其他方法可以进行同步。如果客户端在断开连接时也可能更改数据，则真正的同步会更有用。

作为实现选项 2 的一种简化方式，如果您的数据库尚不支持日志事务的概念，那么一些服务器将在内存中实现一个事务日志，用于跟踪最近 N 小时的事务。只要服务器保持正常运行并且断开连接的时间不超过 N 小时，就可以从内存中的事务日志中满足对新数据的请求（这是有效的）。如果服务器重新启动或客户端已经离开超过 N 小时，那么客户端将被强制执行暴力更新，就像客户端在关机然后重新开机时所做的一样（丢失所有数据的先验知识）。

当然，如果数据库有多个用户，那么事务日志必须由数据库自己实现，以确保它包含所有可能的事务。