当用户关闭网站时如何保存用户会话信息

Question

我正在尝试为网站构建用户重播会话功能，并且我正在使用rrweb库来做到这一点。

这个库的作用是在录制时：它捕获网页中的所有事件，我可以通过将它们存储在 an 中来保存这些事件，array当我想重播会话时，我只需将 传递array给重播函数即可函数处理会话重放。

目前，出于测试目的，我将此数组保存在 my 中sessionStorage，每次发出新事件时，我都会将array新事件推送到其中，然后array再次将其保存在 my 中，sessionStorage如下所示：

rrweb.record({
    emit(event) {
        const sessions = JSON.parse(sessionStorage.getItem('sessions')) || [];
        sessions.push(event);
        sessionStorage.setItem('sessions', JSON.stringify(sessions));
    },
});

但是，对于生产，sessionStorage我不想将该数组保存在我的数组中，然后在每次发出新事件时更新它，而是想将该数组保存array在我的数据库中，并且我想调用将其保存array到我的数据库中的函数，无论何时用户logs out或当用户决定关闭网站时（例如按下按钮X）。

第一部分 - 当用户时logs out- 非常简单，我只需在按钮eventListener上添加一个logout，这是第二部分 - 当用户决定关闭网站时 - 这让我有些头痛。

我知道有这个beforeUnload事件，但是经过快速搜索后，我清楚地意识到它是不可靠的，所以基本上我正在寻找的是一种可靠的方法来确定用户何时关闭我的网站，这样我就可以触发一个async function将保存array到我的数据库。

Answer 1

以下是我对如何减轻事件不可靠性的想法beforeunload：

1. 当页面最初加载时，获取并保存数组中当前的条目数sessions。假设我们正在讨论您希望重播的单个页面，则可以将此计数保存为 JavaScript 变量eventCount。更好的是从服务器端表中获取计数，以防由于某种原因上次关闭页面时未能成功保存所有记录的事件。
2. checkEvents使用 Window 方法安排每秒调用一个函数N（您必须决定调用该函数的频率）setInterval。此函数将查看当前事件计数（变量newCount），如果大于当前eventCount值，则可以使用NavigatorsendBeacon方法向服务器 POST 请求，传递自上次调用以来添加的所有事件（即JSON.stringify(sessions.slice(eventCount, newCount))当eventCount = newCount如果newCountis > 则请求完成分配。eventCount请注意，当异步sendBeacon请求运行时，可能会生成新事件，这就是我们使用数组newCount而不是当前数组大小更新事件计数的原因sessions。
3. sendBeacon卸载页面时，您需要执行最终请求。由于我们知道beforeunload和unload事件不可靠，因此我们使用该visibiltychanged事件（如果浏览器支持），并且当新的可见性状态“隐藏”时，我们更新服务器。该文档讨论了导致触发此事件的用户操作（不仅仅是在关闭页面时）。但是，如果浏览器不支持此事件，则pagehide必须使用该事件。

该方法的文档中没有讨论Navigator.sendBeacon是否可以有多个并发请求。sendBeacon假设可能存在（这是一个异步调用），则在当前正在进行请求时，用户可能会因为调用而决定离开该页面或关闭该页面setInterval。然后，您发布此请求的服务器 URL 可能应该在执行插入时锁定表，以便对该 URL 的任何后续 POST 都将阻塞，直到前一个完成。如果您的表使用某种序列号作为主键，我建议的另一个解决方案是将传递的第一个事件的起始数组索引传递给服务器，并且服务器将使用它来显式设置每个事件的序列号插入事件。然后可以运行并发更新，而不必锁定整个表。

Answer 2

对于此类问题，您应该创建一个数据库模式来存储它，并触发一个函数来获取事件并将该事件像往常一样保存在数据库中。对于关闭网站后的另一个问题，您可以调用如下函数：

    window.onunload=()=>{
      //function to save the event in the database
}

愿这对你有帮助。