Chat

15_chat/.Rprofile

@@ -0,0 +1 @@
+source("renv/activate.R")

15_chat/chat/__init__.R

@@ -0,0 +1,7 @@
+#' @export
+box::use(
+  ./chat[
+    chat_get,
+    chat_ws,
+  ],
+)

15_chat/chat/chat.R

@@ -0,0 +1,16 @@
+box::use(
+  .. / ui[page, ],
+)
+
+#' @export
+chat_get <- function(req, res) {
+  res$send(page())
+}
+
+#' @export
+chat_ws <- function(msg, ws) {
+  ambiorix::get_websocket_clients() |>
+    lapply(\(c) {
+      c$send("chat", msg)
+    })
+}

15_chat/index.R

@@ -0,0 +1,18 @@
+box::use(
+  ambiorix[Ambiorix],
+  . / chat[
+    chat_get,
+    chat_ws,
+  ],
+)
+
+PORT <- 3000
+
+app <- Ambiorix$new()
+
+app$static("public", "static")
+
+app$get("/", chat_get)
+app$receive("chat", chat_ws)
+
+app$start(port = PORT)

15_chat/public/ambiorix.js

@@ -0,0 +1,79 @@
+// default insecure
+let protocol = 'ws://';
+
+// upgrade if secure
+if (window.location.protocol == "https:")
+  protocol = 'wss://';
+
+// get websocket
+let ambiorixSocket = new WebSocket(protocol + window.location.host);
+
+// ambiorix Websocket
+class Ambiorix {
+  constructor() {
+    this.onOpen = () => { };
+    this.onClose = () => { };
+    this.onError = (error) => { console.error(error) };
+    this._handlers = new Map();
+  }
+  // send
+  static send(name, message) {
+
+    // build message
+    let msg = { name: name, message: message, isAmbiorix: true };
+
+    ambiorixSocket.send(JSON.stringify(msg));
+
+  }
+
+  onopen(fn) {
+    this.onOpen = fn;
+  }
+
+  onclose(fn) {
+    this.onClose = fn;
+  }
+
+  onerror(fn) {
+    this.onError = fn;
+  }
+
+  start() {
+    var that = this;
+    ambiorixSocket.onmessage = (msg) => {
+      let msgParsed = JSON.parse(msg.data);
+
+      if (!msgParsed.isAmbiorix)
+        return;
+
+      if (that._handlers.has(msgParsed.name)) {
+        that._handlers.get(msgParsed.name)(msgParsed.message);
+      }
+    }
+
+    ambiorixSocket.onopen = this.onOpen;
+    ambiorixSocket.onclose = this.onClose;
+    ambiorixSocket.onerror = this.onError;
+  }
+  // receiver
+  receive(name, fun) {
+    this._handlers.set(name, fun)
+  }
+}
+
+// helper function to parseCookies
+// parseCookie(document.cookie);
+const parseCookie = str => {
+  if (str == "")
+    return {};
+
+  return str
+    .split(';')
+    .map(v => v.split('='))
+    .reduce(
+      (acc, v) => {
+        acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
+        return acc;
+      },
+      {});
+}

15_chat/public/chat.js

@@ -0,0 +1,90 @@
+const icon = (() => {
+  const x = [
+    "ash",
+    "bcrikko",
+    "bulbasaur",
+    "charmander",
+    "kirby",
+    "mario",
+    "logo",
+    "octocat",
+    "pokeball",
+    "squirtle",
+  ];
+  return x[Math.floor(Math.random() * x.length)];
+})();
+
+document.addEventListener("DOMContentLoaded", function() {
+  const id = createId();
+
+  const wss = new Ambiorix();
+  wss.onopen(() => {
+    console.info("Connecting");
+  });
+
+  wss.receive("chat", (msg) => {
+    // it was sent by me
+    if (msg.id == id) return;
+    insertLeft(msg.text, msg.icon);
+  });
+
+  wss.onclose(() => {
+    console.error("Disconnected");
+  });
+
+  wss.start();
+
+  handleChat(id);
+});
+
+const createId = () => {
+  return Math.random().toString(16).slice(2);
+}
+
+const handleChat = (id) => {
+  const btn = document.querySelector("#send");
+  btn.addEventListener("click", (_event) => {
+    const tgt = document.querySelector("#message")
+    const text = tgt.value;
+    tgt.value = "";
+
+    if (!text || text == "") return;
+
+    insertRight(text);
+    Ambiorix.send("chat", { text: text, id: id, icon: icon });
+  });
+
+  const query = document.querySelector("#message");
+  query.addEventListener("keydown", (event) => {
+    if (event.key != "Enter") return;
+
+    const btn = document.querySelector("#send");
+    btn.click();
+  })
+}
+
+const insertLeft = (message, icon) => {
+  document.querySelector("#chat-list").insertAdjacentHTML("beforeend", chatLeft(message, icon))
+}
+
+const insertRight = (message) => {
+  document.querySelector("#chat-list").insertAdjacentHTML("beforeend", chatRight(message))
+}
+
+const chatLeft = (message, icon) => {
+  return `<section class="message -left">
+    <i class="nes-${icon}"></i>
+    <div class="nes-balloon from-left">
+      <p>${message}</p>
+    </div>
+  </section>`;
+}
+
+const chatRight = (message) => {
+  return `<section class="message -right">
+    <div class="nes-balloon from-right">
+      <p>${message}</p>
+    </div>
+    <i class="nes-${icon}"></i>
+  </section>`;
+}

15_chat/public/style.css

@@ -0,0 +1,28 @@
+body {
+  min-height: 100vh;
+  margin: 0 2rem;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-shrink {
+  flex-shrink: 1;
+}
+
+.d-grow {
+  flex-grow: 1;
+}
+
+.mb-1 {
+  margin-bottom: 0.5rem;
+}
+
+.mr-1 {
+  margin-right: 0.5rem;
+}
+
+.nes-balloon {
+  min-width: 80%;
+}