I have a live component (see below). This runs a hook in app.js that use the vtk.js javascript library to render a 3d image (loaded as obj files). For sufficiently complex objects it can take over a minute to render. On completion the image will appear briefly and be interactive before a “We can’t find the internet” appears and the page reloads.
How can I solve this? A hacky solution says I should be able to change the timeout somehow? Or is there a better way of rendering the live component without blocking the websocket connection?
defmodule MyApp.Map do
use Phoenix.Component
def map(assigns) do
~H"""
<div>
<div
id="vtk-container"
phx-hook="VTKInit"
phx-update="ignore"
>
</div>
</div>
"""
end
end
A socket reconnect shouldn’t cause the page to reload. It sounds like either there is an error (check your phoenix console) or perhaps LiveReload is messing with you. Does your app write to the filesystem at all? This has gotten me in the past where something was writing to one of the directories being watched by LiveReload which caused a reload and I had noooo idea what was going on. This is just a guess, though. But this shouldn’t be a timeout issu, it’s a websocket—it’s supposed to stay connected indefinitely.
Sorry I didn’t fully understand your problem and get what you mean by blocking the socket now. Apparently you can pass a timeout option to liveSocket on the client side. Possibly also server side? See this short thread. I’m not sure this is the best solution, though. Sorry for the rather unhelpful answer!
Thanks, yes that thread fixed it. Would be interested if anyone knows a better solution for live components with heavy Javascript workloads.
