Add ping

assets/js/app.js

@@ -177,6 +177,23 @@ Hooks.AudioPlayer = {
   formatTime(seconds){ return new Date(1000 * seconds).toISOString().substr(14, 5) }
 }
 
+
+Hooks.Ping = {
+  mounted(){
+    this.handleEvent("pong", () => {
+      console.log("pong")
+      this.el.innerText = `ping: ${Date.now() - this.nowMs}ms`
+      this.timer = setTimeout(() => this.ping(), 1000)
+    })
+    this.ping()
+  },
+  destroyed(){ clearTimeout(this.timer) },
+  ping(){
+    this.nowMs = Date.now()
+    this.pushEvent("ping", {})
+  }
+}
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   hooks: Hooks,

lib/live_beats_web/live/nav.ex

@@ -8,7 +8,9 @@ defmodule LiveBeatsWeb.Nav do
     {:cont,
      socket
      |> assign(active_users: MediaLibrary.list_active_profiles(limit: 20))
-     |> attach_hook(:active_tab, :handle_params, &handle_active_tab_params/3)}
+     |> assign(:region, System.get_env("FLY_REGION"))
+     |> attach_hook(:active_tab, :handle_params, &handle_active_tab_params/3)
+     |> attach_hook(:ping, :handle_event, &handle_event/3)}
   end
 
   defp handle_active_tab_params(params, _url, socket) do
@@ -29,6 +31,12 @@ defmodule LiveBeatsWeb.Nav do
     {:cont, assign(socket, active_tab: active_tab)}
   end
 
+  defp handle_event("ping", _, socket) do
+    {:halt, push_event(socket, "pong", %{})}
+  end
+
+  defp handle_event(_, _, socket), do: {:cont, socket}
+
   defp current_user_profile_username(socket) do
     if user = socket.assigns.current_user do
       user.username

lib/live_beats_web/templates/layout/live.html.heex

@@ -24,7 +24,7 @@
       <.link navigate={home_path(@current_user)}>
         <.icon name={:status_online} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined/>
         <span class="h-8 w-auto text-2xl ml-1 font-bold">
-          LiveBeats
+          LiveBeats <%= @region %>
         </span>
       </.link>
     </div>
@@ -55,7 +55,7 @@
       <.link navigate={home_path(@current_user)}>
         <.icon name={:status_online} class="w-8 h-8 text-purple-600 -mt-2 inline-block" outlined/>
         <span class="h-8 w-auto text-2xl ml-1 font-bold">
-          LiveBeats
+          LiveBeats <small class="font-normal"><%= @region %></small>
         </span>
       </.link>
     </div>
@@ -164,4 +164,7 @@
 
     <%= @inner_content %>
   </main>
+  <div class="relative">
+    <div id="ping" phx-hook="Ping" class="fixed bottom-0 right-0 bg-gray-900 text-gray-200 px-2 rounded-tl-md text-sm w-24 min-w-max"></div>
+  </div>
 </div>