Angular组件打开/离开时推送通知的实现及浏览器关闭场景下请求完成的最佳实践问询

针对你遇到的浏览器/标签页关闭时无法发送减计数请求的问题，我整理了几个生产环境中验证过的最佳实践方案，你可以根据场景组合使用：

1. 优先使用Beacon API（页面卸载时的可靠请求方案） #

浏览器原生的Beacon API就是为解决页面卸载时无法发送请求的问题设计的——它不会阻塞页面关闭流程，浏览器会在后台异步完成请求发送，兼容性也很好（除了IE）。

在Angular组件里的实现示例：

import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';

@Component({
  selector: 'app-product-view',
  templateUrl: './product-view.component.html'
})
export class ProductViewComponent implements OnInit, OnDestroy {
  tenantId = 'abc';
  productId = 1;
  // 生成唯一会话ID，用于后续兜底逻辑
  private sessionId = crypto.randomUUID();

  ngOnInit() {
    // 页面打开时发送增量通知
    this.sendCountUpdate('increment');
  }

  ngOnDestroy() {
    // 正常关闭组件时发送减量通知
    this.sendCountUpdate('decrement');
  }

  // 监听浏览器/标签页卸载事件
  @HostListener('window:beforeunload')
  handlePageUnload() {
    // 用Beacon发送卸载通知
    const formData = new FormData();
    formData.append('tenantId', this.tenantId);
    formData.append('productId', this.productId.toString());
    formData.append('action', 'decrement');
    formData.append('sessionId', this.sessionId);

    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/product/active-count', formData);
    } else {
      // 降级方案：使用fetch的keepalive选项
      fetch('/api/product/active-count', {
        method: 'POST',
        body: formData,
        keepalive: true
      });
    }
  }

  private sendCountUpdate(action: 'increment' | 'decrement') {
    const formData = new FormData();
    formData.append('tenantId', this.tenantId);
    formData.append('productId', this.productId.toString());
    formData.append('action', action);
    formData.append('sessionId', this.sessionId);

    fetch('/api/product/active-count', {
      method: 'POST',
      body: formData
    }).catch(err => console.error('计数更新失败:', err));
  }
}

2. 心跳机制+超时回收（极端场景兜底） #

Beacon也存在极个别极端情况失效（比如浏览器突然崩溃、设备断电），这时候需要后端的兜底逻辑：

• 前端打开页面时生成唯一sessionId，和tenantId、productId一起发送给后端
• 前端每隔15-30秒发送一次心跳请求，更新该session的最后活跃时间
• 后端维护一个带过期时间的映射表（推荐用Redis），key为{tenantId}:{productId}:{sessionId}，value为最后活跃时间
• 后端定时任务（比如每10秒）扫描所有session，将超过阈值（比如40秒）的session标记为失效，对应计数减1

后端Redis操作示例（伪代码）：

// 增量请求
redisTemplate.opsForValue().increment("tenant:abc:product:1");
redisTemplate.opsForValue().set("tenant:abc:product:1:session:xxx", System.currentTimeMillis(), 30, TimeUnit.SECONDS);

// 心跳请求
redisTemplate.expire("tenant:abc:product:1:session:xxx", 30, TimeUnit.SECONDS);

// 定时清理任务
Set<String> expiredSessions = redisTemplate.keys("tenant:*:product:*:session:*")
    .stream()
    .filter(key -> redisTemplate.getExpire(key) < 0)
    .collect(Collectors.toSet());

for (String sessionKey : expiredSessions) {
    // 解析出tenantId和productId
    String[] parts = sessionKey.split(":");
    String tenantId = parts[1];
    String productId = parts[3];
    redisTemplate.opsForValue().decrement("tenant:" + tenantId + ":product:" + productId);
    redisTemplate.delete(sessionKey);
}

3. 禁用同步请求（不推荐，仅作应急降级） #

虽然可以用同步XMLHttpRequest或带async: false的请求，但会阻塞页面卸载流程，用户会看到页面"卡住"的提示，严重影响体验，只建议在没有其他方案时临时使用。

关键注意事项 #

• 后端计数必须用原子操作（比如Redis的incr/decr），避免多用户并发操作时的计数错误
• 会话ID要足够唯一，使用crypto.randomUUID()这类标准生成方式，避免冲突
• 不要依赖Beacon的响应结果——它是异步无响应的，计数准确性主要靠心跳兜底保证

内容的提问来源于stack exchange，提问作者java dev