ユーザーがWebサイトを閉じたときにユーザーセッション情報を保存する方法

Question

Web サイトのユーザー再生セッション機能を構築しようとしています。これを行うために rrweb ライブラリを使用しています。

このライブラリは記録時に実行します。Web ページ内のすべてのイベントをキャプチャし、これらのイベントを array に保存することで保存できます。セッションを再生したいときは # を渡すだけです。 ##array をセッションの再生を処理する再生関数に渡します。

現在、テスト目的でこの配列を

sessionStorage に保存しています。新しいイベントが発行されるたびに 配列 を取得し、その新しいイベントをプッシュして保存します sessionStorage を sessionStorage に次のようにもう一度追加します: リーリー < /p> ただし、運用環境では、その配列を

sessionStorage に保存し、新しいイベントが発行されるたびに更新するのではなく、その array を次の場所に保存します。データベース内で、ユーザー が を終了するとき、またはユーザーがサイトを閉じることを決定したとき (X キーを押すなど) に array を保存する関数を呼び出したいと考えています。ボタン)、一度データベースに保存します。

パート 1 - ユーザー

ログアウト時 - 非常に単純です。logout ボタンに eventListener を追加しました。これが 2 番目のパート - ときです。ユーザーがサイトを閉じることにしたとき、少し頭が痛くなります。

beforeUnload イベントがあることは知っていますが、ちょっと検索したところ、それが信頼できないことが明らかになりました。そのため、基本的に私が探しているのは、ユーザーがいつ閉じるかを判断する信頼できる方法です。私の Web サイトで async 関数 をトリガーして array をデータベースに保存できるようにします。

Answer 1

beforeunload イベントの信頼性の低さを軽減する方法についての私の考えは次のとおりです:

1. ページが初めてロードされるとき、現在のエントリ数を取得して sessions 配列に保存します。再生したい単一のページについて話していると仮定すると、このカウントを JavaScript 変数 eventCount として保存できます。最後にページを閉じたときに、何らかの理由でログに記録されたすべてのイベントが正常に保存されなかった場合に備えて、サーバー側のテーブルからカウントを取得することをお勧めします。
2. ウィンドウの checkEvents を使用して、関数が N 秒ごとに呼び出されるようにスケジュールします (この関数が呼び出される頻度を決定する必要があります) setInterval# ＃＃ 方法。この関数は現在のイベント数 (変数 newCount) を調べ、それが現在の eventCount 値より大きい場合、Navigator sendBeacon メソッドを使用してサーバーにメッセージを送信できます。最後の呼び出し以降に追加されたすべてのイベント (つまり、JSON.stringify(sessions.slice(eventCount, newCount)) を渡し、リクエストが完了したときにリクエストを送信します。 assign eventCount = newCount if newCount is > eventCount. 非同期 sendBeacon リクエストが実行されると、新しいイベントが生成される可能性があることに注意してください。 sessions の代わりに newCount を使用してイベント数を更新する理由は、配列の現在のサイズです。
ページをアンロードするときは、最後の
3. sendBeacon リクエストを実行する必要があります。 beforeunload および unload イベントは信頼できないことがわかっているため、次の場合に visibiltychanged イベントを使用します (ブラウザーがサポートしている場合)。新しいものが表示されます 性的ステータスが「非表示」の場合、サーバーを更新します。このドキュメントでは、このイベントをトリガーするユーザー アクション (ページを閉じるときだけでなく) について説明しています。ただし、ブラウザがこのイベント pagehide<必须使用 code> イベントをサポートしていない場合。

Navigator.sendBeacon メソッドのドキュメントでは、複数の同時リクエストが可能かどうかについては説明されていません。それが可能であると仮定すると (これは非同期呼び出しです)、ユーザーは sendBeacon リクエストの進行中に setInterval が原因でページを離れるか閉じることを決定する可能性があります。移行。次に、このリクエストを送信するサーバー URL は、挿入の実行中にテーブルをロックする必要があるため、その URL への後続の POST は前のリクエストが完了するまでブロックされます。テーブルが主キーとして何らかのシーケンス番号を使用している場合、私が提案する別の解決策は、サーバーに渡された最初のイベントの開始配列インデックスを渡すことです。サーバーはそれを使用して各イベントのシーケンスを明示的に設定します。 . イベントを挿入します。これにより、テーブル全体をロックすることなく同時更新を実行できるようになります。