问题: 套接字一次又一次地重新加入,这导致实时视图本身定期发出事件。
场景:我有包含 phx-change 事件的索引页面。当我让页面闲置一段时间后,事件开始定期自动触发。它不仅限于单页,而是发生在每个实时视图页面上,我用谷歌搜索了这个问题,但找不到任何解决方案。
我注意到有时心跳停止超过 1 分钟(超时限制为 1 分钟)的 1 个原因,在这种情况下,套接字再次重新加入。
我在端点的客户端以及服务器端增加了超时,以检查这是否是唯一的问题,但它没有工作并且套接字的行为相同。
以前有没有人遇到过同样的问题,可能是什么原因以及如何避免这个问题,有什么建议吗?
堆栈:花瓣
Elixir:1.11 Erlang:23.0 phoenix:1.5.3 phoenix_live_view:0.15.7 alpinejs “^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]]