Wie aktualisiere ich einen JavaScript-Zähler auf einer Webseite in Echtzeit, wenn der Browser den Fokus verliert?

Question

Ich schreibe ein Browserspiel mit HTML, CSS und JavaScript, geschrieben in Perl. Gesundheit und Ausdauer werden auf dem Server gespeichert und ich verwende JavaScript, um dem Benutzer eine aktualisierte Live-Zählung dieser Statistiken anzuzeigen, wenn die aktuelle Seite geladen wird. Diese Funktion funktioniert gut, aber wenn der Benutzer zwischen Tabs oder einer anderen App wechselt und den Browser im Hintergrund laufen lässt, wird der Zählwert, der bei der Rückkehr angezeigt wird, nicht richtig angezeigt. Wenn Sie also zum Browser zurückkehren, zeigt Ihr Zähler möglicherweise eine Ausdauer von 50/100 an, obwohl Ihre Ausdauer tatsächlich 100/100 beträgt. Wenn Sie also etwas im Spiel tun (eine neue Seite laden), aktualisiert der Server den Zähler auf einen echten Wert, da das JavaScript nur das Timing vorgibt, um dem Benutzer eine „Live“-Bildlaufansicht im Browser anzuzeigen.

Gibt es eine Möglichkeit sicherzustellen, dass JavaScript-Zähler auch dann noch funktionieren, wenn die Seite/der Tab inaktiv ist oder sich nicht im Vordergrund befindet? Ich möchte mein Spiel nicht komplett neu schreiben, um dem Benutzer im Browser einen kontinuierlichen Stream von Live-Server-Push-Inhalten anzuzeigen?

Angenommen, Sie spielen ein Spiel. Sie werden sehen, wie Ihre Gesundheit und Ausdauer zurückkehren. Sie wechseln für eine Minute zu einem anderen Programm und kehren dann im Browser zum Spiel zurück. Sie werden feststellen, dass Ihre Gesundheit und Ausdauer während Ihrer Abwesenheit nicht aktualisiert werden. Wenn Sie jedoch eine Aktion im Spiel ausführen, wird der Wert auf den erforderlichen Wert aktualisiert, da er intern auf dem Server verfolgt wird. Das ist das Problem, das ich lösen möchte. Hoffe das macht es klar!

Ich habe nichts anderes versucht, um dieses Problem zu lösen, als online zu suchen und letztendlich auf dieser Website keine einzige wirklich „gute“ Antwort zu finden, also habe ich beschlossen, nachzufragen.

Answer 1

连续的服务器推送也不起作用。主事件循环中的任何东西，如计时器或在失去焦点时发生的事件，都会被浏览器减慢以节省资源。一些移动浏览器会完全停止它。

问题的答案是改变应用程序如何跟踪这些统计数据。

现在有些人会说要使用WebWorkers在单独的线程中运行计时器，但这并不能解决所有问题。您仍然会遇到不同版本的问题，例如如果有人从睡眠中恢复您的网页或类似情况。没有后台任务能够幸存下来。

您提到您还在服务器上跟踪这些统计数据。这很方便，因此您应该做的最明显的事情是使用窗口焦点事件检测标签何时重新获得焦点。然后，您将调用服务器以获取最新的统计数据并根据该新数据重置计时器。为了在请求正在进行时防止显示陈旧的数据，您可以选择在此期间显示加载旋转器或其他内容。

修复此问题的另一种常见方法是在每次计时器增加时保留一个变量，该变量表示数据上次返回的时间戳。当您失去焦点时，您可以使用blur事件检测到，并将该最后时间戳存储在某个地方。然后当它们重新获得焦点时，您可以处理focus事件，并计算当前时间与离开焦点（失去焦点）之前记录的最后时间之间的差异。您可以从此期间重新计算出应该是什么值。

但是如果您的服务器具有此信息，只需在重新获得焦点时向服务器询问会更不容易出错和简单。