Skip to content

Commit

Permalink
feat: more Inspector opts (#644)
Browse files Browse the repository at this point in the history 
* feat: more inspector opts

* feat: version bump

* fix: connected

* fix: format
  • Loading branch information
@chasers
chasers authored Aug 22, 2023
1 parent d8e9bdd commit c0dde27
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 34 deletions.
94 changes: 63 additions & 31 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,18 @@ import { createClient } from "@supabase/supabase-js";

let Hooks = {};
Hooks.payload = {
initRealtime(channelName, host, log_level, token, schema, table, filter, bearer) {
initRealtime(
channelName,
host,
log_level,
token,
schema,
table,
filter,
bearer,
enable_presence,
enable_db_changes
) {
// Instantiate our client with the Realtime server and params to connect with
{
}
Expand Down Expand Up @@ -66,39 +77,47 @@ Hooks.payload = {
});

// Listen for all (`*`) `presence` events
this.channel.on("presence", { event: "*" }, (payload) => {
this.pushEventTo("#conn_info", "presence_subscribed", {});
let ts = new Date();
let line = `<tr class="bg-white border-b hover:bg-gray-50">
if (enable_presence === "true") {
console.log("enable_presence", enable_presence);

this.channel.on("presence", { event: "*" }, (payload) => {
this.pushEventTo("#conn_info", "presence_subscribed", {});
let ts = new Date();
let line = `<tr class="bg-white border-b hover:bg-gray-50">
<td class="py-4 px-6">PRESENCE</td>
<td class="py-4 px-6">${ts.toISOString()}</td>
<td class="py-4 px-6">${JSON.stringify(payload)}</td>
</tr>`;
let list = document.querySelector("#plist");
list.innerHTML = line + list.innerHTML;
});
let list = document.querySelector("#plist");
list.innerHTML = line + list.innerHTML;
});
}

// Listen for all (`*`) `postgres_changes` events on tables in the `public` schema
let 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 = `<tr class="bg-white border-b hover:bg-gray-50">
if (enable_db_changes === "true") {
let 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 = `<tr class="bg-white border-b hover:bg-gray-50">
<td class="py-4 px-6">POSTGRES</td>
<td class="py-4 px-6">${iso_ts.toISOString()}</td>
<td class="py-4 px-6">
<div class="pb-3">${JSON.stringify(payload)}</div>
<div class="pt-3 border-t hover:bg-gray-50">Latency: ${latency.toFixed(1)} ms</div>
<div class="pt-3 border-t hover:bg-gray-50">Latency: ${latency.toFixed(
1
)} ms</div>
</td>
</tr>`;
let list = document.querySelector("#plist");
list.innerHTML = line + list.innerHTML;
});
let list = document.querySelector("#plist");
list.innerHTML = line + list.innerHTML;
});
}

// Finally, subscribe to the Channel we just setup
this.channel.subscribe(async (status, error) => {
Expand All @@ -117,6 +136,8 @@ Hooks.payload = {
localStorage.setItem("table", table);
localStorage.setItem("filter", filter);
localStorage.setItem("bearer", bearer);
localStorage.setItem("enable_presence", enable_presence);
localStorage.setItem("enable_db_changes", enable_db_changes);

// Initiate Presence for a connected user
// Now when a new user connects and sends a `TRACK` message all clients will receive a message like:
Expand Down Expand Up @@ -151,12 +172,14 @@ Hooks.payload = {
// }
// ]
// }
const name = "user_name_" + Math.floor(Math.random() * 100);
this.channel.send({
type: "presence",
event: "TRACK",
payload: { name: name, t: performance.now() },
});
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() },
});
}
} else {
console.error(`Realtime Channel error status: ${status}`);
console.error(`Realtime Channel error: ${error}`);
Expand Down Expand Up @@ -196,6 +219,8 @@ Hooks.payload = {
table: localStorage.getItem("table"),
filter: localStorage.getItem("filter"),
bearer: localStorage.getItem("bearer"),
enable_presence: localStorage.getItem("enable_presence"),
enable_db_changes: localStorage.getItem("enable_db_changes"),
};

this.pushEventTo("#conn_form", "local_storage", params);
Expand All @@ -209,11 +234,15 @@ Hooks.payload = {
connection.schema,
connection.table,
connection.filter,
connection.bearer
connection.bearer,
connection.enable_presence,
connection.enable_db_changes
)
);

this.handleEvent("send_message", ({ message }) => this.sendRealtime(message.event, message.payload));
this.handleEvent("send_message", ({ message }) =>
this.sendRealtime(message.event, message.payload)
);

this.handleEvent("disconnect", ({}) => this.disconnectRealtime());

Expand All @@ -231,7 +260,10 @@ Hooks.latency = {
},
};

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");

let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks,
params: { _csrf_token: csrfToken },
Expand Down
12 changes: 10 additions & 2 deletions lib/realtime_web/live/inspector_live/conn_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ defmodule RealtimeWeb.InspectorLive.ConnComponent do
field(:table, :string, default: "*")
field(:filter, :string)
field(:bearer, :string)
field(:enable_broadcast, :boolean, default: true)
field(:enable_presence, :boolean, default: false)
field(:enable_db_changes, :boolean, default: false)
end

def changeset(form, params \\ %{}) do
Expand All @@ -28,7 +31,10 @@ defmodule RealtimeWeb.InspectorLive.ConnComponent do
:schema,
:table,
:filter,
:bearer
:bearer,
:enable_broadcast,
:enable_presence,
:enable_db_changes
])
|> validate_required([:channel])
end
Expand Down Expand Up @@ -159,7 +165,9 @@ defmodule RealtimeWeb.InspectorLive.ConnComponent do
"table" => nil,
"token" => nil,
"filter" => nil,
"bearer" => nil
"bearer" => nil,
"enable_presence" => nil,
"enable_db_changes" => nil
},
socket
) do
Expand Down
42 changes: 42 additions & 0 deletions lib/realtime_web/live/inspector_live/conn_component.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,48 @@
phx-target={@myself}
>
<div class="my-4">
<%= label(f, :enable_broadcast, class: "block text-gray-700 text-sm font-bold mb-2") %>
<%= checkbox(f, :enable_broadcast, disabled: true, class: "
disabled:opacity-50
my-1
block
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
") %>
<%= error_tag(f, :enable_broadcast) %>
<p class="text-gray-600 text-xs italic">
Broadcast is always enabled when successfully connected to a Channel
</p>
</div>
<div class="mb-4">
<%= label(f, :enable_presence, class: "block text-gray-700 text-sm font-bold mb-2") %>
<%= checkbox(f, :enable_presence, class: "
my-1
block
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
") %>
<%= error_tag(f, :enable_presence) %>
<p class="text-gray-600 text-xs italic">Enable Presence on this Channel</p>
</div>
<div class="mb-4">
<%= label(f, :enable_db_changes, class: "block text-gray-700 text-sm font-bold mb-2") %>
<%= checkbox(f, :enable_db_changes, class: "
my-1
block
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
") %>
<%= error_tag(f, :enable_db_changes) %>
<p class="text-gray-600 text-xs italic">Enable Database Changes on this Channel</p>
</div>
<div class="mb-4">
<%= label(f, :project, class: "block text-gray-700 text-sm font-bold mb-2") %>
<%= text_input(f, :project, placeholder: "project_ref", class: "
my-1
Expand Down
2 changes: 1 addition & 1 deletion mix.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ defmodule Realtime.MixProject do
def project do
[
app: :realtime,
version: "2.21.1",
version: "2.22.0",
elixir: "~> 1.14.0",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
Expand Down

0 comments on commit c0dde27

Please sign in to comment.