持续发送请求：浏览器关闭/刷新时的应对之策

2023-09-13 06:09:31

在现代网络应用程序中，用户与网页的交互是不可或缺的一部分。然而，当用户关闭浏览器窗口、跳转到其他窗口或刷新页面时，应用程序可能会失去与用户的连接，导致数据传输中断。为了解决这个问题，我们需要采取一些策略来确保应用程序在浏览器关闭或刷新时仍能持续发送请求。

浏览器关闭时发送请求

问题描述

当用户关闭浏览器窗口时，浏览器会自动终止所有与服务器的连接。这意味着，任何正在进行中的请求都会被立即中止，无法将数据发送到服务器。这种情况可能会导致应用程序在用户关闭浏览器后无法继续接收数据，从而影响用户体验。

解决方案

使用WebSockets或SSE（服务器端事件）

WebSockets 和 SSE 是两种常用的技术，允许在浏览器和服务器之间建立持续的双向连接。即使浏览器窗口关闭，连接仍然保持活动状态，从而允许持续发送请求。

WebSockets 示例

const socket = new WebSocket('ws://localhost:3000');

socket.onopen = () => {
  console.log('WebSocket connection established.');
};

socket.onclose = () => {
  console.log('WebSocket connection closed.');
};

socket.onmessage = (event) => {
  console.log('Message from server:', event.data);
};

socket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

SSE 示例

const source = new EventSource('http://localhost:3000/events');

source.onmessage = (event) => {
  console.log('Message from server:', event.data);
};

source.onerror = (error) => {
  console.error('SSE error:', error);
};

使用IndexedDB或localStorage

IndexedDB 和 localStorage 是两种浏览器API，允许在本地存储数据。当浏览器关闭时，数据将保留，并且可以在浏览器重新打开时使用。这允许应用程序在浏览器重启后恢复状态和持续发送请求。

IndexedDB 示例

const db = indexedDB.open('my-db', 1);

db.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('my-store', { keyPath: 'id' });
};

db.onsuccess = () => {
  const tx = db.transaction('my-store', 'readwrite');
  const store = tx.objectStore('my-store');
  const request = store.get('my-data');

  request.onsuccess = (event) => {
    const data = event.target.result;
    console.log('Data from IndexedDB:', data);
  };

  request.onerror = (error) => {
    console.error('IndexedDB error:', error);
  };
};

localStorage 示例

const data = localStorage.getItem('my-data');

if (data) {
  console.log('Data from localStorage:', data);
} else {
  console.log('No data found in localStorage.');
}

浏览器刷新时发送请求

问题描述

当用户刷新浏览器页面时，浏览器会重新加载页面，并向服务器发送新的请求。这意味着，任何正在进行中的请求都会被中止，并且需要重新启动。这种情况可能会导致应用程序在用户刷新页面后无法继续接收数据，从而影响用户体验。

解决方案

使用XMLHttpRequest的onreadystatechange事件

XMLHttpRequest 的 onreadystatechange 事件在请求状态发生更改时触发，包括在浏览器刷新时。可以通过侦听此事件并在浏览器刷新后重新发送请求来解决此问题。

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('Request successful:', xhr.responseText);
  }
};

xhr.open('GET', 'http://localhost:3000/api/data', true);
xhr.send();

使用fetch API的then()方法

fetch API 的 then() 方法返回一个 Promise 对象，在请求完成时解析。可以通过在浏览器刷新时侦听此 Promise 的 catch() 块来重新发送请求。

fetch('http://localhost:3000/api/data')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log('Data from API:', data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

使用Service Workers

Service Workers 是浏览器支持的脚本，可以在后台运行并拦截网络请求。可以通过在 Service Worker 中注册一个 fetch 事件监听器，并在浏览器刷新时重新发送请求来解决此问题。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).catch((error) => {
      console.error('Fetch error:', error);
      return fetch(event.request); // 重新发送请求
    })
  );
});

结论

当用户关闭浏览器或刷新页面时持续发送请求对于确保现代网络应用程序的稳定性和用户体验至关重要。本文讨论了多种实现持续请求的方法，包括使用 WebSockets、SSE、IndexedDB、localStorage、XMLHttpRequest、fetch API 和 Service Workers。通过应用这些方法，开发人员可以确保他们的应用程序即使在浏览器窗口关闭或刷新时也能继续与服务器通信。