技术求助：页面卸载时无法触发Pusher Client事件

这个问题我之前也碰到过！核心原因是浏览器在处理unload事件时，会优先终止页面的所有异步操作——而Pusher的trigger是基于WebSocket的异步请求，还没等消息发出去，浏览器就已经切断了连接，所以调试控制台完全看不到记录。按钮点击时页面处于活跃状态，异步操作能正常完成，自然没问题。

给你几个可靠的解决方案：

方案1：用navigator.sendBeacon（最推荐） #

这是浏览器专门为页面卸载时发送数据设计的API，它会保证请求被后台发送，不会被页面终止打断。你需要先在后端写一个接口，由后端帮你触发Pusher事件（因为带client-前缀的客户端事件只能由客户端触发，后端可以发送普通事件或者调整事件命名）：

前端代码：

$(window).on('unload', function() {
  const payload = { 
    id: MyPusher.user_id, 
    name: MyPusher.user_name 
  };
  // 用Blob发送JSON格式数据，兼容多数浏览器
  const data = new Blob([JSON.stringify(payload)], { type: 'application/json' });
  navigator.sendBeacon('/api/notify-user-leave', data);
});

后端示例（以Node.js为例）：

// 后端路由处理逻辑
app.post('/api/notify-user-leave', async (req, res) => {
  const { id, name } = req.body;
  // 用Pusher服务器端SDK触发事件
  await pusher.trigger('presence-channel-name', 'user-left', { id, name });
  res.sendStatus(200);
});

方案2：用fetch的keepalive选项 #

如果你的目标浏览器支持现代API（大部分主流浏览器都支持），可以用fetch并开启keepalive参数，效果和sendBeacon类似：

$(window).on('unload', function() {
  fetch('/api/notify-user-leave', {
    method: 'POST',
    body: JSON.stringify({ 
      id: MyPusher.user_id, 
      name: MyPusher.user_name 
    }),
    headers: { 'Content-Type': 'application/json' },
    keepalive: true,
    credentials: 'include' // 如果需要携带用户认证信息
  });
});

关键注意事项 #

• 不要直接在unload里用Pusher客户端trigger：WebSocket连接在页面卸载时会被立即关闭，消息根本发不出去。
• 客户端事件限制：client-前缀的事件只能由已认证的客户端触发，所以后端触发时要用普通事件名称（比如user-left），前端对应监听这个事件即可。
• 测试注意：部分浏览器在本地localhost环境下对unload事件的处理更严格，建议部署到测试环境验证效果。

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