Add CustomSocket

Extra closeCodes handling for Firefox
see phoenixframework/phoenix#5735 (comment)

Author: rickclare

assets/js/app.js

@@ -18,12 +18,12 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix"
+import CustomSocket from "./custom_socket"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+let liveSocket = new LiveSocket("/live", CustomSocket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
 })

assets/js/custom_socket.js

@@ -0,0 +1,20 @@
+import { Socket } from "phoenix"
+
+export default class CustomSocket extends Socket {
+  // Adapted from https://github.com/phoenixframework/phoenix/tree/v1.7.14/assets/js/phoenix
+  onConnClose = function (event) {
+    let closeCode = event && event.code
+    if (this.hasLogger()) this.log("transport", "close", event)
+
+    // Extra closeCodes handling for Firefox
+    // see https://github.com/phoenixframework/phoenix/pull/5735#issuecomment-2167196419
+    if (closeCode == 1000 || closeCode == 1001) this.channels.forEach((c) => c.leave())
+
+    this.triggerChanError()
+    this.clearHeartbeats()
+    if (!this.closeWasClean && closeCode !== 1000) {
+      this.reconnectTimer.scheduleTimeout()
+    }
+    this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event))
+  }
+}

lib/playground_web/components/core_components.ex

@@ -155,7 +155,7 @@ defmodule PlaygroundWeb.CoreComponents do
         id="client-error"
         kind={:error}
         title={gettext("We can't find the internet")}
-        phx-disconnected={delayed_show(".phx-client-error #client-error")}
+        phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
       >
@@ -612,19 +612,6 @@ defmodule PlaygroundWeb.CoreComponents do
     )
   end
 
-  # Workaround for "We can't find the internet" flashes on Firefox
-  # https://github.com/phoenixframework/phoenix/issues/5102#issuecomment-1970738490
-  def delayed_show(js \\ %JS{}, selector) do
-    JS.show(js,
-      to: selector,
-      time: 1300,
-      transition:
-        {"delay-1000 transition-all transform ease-out duration-300",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-         "opacity-100 translate-y-0 sm:scale-100"}
-    )
-  end
-
   def hide(js \\ %JS{}, selector) do
     JS.hide(js,
       to: selector,