如何在浏览器窗口关闭时更新数据库？

Posted 2023-02-16

【中文标题】如何在浏览器窗口关闭时更新数据库？

【英文标题】：how can i update database on browser window close?

【发布时间】：2020-10-09 11:55:37

【问题描述】：

我正在尝试向用户流式传输一些视频，并且我希望他们能够在他们离开网站并再次进入时继续观看视频。 据我所知，将视频时间存储在浏览器的本地存储中并在它们返回时检索它是最好的方法，但在这种情况下，当用户从不同的 PC 或浏览器登录时，视频观看时间会重置。 由于现在在某些浏览器中禁用了同步 Ajax，我也无法在浏览器关闭时将观看时间保存在数据库中（使用 onunload 或 beforeunload 事件）。

我尝试过的另一种方法是，节省用户点击暂停按钮的时间，如下所示：

var video1 = document.getElementById('video1');

function videoPausePlayHandler(e) 
    if (e.type == 'pause') 
        //saving the watched time in databse using Ajax
    

video1.addEventListener('pause', videoPausePlayHandler, false);

但是当用户关闭浏览器窗口或其他任何东西而不是单击暂停按钮时，它再次不起作用。

还有其他方法吗？

【问题讨论】：

从用户的角度。提供此类功能的网站（例如 youtube），只需定期将用户信息保存在视频中即可。它会在下一次连接时回滚一点。

@JulienMaret 我如何节省时间？在哪里？数据库？

【参考方案1】：

您可以使用浏览器的onunload 事件并发送Navigator.sendBeacon 将您的时间戳异步发送到您的服务器，而不会阻止用户关闭浏览器窗口。 sendBeacon Documentation。浏览器覆盖范围看起来相当不错。只是老IE根本不支持。

【讨论】：

感谢您的提示。但是，我使用的是 Laravel，并且需要与信标一起发送 CSRF 令牌标头。另一方面，根据W3C 信标不能有自定义标头。有什么想法吗？

真的！在这种情况下，您可以在播放时定期将时间戳发送到后端。每当用户关闭浏览器窗口时，您都有最新的时间戳

是的，但这会给数据库带来高负载。我找到了通过data.append('_token', token);

使用信标传递 CSRF 令牌的解决方案

遗憾的是，根据文档，由于安全问题，此 hack 已经并将在较新的浏览器版本中被进一步弃用