Как понять что скрипт перестал работать после того как развернули браузер?

Question

[DragoN DragoN]

Здравствуйте!

Я запутался в том, что хочу сделать. Основная мысль такая, что при сворачивании браузера, скрипт перестает работать через какое-то время. Я использую setTimeout перезапускаю свои функции в скрипте, но знаю что setTimeout работает криво, накапливается или вовсе перестает работать. Как мне перезапускать скрипт после развертывания браузера телефона в котором также есть setTimeout для перезапуска fetch при ошибках (например)?

Есть такой код у меня, который поднимает WebSocket соединение, оно как раз подходит для примера, так как другие функции выглядят похоже:

function WSD()
	{
		let ws = new WebSocket( 'wss://...' );
		ws.onopen = function ()
		{
                     ...
		}

		ws.onmessage = function ( e )
		{
			...
		}

		ws.onclose = ws.onerror = function ( error )
		{
			ws = null
			setTimeout( WSD, 500 );
		};
	}
	WSD();

Может конечно стоит перезапускать страницу, если вкладка была долго свернута используя Page Visibility API и фиксации времени, но это выглядит как костыль

Answer 1

[Aleksey Solovyev]

Я запутался в том, что хочу сделать.

Одному вам известно, что у вас на уме

но знаю что setTimeout работает криво,

Современные браузеры снижают частоту таймеров, чтобы сэкономить ресурсы. Поэтому и "криво" работает как вам кажется. Аналогично "криво" будет работать любой требующий ресурсов код - WebSocker и тд.

накапливается или вовсе перестает работать

Это проблемы у вас в коде

Как мне перезапускать скрипт после развертывания браузера телефона

0. Вынесите реализацию подключения к websocket'у в отдельную функцию и проверяйте состояние соединения перед каждым действием:

let socket;
const url = "ws://your-websocket-server-url";

function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => {};
  socket.onmessage = (event) => {};
  socket.onerror = (error) => {};
  socket.onclose = (event) => {};
}

function reconnect() {
  if (socket && socket.readyState !== WebSocket.CLOSED) return;
  .....
}

function send(message) {
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.send(message);
    return
  }
  console.warn("WebSocket is not open. Message not sent:", message);
  ....
}

1. Отправляйте переодически ping сообщение для проверки состояния соединения. Если нет ответа, переподключаемся (и проверяем состояние соединения перед переподключением).
2. Добавьте слушатель visibilitychange для отслеживания "развертывания" вкладки:

document.addEventListener('visibilitychange', () => {
    // document.hidden
    if (document.visibilityState === 'visible' && websocket.readyState === WebSocket.CLOSED) {
        reconnect();
    }
});

ps забыл упомянуть про PushAPI если необходимо получать сообщения в фоновом режиме (94.65% на caniouse):

API to allow messages to be pushed from a server to a browser, even when the site isn't focused or even open in the browser.

Comments

[DragoN DragoN]

Мне кажется, вы дали мне направление. Спасибо за помощь, мне не хватало этого