套接字一次又一次地重新加入，这导致实时视图本身定期发出事件。与 Alpine js 一起使用时

Question

问题： 套接字一次又一次地重新加入，这导致实时视图本身定期发出事件。

场景： 我有包含 phx-change 事件的索引页。当我让页面闲置一段时间后，事件开始定期自动触发。它不仅限于单个页面，而是发生在每个实时视图页面上，我用谷歌搜索了这个问题，但找不到任何解决方案。

1 原因我注意到有时心跳停止超过 1 分钟（超时限制为 1 分钟），在这种情况下套接字重新加入。
我在 Endpoint 中增加了客户端和服务器端的超时时间，以检查这是否是唯一的问题，但它不起作用，套接字的行为相同。
有没有人遇到过同样的问题，可能的原因是什么，如何避免这个问题，有什么建议吗？

堆栈：花瓣

圣水：1.11 二郎：23.0 凤凰：1.5.3 phoenix_live_view：0.15.7 高山“^2.8.2” 浏览器：chrome、safari

我认为问题出在 Alpine Js 上，但找不到任何解决方案。

这是我的 app.js 代码

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
    uploaders: Uploaders,
    hooks: Hooks,
    params: { _csrf_token: csrfToken },
    timeout: 60000,
    dom: {
        onBeforeElUpdated(from, to) {
            if (from.__x) {
                Alpine.clone(from.__x, to);
            }
            flatpickr(".date-picker", {
                wrap: true,
                disableMobile: true,
                dateFormat: "Ymd H:i:S.ssss"
            });
            flatpickr(".datetime-picker", {
                enableTime: true,
                wrap: true,
                disableMobile: true,
                "plugins": [new confirmDatePlugin({ confirmIcon: "", confirmText: "Confirm" })],
                time_24hr: true,
                dateFormat: "Ymd H:i:S.ssss"
            });
        }
    }, 
    heartbeatIntervalMs: 10000
});

端点配置：

 socket "/socket", PrintSimpleWeb.UserSocket,
  websocket: [
    timeout: :infinity,
  ],
    longpoll: false

  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]

Answer 1

它已通过简单更新 Elixir 依赖项和 npm 包修复。以下是我遵循的步骤：

> remove _build, node_modules, deps folder
RUN: 
> mix deps.get 
> mix compile
> npm install (inside /assets)
> iex -S mix phx.server

套接字一次又一次地重新加入，这导致实时视图本身定期发出事件。与 Alpine js 一起使用时

Socket rejoins again and again which causes Live View to emit events itself periodically. when using with Alpine js

erlang

elixir

phoenix-framework

alpine.js

phoenix-live-view