add: client streams api

fix: mobile chats ui

crates/app/src/public/js/atto.js

@@ -38,6 +38,7 @@ media_theme_pref();
 
     // init
     use("me", () => {});
+    use("streams", () => {});
 
     // env
     self.DEBOUNCE = [];

crates/app/src/public/js/streams.js

@@ -0,0 +1,85 @@
+(() => {
+    const self = reg_ns("streams");
+
+    self.STREAMS = {};
+    self.USER = null;
+
+    self.define("user", ({ $ }, user_id) => {
+        $.USER = user_id;
+    });
+
+    self.define("sock", ({ $ }, stream) => {
+        return $.STREAMS[stream];
+    });
+
+    self.define("subscribe", ({ $ }, stream) => {
+        if (!$.USER) {
+            console.warn("cannot subscribe without user id");
+            return;
+        }
+
+        if ($.STREAMS[stream]) {
+            console.warn("stream already exists");
+            return $.STREAMS[stream];
+        }
+
+        const endpoint = `${window.location.origin.replace("http", "ws")}/api/v1/auth/user/${$.USER}/_connect/${stream}`;
+        const socket = new WebSocket(endpoint);
+
+        $.STREAMS[stream] = {
+            socket,
+            events: {
+                message: () => {},
+            },
+        };
+
+        socket.addEventListener("message", (event) => {
+            if (event.data === "Ping") {
+                return socket.send("Pong");
+            }
+
+            return $.sock(stream).events.message(event.data);
+        });
+
+        return socket;
+    });
+
+    self.define("close", ({ $ }, stream) => {
+        const socket = $.sock(stream);
+
+        if (!socket) {
+            console.warn("no such stream to close");
+            return;
+        }
+
+        socket.socket.send("Close");
+        socket.socket.close();
+    });
+
+    self.define("event", ({ $ }, stream, event, handler) => {
+        const socket = $.sock(stream);
+
+        if (!socket) {
+            console.warn("no such stream to add event to");
+            return;
+        }
+
+        socket.events[event] = handler;
+        socket.socket.addEventListener(event, handler);
+    });
+
+    self.define("send_packet", async ({ $ }, stream, method, data) => {
+        await (
+            await fetch(`/api/v1/auth/user/${$.USER}/_connect/${stream}/send`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    method,
+                    data: JSON.stringify(data),
+                }),
+            })
+        ).json();
+    });
+})();