The setup (1.6.0-rc.0):
$ mix phx.new demo --no-ecto
$ cd demo
$ mkdir lib/demo_web/live
lib/demo_web/live/clock_live.ex
defmodule DemoWeb.ClockLive do
use DemoWeb, :live_view
def mount(_params, _session, socket) do
if connected?(socket), do: Process.send_after(self(), :tick, 1000)
{:ok, assign_current_time(socket)}
end
def render(assigns) do
~H"""
<h1>UTC: <%= @now %></h1>
"""
end
def handle_info(:tick, socket) do
Process.send_after(self(), :tick, 1000)
{:noreply, assign_current_time(socket)}
end
defp assign_current_time(socket) do
utc_now =
Time.utc_now()
|> Time.to_string()
|> String.split(".")
|> hd
assign(socket, now: utc_now)
end
end
Add live "/clock", ClockLive, :index
in the router.
This displays a self updating clock on http://localhost:4000/clock
When I stop the server and restart it the clock will stop working for that pause and restarts automatically (which is very nice). But I’d like to display instead of @now
the word offline
during that offline phase.
Obviously I can’t solve this on the server because it is offline. How can I solve this with JavaScript on the client? My JavaScript knowledge is minimal and I have no idea if I can tackle this with Alpine.js or if I have to do JavaScript open heard surgery.
Let me rephrase: What is the cleanest way to display an offline
message on the page?