add: connect to socket by community

direct messages/groups connect by channel id, everything else should connect by channel with the "is_channel" header set to true
This commit is contained in:
trisua 2025-04-29 16:53:34 -04:00
parent c1c8cdbfcd
commit 0304461389
20 changed files with 241 additions and 160 deletions

View file

@ -27,6 +27,7 @@
<a
href="/chats/0/0"
class="button quaternary channel_icon {% if selected_community == 0 %}selected{% endif %}"
data-turbo="false"
>
{{ icon "message-circle" }}
</a>
@ -35,6 +36,7 @@
<a
href="/chats/{{ community.id }}/0"
class="button quaternary channel_icon {% if selected_community == community.id %}selected{% endif %}"
data-turbo="false"
>
{{ components::community_avatar(id=community.id,
community=community, size="48px") }}
@ -440,64 +442,76 @@
};
</script>
{% if selected_channel %}
<script>
setTimeout(() => {
<script id="socket_init" data-turbo-permanent="true">
window.SUBSCRIBE_CHANNEL = "{{ selected_community }}" === "0";
globalThis.socket_init = () => {
if (window.socket) {
if (window.socket_id === "{{ selected_channel }}") {
console.log("cannot open; already in session");
return;
} else {
window.socket.close();
window.socket = undefined;
console.log("closed lingering");
}
window.socket.send("Close");
window.socket.close();
window.socket = undefined;
console.log("closed lingering");
}
for (const anchor of document.querySelectorAll("a")) {
if (anchor.href.includes("{{ selected_channel }}")) {
continue;
}
anchor.addEventListener("click", () => {
window.socket.close();
window.socket = undefined;
console.log("force abandon socket");
});
if ("{{ selected_community }}" !== "0") {
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_community }}`;
const socket = new WebSocket(endpoint);
window.socket = socket;
window.socket_id = "{{ selected_community }}";
} else {
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/_connect/{{ selected_channel }}`;
const socket = new WebSocket(endpoint);
window.socket = socket;
window.socket_id = "{{ selected_channel }}";
}
const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/channels/{{ selected_channel }}/ws`;
const socket = new WebSocket(endpoint);
window.socket = socket;
window.socket_id = "{{ selected_channel }}";
socket.addEventListener("close", () => {
return socket.send("Close");
});
socket.addEventListener("open", () => {
window.socket.addEventListener("open", () => {
// auth
socket.send(
window.socket.send(
JSON.stringify({
method: "Headers",
data: JSON.stringify({
// SocketHeaders
channel: "{{ selected_channel }}",
user: "{{ user.id }}",
is_channel: window.SUBSCRIBE_CHANNEL,
}),
}),
);
});
};
</script>
socket.addEventListener("message", async (event) => {
{% if selected_channel %}
<script>
setTimeout(() => {
if (!window.SUBSCRIBE_CHANNEL) {
// sub community
if (window.socket_id !== "{{ selected_community }}") {
socket_init();
}
} else {
// sub channel
if (window.socket_id !== "{{ selected_channel }}") {
socket_init();
}
}
}, 50);
setTimeout(() => {
window.socket.addEventListener("message", async (event) => {
if (event.data === "Ping") {
return socket.send("Pong");
}
const msg = JSON.parse(event.data);
const data = JSON.parse(msg.data);
const [channel_id, data] = JSON.parse(msg.data);
if (msg.method === "Message" && window.CURRENT_PAGE === 0) {
if (channel_id !== "{{ selected_channel }}") {
// message not for us... maybe send notification later
// something like /api/v1/messages/{id}/mark_unread
return;
}
if (document.getElementById("stream_body")) {
const element = document.createElement("div");
element.style.display = "contents";