사용자가 웹사이트를 닫을 때 사용자 세션 정보를 저장하는 방법

Question

웹사이트에 대한 사용자 재생 세션 기능을 구축하려고 하는데 이를 위해 rrweb 라이브러리를 사용하고 있습니다.

이 라이브러리가 하는 일은 기록할 때입니다. 웹페이지의 모든 이벤트를 캡처하고 이를 array 中来保存这些事件，当我想重播会话时，我只需将 array에 저장하여 세션 재생을 처리하는 재생 기능에 전달할 수 있습니다.

현재 테스트 목적으로 이 배열을 내 sessionStorage 中，每次发出新事件时，我都会获取 array 然后将该新事件推送到其中，然后再次将 sessionStorage 保存在我的 sessionStorage에 다음과 같이 저장하고 있습니다. < /p> 으아악

그러나 프로덕션을 위해 해당 배열을 내 sessionStorage 中，然后在每次发出新事件时更新它，而是将该 array 保存在我的数据库中，并且我想调用保存 array 的函数当用户 退出 或用户决定关闭网站时（例如按 X 버튼에 한 번만 데이터베이스에 저장하고 싶지 않습니다.

첫 번째 부분 - 사용자가 logs out - 非常简单，我只需在 logout 按钮上添加一个 eventListener , 두 번째 부분은 - 사용자가 사이트를 폐쇄하기로 결정한 경우 - 이것이 약간 머리를 아프게 합니다.

내 데이터베이스에 beforeUnload 事件，但是经过快速搜索后，我清楚地意识到它是不可靠的，所以基本上我正在寻找的是一种可靠的方法来确定用户何时关闭我的网站，以便我可以触发 async函数 会将 array 저장되어 있는 것을 알고 있습니다.

Answer 1

이벤트의 불안정성을 완화하는 방법에 대한 내 생각은 다음과 같습니다. beforeunload

1. 페이지가 처음 로드될 때 sessions 数组中的当前条目数。假设我们正在讨论您希望重播的单个页面，则可以将此计数保存为 JavaScript 变量 eventCount가지고 저장하세요. 어떤 이유로 페이지를 마지막으로 닫았을 때 기록된 모든 이벤트가 성공적으로 저장되지 않은 경우 서버 측 테이블에서 개수를 가져오는 것이 더 좋습니다.
2. 스케줄링에서는 배열의 현재 크기에 따라 N 秒调用一次函数 checkEvents（您必须决定调用此函数的频率）setInterval 方法。此函数将查看当前事件计数（变量 newCount），如果大于当前 eventCount 值，则 Navigator sendBeacon 方法可用于向服务器发送请求，传递所有自上次调用以来添加的事件（即 JSON.stringify(sessions.slice(eventCount, newCount)) ，并且当请求完成时分配 eventCount = newCount if newCount 为 > eventCount。请注意，当异步 sendBeacon 请求运行时，可能会生成新事件，这就是我们更新事件计数的原因使用 newCount 而不是 sessions 창을 사용합니다.
3. 페이지를 언로드할 때 최종 sendBeacon 요청을 수행해야 합니다. beforeunload 和 unload 事件不可靠，因此我们使用 visibiltychanged 事件（如果浏览器支持），当新的可见性状态为“隐藏”时，我们会更新服务器。该文档讨论了导致触发此事件的用户操作（不仅仅是在关闭页面时）。但是，如果浏览器不支持此事件，则 pagehidebeforeunload 및
unload

이벤트가 신뢰할 수 없다는 것을 알고 있으므로

visibiltychangedNavigator.sendBeacon 方法的文档中没有讨论是否可以有多个并发请求。假设可能存在（这是一个异步调用），则在 sendBeacon 이벤트(브라우저가 지원하는 경우), 새로운 가시성 상태가 "숨겨짐"일 때 서버를 업데이트합니다. 문서에서는 이 이벤트가 트리거되도록 하는 사용자 작업에 대해 설명합니다(페이지를 닫을 때뿐만 아니라). 그러나 브라우저가 이 이벤트를 지원하지 않는 경우 pagehide

🎜 이벤트를 사용했습니다. 🎜 🎜 🎜🎜Navigator.sendBeacon🎜 메서드에 대한 문서에서는 여러 개의 동시 요청이 있을 수 있는지 여부에 대해 논의하지 않습니다. 가능하다고 가정하면(비동기 호출) 사용자는 🎜sendBeacon🎜 요청이 현재 진행 중인 동안 🎜setInterval로 인해 페이지를 떠나거나 닫을 수 있습니다. 옮기다. 그런 다음 이 요청을 게시하는 서버 URL은 삽입을 수행하는 동안 테이블을 잠가야 하므로 해당 URL에 대한 후속 POST는 이전 URL이 완료될 때까지 차단됩니다. 테이블이 일종의 시퀀스 번호를 기본 키로 사용하는 경우 제가 제안하는 또 다른 해결책은 서버에 전달된 첫 번째 이벤트의 시작 배열 인덱스를 전달하는 것입니다. 그러면 서버는 이를 사용하여 각 이벤트에 대한 시퀀스를 명시적으로 설정합니다. 아니요 .삽입 이벤트. 그러면 전체 테이블을 잠그지 않고도 동시 업데이트를 실행할 수 있습니다. 🎜