Phoenix LiveView页面跳转时触发离开事件失败求助

为什么你的方法没生效？ #

1. phx-disconnected 不触发
   phx-disconnected 事件仅在WebSocket连接完全断开时触发，但用户在同一Phoenix应用内跳转页面时，WebSocket连接会被Phoenix复用，不会立即断开，因此这个事件不会被触发。

2. GenServer监控没收到:DOWN消息
   LiveView进程在用户跳转后不会立即终止——Phoenix默认会保留空闲的LiveView进程一段时间（开发环境下空闲超时通常为15秒），用于后续请求的复用。只有当进程超过空闲时间被系统回收，或用户完全关闭浏览器标签导致连接断开时，进程才会终止，:DOWN消息才会触发。

正确的实现方案 #

方案1：前端钩子监听页面离开事件

通过浏览器的beforeunload（页面卸载前）或visibilitychange（页面切换到后台）事件，结合Phoenix的phx-hook向LiveView发送自定义事件：

1. 在HEEX模板中添加钩子标记：

<div phx-hook="PageLeaveTracker"></div>

2. 在assets/js/app.js中定义钩子：

let Hooks = {};

Hooks.PageLeaveTracker = {
  mounted() {
    const sendLeaveEvent = () => {
      this.pushEvent("user_left_page", {});
    };

    // 监听页面卸载（关闭标签、跳转到外部网站）
    window.addEventListener("beforeunload", sendLeaveEvent);
    // 监听页面切换到后台（比如切标签、最小化窗口）
    window.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        sendLeaveEvent();
      }
    });

    // 清理事件监听
    this.cleanup = () => {
      window.removeEventListener("beforeunload", sendLeaveEvent);
      window.removeEventListener("visibilitychange", sendLeaveEvent);
    };
  },
  destroyed() {
    this.cleanup();
  }
};

// 初始化LiveSocket时传入钩子
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  params: { _csrf_token: csrfToken }
});

3. 在LiveView模块中处理事件：

def handle_event("user_left_page", _params, socket) do
  # 这里编写用户离开页面时的逻辑，比如清理临时数据、记录操作日志
  {:noreply, socket}
end

方案2：利用LiveView的terminate/2回调

如果需要在LiveView进程真正终止时处理逻辑，可以实现terminate/2回调——这个函数会在进程被销毁时执行（比如空闲超时、连接断开）：

def terminate(reason, socket) do
  # 处理进程终止逻辑，比如释放占用的资源
  IO.puts("LiveView进程终止，原因：#{inspect(reason)}")
  :ok
end

关键结论 #

LiveView页面跳转时不会立即关闭进程，Phoenix会复用空闲进程以提升性能。若要在用户离开页面时即时触发逻辑，优先用前端钩子监听浏览器事件；若只需在进程销毁时处理，使用terminate/2即可。

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