realtime chat

routes/ui/chat/:id_$send-message_post.clj

@@ -8,18 +8,19 @@
              :author {:id (:id (auth/user-info)) :resourceType "User"}
              :message (:message (box/form-params))})
 
-[:<>
+(turbo/send
+
+ (format "Chat/%s" (:id (box/route-params)))
 
- [:turbo-stream {:action "append" :target "chat"}
+ [:turbo-stream {:action "prepend" :target "chat"}
   [:template
    [:div [:span {:style "font-weight: bold;"} (:id (auth/user-info)) ": "]
-    (:message (box/form-params))]]]
+    (:message (box/form-params))]]])
 
+[:<>
  [:turbo-stream {:action "replace" :target "chat-form"}
   [:template
    [:turbo-frame {:id "chat-form"}
-    [:form {:action "/ui/chat/$send-message" :method "post"}
+    [:form {:action (format "/ui/chat/%s/$send-message" (:id (box/route-params))) :method "post"}
      [:input {:name "message"}]
-     [:button "Send"]]]]]
-
- ]
+     [:button "Send"]]]]]]

routes/ui/chat/:id_$subscribe_get.clj

@@ -0,0 +1 @@
+(turbo/register-channel (str "Chat/" (:id (box/route-params))))

routes/ui/chat/:id_get.clj

@@ -9,7 +9,7 @@
    #_[:script {:src "https://cdn.tailwindcss.com"}]
 
    [:script {:type "module" :src "https://unpkg.com/@hotwired/[email protected]/dist/turbo.es2017-esm.js"}]
-   [:script {:src "/ui/$dev-mode"}]
+   #_[:script {:src "/ui/$dev-mode"}]
 
    [:div "User: " (:id (auth/user-info))
       [:form {:method "POST" :action "/ui/auth/logout"
@@ -22,18 +22,22 @@
 
    [:h1 "Chat"]
 
-   (let [messages (map :resource (box/sql ["select resource || jsonb_build_object('id', id) resource from chatmessage where resource#>>'{chat,id}' = ?" (:id (box/route-params))]))]
-     [:turbo-frame {:id "chat"}
-      (for [msg messages]
-        [:div [:span {:style "font-weight: bold;"} (:id (auth/user-info)) ": "]
-         (:message msg)])])
+   [:turbo-stream-source {:src (format "/ui/chat/%s/$subscribe" (:id (box/route-params)))}]
 
    [:turbo-frame {:id "chat-form"}
     [:form {:action (format "/ui/chat/%s/$send-message" (:id (box/route-params))) :method "post"}
      #_[:input {:name "chat-id" :type "hidden" :value (:id (box/route-params))}]
      [:input {:name "message"}]
      [:button "Send"]]]
 
+   (let [messages (map :resource (box/sql ["select resource || jsonb_build_object('id', id) resource from chatmessage where resource#>>'{chat,id}' = ?" (:id (box/route-params))]))]
+     [:turbo-frame {:id "chat"}
+      (for [msg (reverse messages)]
+        [:div [:span {:style "font-weight: bold;"} (get-in msg [:author :id]) ": "]
+         (:message msg)])])
+
+
+
    [:div
     [:hr]
     [:div {:style "font-family: monospace"} (format "Aidbox version %s" (box/version))]]