브라우저가 포커스를 잃을 때 웹페이지의 JavaScript 카운터를 실시간으로 업데이트하는 방법은 무엇입니까?

Question

저는 Perl로 작성된 HTML, CSS 및 JavaScript를 사용하여 브라우저 게임을 작성하고 있습니다. 건강과 체력은 서버에 저장되며 JavaScript를 사용하여 현재 페이지가 로드될 때 이러한 통계의 실시간 업데이트 개수를 사용자에게 표시합니다. 이 기능은 잘 작동하지만 사용자가 탭을 전환하거나 다른 앱으로 전환하고 브라우저를 백그라운드에서 실행 중인 상태로 두면 돌아올 때 표시되는 카운트 값이 제대로 유지되지 않습니다. 따라서 브라우저로 다시 전환하면 카운터에 체력이 50/100으로 표시될 수 있지만 실제로는 체력이 100/100입니다. 따라서 게임에서 어떤 작업(새 페이지 로드)을 하면 서버는 카운터를 실제 값으로 업데이트합니다. 왜냐하면 JavaScript는 브라우저에서 사용자에게 "실시간" 스크롤 보기를 표시할 타이밍일 뿐이기 때문입니다.

페이지/탭이 비활성화되어 있거나 포그라운드에 있지 않은 경우에도 JavaScript 카운터가 계속 작동하도록 하는 방법이 있습니까? 라이브 서버 푸시 콘텐츠의 연속 스트림을 브라우저의 사용자에게 표시하기 위해 게임을 완전히 다시 작성하는 것이 부족합니까?

게임을 하고 있다고 가정해 보세요. 건강과 체력이 회복되는 것을 볼 수 있습니다. 잠시 동안 다른 프로그램으로 전환한 다음 브라우저에서 게임으로 돌아갑니다. 자리를 비운 동안에는 체력과 체력이 업데이트되지 않습니다. 하지만 게임에서 작업을 수행하면 서버 내부에서 추적되기 때문에 값이 원래대로 업데이트됩니다. 이것이 제가 해결하고 싶은 문제입니다. 그것이 명확해지기를 바랍니다!

저는 이 문제를 해결하기 위해 온라인으로 검색한 것 외에는 아무것도 시도하지 않았고 결국 이 사이트에서 정말 "좋은" 답변을 단 하나도 찾지 못했기 때문에 물어보기로 결정했습니다.

Answer 1

지속적인 서버 푸시도 작동하지 않습니다. 포커스가 손실될 때 발생하는 타이머나 이벤트와 같은 기본 이벤트 루프의 모든 항목은 리소스를 절약하기 위해 브라우저에 의해 속도가 느려집니다. 일부 모바일 브라우저에서는 이를 완전히 중지합니다.

문제에 대한 답은 앱이 이러한 통계를 추적하는 방식을 변경하는 것입니다.

이제 일부 사람들은 WebWorkers를 사용하여 별도의 스레드에서 타이머를 실행하라고 하지만 이것이 모든 문제를 해결하지는 않습니다. 다른 버전에서는 여전히 문제가 있습니다. 예를 들어 누군가 잠자기 상태에서 페이지를 다시 시작하는 경우 등이 있습니다. 백그라운드 작업이 유지되지 않습니다.

서버에서도 이러한 통계를 추적한다고 말씀하셨는데요. 이는 편리하므로 해야 할 가장 확실한 일은 Window Focus Event를 사용하여 레이블이 포커스를 다시 얻는 시기를 감지하는 것입니다. 그런 다음 서버를 호출하여 최신 통계를 얻고 해당 새 데이터를 기반으로 타이머를 재설정합니다. 요청이 진행되는 동안 오래된 데이터가 표시되는 것을 방지하려면 이 시간 동안 로딩 스피너나 다른 항목을 표시하도록 선택할 수 있습니다.

이 문제를 해결하는 또 다른 일반적인 방법은 타이머가 증가할 때마다 데이터가 마지막으로 반환된 타임스탬프를 나타내는 변수를 유지하는 것입니다. 포커스를 잃었을 때 blur事件检测到，并将该最后时间戳存储在某个地方。然后当它们重新获得焦点时，您可以处理focus 이벤트를 사용하여 현재 시간과 포커스를 떠나기(포커스를 잃기) 전 마지막으로 기록된 시간의 차이를 계산할 수 있습니다. 이 기간부터 값이 얼마인지 다시 계산할 수 있습니다.

그러나 서버에 이 정보가 있으면 오류가 발생할 가능성이 적고 포커스가 다시 돌아왔을 때 서버에 물어보는 것이 더 간단합니다.