Allow configurable websocket URL for live view (#3082)

assets/js/liveview/live_socket.js

@@ -3,9 +3,12 @@ import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']")
-if (csrfToken) {
+let websocketUrl = document.querySelector("meta[name='websocket-url']")
+if (csrfToken && websocketUrl) {
   let token = csrfToken.getAttribute("content")
-  let liveSocket = new LiveSocket("/live", Socket, {
+  let url = websocketUrl.getAttribute("content")
+  let liveUrl = (url === "") ? "/live" : new URL("/live", url).href;
+  let liveSocket = new LiveSocket(liveUrl, Socket, {
     params: { _csrf_token: token }, hooks: {}, dom: {
       // for alpinejs integration
       onBeforeElUpdated(from, to) {

config/runtime.exs

@@ -225,6 +225,8 @@ log_failed_login_attempts =
   |> get_var_from_path_or_env("LOG_FAILED_LOGIN_ATTEMPTS", "false")
   |> String.to_existing_atom()
 
+websocket_url = get_var_from_path_or_env(config_dir, "WEBSOCKET_URL", "")
+
 config :plausible,
   environment: env,
   mailer_email: mailer_email,
@@ -247,7 +249,8 @@ config :plausible, PlausibleWeb.Endpoint,
     transport_options: [max_connections: :infinity],
     protocol_options: [max_request_line_length: 8192, max_header_value_length: 8192]
   ],
-  secret_key_base: secret_key_base
+  secret_key_base: secret_key_base,
+  websocket_url: websocket_url
 
 maybe_ipv6 = if System.get_env("ECTO_IPV6"), do: [:inet6], else: []
 

lib/plausible_web/endpoint.ex

@@ -58,4 +58,10 @@ defmodule PlausibleWeb.Endpoint do
 
   plug CORSPlug
   plug PlausibleWeb.Router
+
+  def websocket_url() do
+    :plausible
+    |> Application.fetch_env!(__MODULE__)
+    |> Keyword.fetch!(:websocket_url)
+  end
 end

lib/plausible_web/templates/layout/app.html.eex

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta name="description" content="Plausible is a lightweight and open-source web analytics tool. Your website data is 100% yours and the privacy of your visitors is respected."/>
     <meta name="csrf-token" content=<%= Plug.CSRFProtection.get_csrf_token() %> />
+    <meta name="websocket-url" content=<%= websocket_url() %> />
     <link rel="icon" type="image/png" sizes="32x32" href="<%= PlausibleWeb.Router.Helpers.static_path(@conn, "/images/icon/plausible_favicon.png") %>">
     <link rel="apple-touch-icon" href="/images/icon/apple-touch-icon.png">
     <title><%= assigns[:title] || "Plausible · Simple, privacy-friendly alternative to Google Analytics" %></title>

lib/plausible_web/views/layout_view.ex

@@ -9,6 +9,10 @@ defmodule PlausibleWeb.LayoutView do
     PlausibleWeb.Endpoint.url()
   end
 
+  def websocket_url() do
+    PlausibleWeb.Endpoint.websocket_url()
+  end
+
   def home_dest(conn) do
     if conn.assigns[:current_user] do
       "/sites"