From 4968b2e81bd20395ef3d6bd43bea48b9de8f4a63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filipe=20Caba=C3=A7o?= Date: Thu, 4 Dec 2025 17:05:23 +0000 Subject: [PATCH 1/2] fix: update nodejs to latest --- Dockerfile | 2 +- assets/js/app.js | 70 ++++++++++++++++++++++++--------------------- assets/package.json | 2 +- mix.exs | 2 +- 4 files changed, 40 insertions(+), 36 deletions(-) diff --git a/Dockerfile b/Dockerfile index 380072479..547fc5709 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,7 +19,7 @@ RUN set -uex; \ mkdir -p /etc/apt/keyrings; \ curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key \ | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg; \ - NODE_MAJOR=18; \ + NODE_MAJOR=24; \ echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" \ > /etc/apt/sources.list.d/nodesource.list; \ apt-get -qy update; \ diff --git a/assets/js/app.js b/assets/js/app.js index 9b19c27f5..858de8831 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -8,7 +8,7 @@ import { createClient } from "@supabase/supabase-js"; // LiveView is managing this page because we have Phoenix running // We're using LiveView to handle the Realtime client via LiveView Hooks -let Hooks = {}; +const Hooks = {}; Hooks.payload = { initRealtime( channelName, @@ -24,8 +24,6 @@ Hooks.payload = { private_channel ) { // Instantiate our client with the Realtime server and params to connect with - { - } const opts = { realtime: { params: { @@ -36,17 +34,20 @@ Hooks.payload = { this.realtimeSocket = createClient(host, token, opts); - if (bearer != "") { + if (bearer !== "") { this.realtimeSocket.realtime.setAuth(bearer); } - private_channel = private_channel == "true"; + private_channel = private_channel === "true"; // Join the Channel 'any' // Channels can be named anything // All clients on the same Channel will get messages sent to that Channel this.channel = this.realtimeSocket.channel(channelName, { - config: { broadcast: { self: true, private: private_channel } }, + config: { + broadcast: { self: true }, + private: private_channel, + }, }); // Hack to confirm Postgres is subscribed @@ -55,13 +56,13 @@ Hooks.payload = { if (payload.extension === "postgres_changes" && payload.status === "ok") { this.pushEventTo("#conn_info", "postgres_subscribed", {}); } - let ts = new Date(); - let line = ` + const ts = new Date(); + const line = ` SYSTEM ${ts.toISOString()} ${JSON.stringify(payload)} `; - let list = document.querySelector("#plist"); + const list = document.querySelector("#plist"); list.innerHTML = line + list.innerHTML; }); @@ -69,13 +70,13 @@ Hooks.payload = { // The event name can by anything // Match on specific event names to filter for only those types of events and do something with them this.channel.on("broadcast", { event: "*" }, (payload) => { - let ts = new Date(); - let line = ` + const ts = new Date(); + const line = ` BROADCAST ${ts.toISOString()} ${JSON.stringify(payload)} `; - let list = document.querySelector("#plist"); + const list = document.querySelector("#plist"); list.innerHTML = line + list.innerHTML; }); @@ -85,29 +86,33 @@ Hooks.payload = { this.channel.on("presence", { event: "*" }, (payload) => { this.pushEventTo("#conn_info", "presence_subscribed", {}); - let ts = new Date(); - let line = ` + const ts = new Date(); + const line = ` PRESENCE ${ts.toISOString()} ${JSON.stringify(payload)} `; - let list = document.querySelector("#plist"); + const list = document.querySelector("#plist"); list.innerHTML = line + list.innerHTML; }); } // Listen for all (`*`) `postgres_changes` events on tables in the `public` schema if (enable_db_changes === "true") { - let postgres_changes_opts = { event: "*", schema: schema, table: table }; + const postgres_changes_opts = { + event: "*", + schema: schema, + table: table, + }; if (filter !== "") { postgres_changes_opts.filter = filter; } this.channel.on("postgres_changes", postgres_changes_opts, (payload) => { - let ts = performance.now() + performance.timeOrigin; - let iso_ts = new Date(); - let payload_ts = Date.parse(payload.commit_timestamp); - let latency = ts - payload_ts; - let line = ` + const ts = performance.now() + performance.timeOrigin; + const iso_ts = new Date(); + const payload_ts = Date.parse(payload.commit_timestamp); + const latency = ts - payload_ts; + const line = ` POSTGRES ${iso_ts.toISOString()} @@ -117,7 +122,7 @@ Hooks.payload = { )} ms `; - let list = document.querySelector("#plist"); + const list = document.querySelector("#plist"); list.innerHTML = line + list.innerHTML; }); } @@ -178,10 +183,9 @@ Hooks.payload = { // } if (enable_presence === "true") { const name = "user_name_" + Math.floor(Math.random() * 100); - this.channel.send({ - type: "presence", - event: "TRACK", - payload: { name: name, t: performance.now() }, + await this.channel.track({ + name: name, + t: performance.now(), }); } } else { @@ -214,7 +218,7 @@ Hooks.payload = { }, mounted() { - let params = { + const params = { log_level: localStorage.getItem("log_level"), token: localStorage.getItem("token"), host: localStorage.getItem("host"), @@ -250,9 +254,9 @@ Hooks.payload = { this.sendRealtime(message.event, message.payload) ); - this.handleEvent("disconnect", ({}) => this.disconnectRealtime()); + this.handleEvent("disconnect", () => this.disconnectRealtime()); - this.handleEvent("clear_local_storage", ({}) => this.clearLocalStorage()); + this.handleEvent("clear_local_storage", () => this.clearLocalStorage()); }, }; @@ -266,18 +270,18 @@ Hooks.latency = { }, }; -let csrfToken = document +const csrfToken = document .querySelector("meta[name='csrf-token']") .getAttribute("content"); -let liveSocket = new LiveSocket("/live", Socket, { +const liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks, params: { _csrf_token: csrfToken }, }); topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }); -window.addEventListener("phx:page-loading-start", (info) => topbar.show()); -window.addEventListener("phx:page-loading-stop", (info) => topbar.hide()); +window.addEventListener("phx:page-loading-start", () => topbar.show()); +window.addEventListener("phx:page-loading-stop", () => topbar.hide()); liveSocket.connect(); diff --git a/assets/package.json b/assets/package.json index b718d4593..bf079a32c 100644 --- a/assets/package.json +++ b/assets/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "@supabase/supabase-js": "^2.50.0" + "@supabase/supabase-js": "^2.85.0" } } \ No newline at end of file diff --git a/mix.exs b/mix.exs index bd1294c58..5f628ab6a 100644 --- a/mix.exs +++ b/mix.exs @@ -4,7 +4,7 @@ defmodule Realtime.MixProject do def project do [ app: :realtime, - version: "2.67.2", + version: "2.67.3", elixir: "~> 1.18", elixirc_paths: elixirc_paths(Mix.env()), start_permanent: Mix.env() == :prod, From d951d17e78847c9349950523cf76d0494cc549f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filipe=20Caba=C3=A7o?= Date: Fri, 5 Dec 2025 17:54:26 +0000 Subject: [PATCH 2/2] set tool versions --- .tool-versions | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.tool-versions b/.tool-versions index 8184afb36..70a472465 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1,3 +1,3 @@ elixir 1.18.4-otp-27 -nodejs 18.13.0 +nodejs 24 erlang 27