Move the chat box into the navbar.

Why? I dunno. I think it looks cool.

live-chat-routes.lisp

@@ -8,18 +8,18 @@
 (setf (ningle:route *app* "/" :method :GET)
       #'(lambda (params)
           (declare (ignore params))
-          (live-chat-ui:render-chat-ui)))
+          (live-chat-ui:render-chat-ui))
 
       ;; Route for chat messages
-(setf (ningle:route *app* "/chat-messages" :method :GET)
+      (ningle:route *app* "/chat-messages" :method :GET)
       #'(lambda (params) 
           (declare (ignore params))
-          (live-chat-ui:render-chat-messages)))
+          (live-chat-ui:render-chat-messages))
 
       ;; Route for posting messages
-(setf (ningle:route *app* "/post-message" :method :POST)
+      (ningle:route *app* "/post-message" :method :POST)
       #'(lambda (params)
           (let ((message (cdr (assoc "message" params :test 'equal))))
             (when (and message (not (string= message "")))
-              (handle-post-message message)))
+              (live-chat-ws:handle-post-message message)))
           (live-chat-ui:render-chat-messages)))

live-chat-ui.lisp

@@ -10,52 +10,67 @@
 (defun subpath-prefix (path)
   (format nil "~a~a" *default-prefix* path))
 
+(defun static-asset-string (path)
+  (uiop:read-file-string
+   (merge-pathnames
+    path
+    (asdf:system-relative-pathname
+     :live-chat #P"static/"))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Render chat messages
+(defun generate-html-message (content)
+  (cl-who:with-html-output-to-string (*standard-output*)
+    (:div :class "block"
+          :hx-swap-oob "afterbegin:#chat-messages"
+          (:div :class "box"
+                :style "overflow: auto; white-space: nowrap;"
+                (cl-who:str content)))))
+
 (defun render-chat-messages ()
   "Render the list of chat messages as HTML."
   (let ((messages (fetch-messages)))
-    (if messages
+    (cl-who:with-html-output-to-string (*standard-output* nil :indent nil)
-        (cl-who:with-html-output-to-string (*standard-output* nil :indent t)
       (loop for msg in messages
-                do (cl-who:htm
+            collect (cl-who:str (generate-html-message msg))))))
-                    (:div :class "box"
-                          :style "overflow: auto;"
-                          (cl-who:str msg)))))
-        "")))
 
 ;; Render chat UI
 (defun render-chat-ui ()
   "Render the main chat page with HTMX integration."
-  (cl-who:with-html-output-to-string (*standard-output* nil :prologue t :indent t)
+  (cl-who:with-html-output-to-string (*standard-output* nil :prologue t :indent nil)
     (:html :lang "en"
            :class "has-navbar-fixed-bottom"
            (:head
             (:meta :charset "utf-8")
             (:meta :name "viewport" :content "width=device-width, initial-scale=1")
+            ;; (:meta :http-equiv "Content-Security-Policy"
+            ;;        :content "default-src *; style-src self unsafe-inline; script-src self unsafe-inline unsafe-eval https://phntsm.ddns.net")
             (:title "Live Chat")
-            (:link :rel "stylesheet"
+            (:style
-                   :href "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css"
+             (cl-who:str (static-asset-string #P"bulma.min.css")))
-                   :integrity "sha512-RpeJZX3aH5oZN3U3JhE7Sd+HG8XQsqmP3clIbu4G28p668yNsRNj3zMASKe1ATjl/W80wuEtCx2dFA8xaebG5w=="
+            ;; (:link :rel "stylesheet"
-                   :crossorigin "anonymous"
+            ;;        :href "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css"
-                   :referrerpolicy "no-referrer")
+            ;;        :integrity "sha512-RpeJZX3aH5oZN3U3JhE7Sd+HG8XQsqmP3clIbu4G28p668yNsRNj3zMASKe1ATjl/W80wuEtCx2dFA8xaebG5w=="
-            (:script :src "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.3/htmx.min.js"
-                     :integrity "sha512-dQu3OKLMpRu85mW24LA1CUZG67BgLPR8Px3mcxmpdyijgl1UpCM1RtJoQP6h8UkufSnaHVRTUx98EQT9fcKohw=="
-                     :crossorigin "anonymous"
-                     :referrerpolicy "no-referrer")
-            ;; (:script :src "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.3/ext/ws.min.js"
-            ;;          :integrity "sha512-1OIiXEswZd/etj60BUwFmyoi0OhrWdoYlzayJpSBivoMV0pQPIQr+vtAn3W3htsbWtLRU8DrBl0epdK4DQbj/w=="
             ;;        :crossorigin "anonymous"
             ;;        :referrerpolicy "no-referrer")
-            )
+            (:script
+             (cl-who:str (static-asset-string #P"htmx.min.js")))
+             ;; :integrity "sha512-dQu3OKLMpRu85mW24LA1CUZG67BgLPR8Px3mcxmpdyijgl1UpCM1RtJoQP6h8UkufSnaHVRTUx98EQT9fcKohw"
+             ;; :src "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.3/htmx.min.js"
+             ;; :crossorigin "anonymous"
+             ;; :referrerpolicy "no-referrer")
+            (:script
+             (cl-who:str (static-asset-string #P"ws.min.js"))))
+             ;; :src "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.3/ext/ws.min.js"
+             ;; :integrity "sha512-1OIiXEswZd/etj60BUwFmyoi0OhrWdoYlzayJpSBivoMV0pQPIQr+vtAn3W3htsbWtLRU8DrBl0epdK4DQbj/w"
+             ;; :crossorigin "anonymous"
+             ;; :referrerpolicy "no-referrer"))
            (:body
             (:section :class "section"
                       (:div :class "container"
-                            ;; :hx-ext "ws"
-                            ;; :ws-connect (subpath-prefix "/ws-chat-messages")
                             (:div :class "container"
                                   :id "chat-messages"
-                                  ;; :hx-get "/chat-messages"
+                                  :hx-get "/chat-messages"
                                   (cl-who:str (render-chat-messages)))))
             (:nav :role "navigation"
                   :class "navbar is-fixed-bottom is-spaced has-shadow"
@@ -65,6 +80,20 @@
                             :href "https://phntsm.ddns.net/"
                             (:img :src "/favicon.png"
                                   :alt "icon"))
+                        (:div :class "navbar-item"
+                              (:div :class "columns is-mobile"
+                                    (:div :class "column"
+                                          (:button :class "button is-link"
+                                                   :onclick "moreInfo();"
+                                                   "More Info 1"))
+                                    (:div :class "column"
+                                          (:button :class "button is-link"
+                                                   :onclick "moreInfo();"
+                                                   "More Info 2"))
+                                    (:div :class "column"
+                                          (:button :class "button is-link"
+                                                   :onclick "moreInfo();"
+                                                   "More Info 3")))) 
                         (:a :role "button"
                             :class "navbar-burger"
                             :aria-label "menu"
@@ -78,45 +107,36 @@
                         :id "navbarBasicExample"
                         (:div :class "navbar-start"
                               :style "display: none;")
-                        (:div :class "navbar-middle container"
+                        (:div :class "container navbar-middle"
-                              (:div :class "field has-addons"
+                              (:div :class "navbar-item is-expanded"
+                                    :hx-ext "ws"
+                                    :ws-connect (subpath-prefix "/ws-chat-messages")
+                                    (:form :class "form is-expanded"
+                                           :style "width:100%;"
+                                           :id "chat-form"
+                                           :name "chat-form"
+                                           :ws-send ""
+                                           ;; :method :post
+                                           ;; :action (subpath-prefix "/post-message")
+                                           ;; :hx-post (subpath-prefix "/post-message")
+                                           ;; :hx-target "#chat-messages"
+                                           (:div :class "field has-addons is-expanded"
                                                  (:div :class "control is-expanded"
-                                          (:input :class "input"
+                                                       (:input :class "input is-expanded"
                                                                :id "chat-input"
+                                                               :form "chat-form"
                                                                :autocomplete "off"
                                                                :placeholder "Enter your message..."
                                                                :type "text" :name "message"))
                                                  (:div :class "control"
                                                        (:button :class "button is-link is-light"
-                                                   :type "submit" "Send"))))
+                                                                :id "submit-button"
+                                                                :form "chat-form"
+                                                                :type "submit" "Send"))))))
+                        
                         (:div :class "navbar-end"
                               :style "display: none;")))
             (:script (cl-who:str (js-snippet (subpath-prefix "/ws-chat-messages"))))))))
 
 (defun js-snippet (path)
-  (format nil
+  (format nil (static-asset-string #P"chat.js") path))
-          "function receivedMessage(msg) {
-    document.querySelector('#chat-messages').insertAdjacentHTML('afterbegin', msg.data);
-}
-const ws = new WebSocket('wss://' + window.location.host + '~a');
-ws.addEventListener('message', receivedMessage);
-const inputField = document.getElementById('chat-input');
-inputField.addEventListener('keyup', (evt) => {
-    if (evt.key === 'Enter') {
-        ws.send(evt.target.value);
-        evt.target.value = '';
-    }
-});
-// https://bulma.io/documentation/components/navbar/#navbar-menu
-document.addEventListener('DOMContentLoaded', () => {
-  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-  // Add a click event on each of them
-  $navbarBurgers.forEach( el => {
-    el.addEventListener('click', () => {
-      const target = el.dataset.target;
-      const $target = document.getElementById(target);
-      el.classList.toggle('is-active');
-      $target.classList.toggle('is-active');
-    });
-  });
-});" path))

live-chat-ws.lisp

@@ -4,34 +4,34 @@
 
 (defun handle-post-message (message)
   "Handle a new message being posted to the chat."
-  (let ((message (cl-who:escape-string message)))
+  (let* ((message (gethash "message" (com.inuoe.jzon:parse message)))
+         (message (string-trim '(#\Newline #\Return)
+                               (cl-who:escape-string message))))
+    (when (and message
+               (> (length message) 0)
+               (not (string= "" message)))
       (format *standard-output* "Message received: ~a~%" message)
-    (live-chat-db:insert-message message)))
+      (live-chat-db:insert-message message))))
 
 (defun handle-new-connection (con)
   (setf (gethash con *connections*)
         (princ-to-string (gensym "USER-"))))
 
-(defun generate-html-message (content)
-  (cl-who:with-html-output-to-string (*standard-output*)
-    (:div :class "box"
-          :style "overflow: auto; white-space: nowrap;"
-          (cl-who:str content))))
-
 (defun broadcast-to-room (connection message)
-  (handle-post-message message)
+  (let* ((message (handle-post-message message))
-  (let ((message
+         (message (live-chat-ui:generate-html-message
-          (generate-html-message
+                   (format nil "~a: ~a"
-           (format nil "~a: ~a" (gethash connection *connections*) message))))
+                           (gethash connection *connections*)
-    (loop :for con :being :the :hash-key :of *connections* :do
+                           message))))
+    (loop for con being the hash-key of *connections* do
       (send con message))))
 
 (defun handle-close-connection (connection)
   (let ((message 
-          (generate-html-message
+          (live-chat-ui:generate-html-message
            (format nil "... ~a disconnected."
                    (gethash connection *connections*)))))
-    (loop :for con :being :the :hash-key :of *connections* :do
+    (loop for con being the hash-key of *connections* do
       (send con message))))
 
 (defun make-websocket-server (env)

live-chat.asd

@@ -1,7 +1,7 @@
 ;;;; live-chat.asd
 
 (asdf:defsystem #:live-chat
-  :description "Twitch.TV-like live chat on the web. Uses HTMX to poll for messages."
+  :description "Twitch.TV-like live chat on the web. Uses HTMX and WebSockets to poll for messages."
   :author "Bubblegumdrop <staticsunn@gmail.com>"
   :license  "WTFPL 2+"
   :version "0.1.0"
@@ -13,6 +13,7 @@
                #:cl-dbi
                #:cl-who
                #:clack
+               #:com.inuoe.jzon
                #:lack
                #:ningle
                #:slynk
@@ -22,6 +23,6 @@
                (:file "live-chat-db")
                (:file "live-chat-ui")
                (:file "live-chat-routes")
-               (:file "live-chat-cgi")
+               ;; (:file "live-chat-cgi")
                (:file "live-chat-ws")
                (:file "live-chat-main")))

package.lisp

@@ -18,9 +18,9 @@
                 #:insert-message
                 #:fetch-messages)
   (:export #:set-subpath-prefix
+           #:generate-html-message
            #:render-chat-messages
            #:render-chat-ui
-           #:handle-post-message
            #:*messages*))
 
 (defpackage #:live-chat-cgi
@@ -28,20 +28,10 @@
   (:import-from #:live-chat-ui)
   (:export #:cgi-handler))
 
-(defpackage #:live-chat-routes
-  (:use #:cl)
-  (:import-from #:live-chat-db
-                #:insert-message)
-  (:import-from #:live-chat-ui
-                #:handle-post-message
-                #:render-chat-messages
-                #:render-chat-ui)
-  (:local-nicknames (#:cl-who #:cl-who)
-                    (#:myway #:myway))
-  (:export #:app))
-
 (defpackage #:live-chat-ws
   (:use #:cl)
+  (:import-from #:live-chat-ui
+                #:generate-html-message)
   (:import-from #:websocket-driver
                 #:make-client
                 #:make-server
@@ -51,10 +41,24 @@
                 #:close-connection)
   (:export #:make-websocket-server
            #:handle-close-connection
+           #:handle-post-message
            #:broadcast-to-room
            #:handle-new-connection
            #:*connections*))
 
+(defpackage #:live-chat-routes
+  (:use #:cl)
+  (:import-from #:live-chat-db
+                #:insert-message)
+  (:import-from #:live-chat-ws
+                #:handle-post-message)
+  (:import-from #:live-chat-ui
+                #:render-chat-messages
+                #:render-chat-ui)
+  (:local-nicknames (#:cl-who #:cl-who)
+                    (#:myway #:myway))
+  (:export #:app))
+
 (uiop:define-package #:live-chat
   (:use #:cl)
   (:import-from #:clack #:clackup)

static/chat.js

@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+// https://bulma.io/documentation/components/navbar/#navbar-menu
+function addBurgerMenu() {
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    // Add a click event on each of them
+    $navbarBurgers.forEach (el => {
+        el.addEventListener('click', () => {
+            const target = el.dataset.target;
+            const $target = document.getElementById(target);
+            el.classList.toggle('is-active');
+            $target.classList.toggle('is-active');
+        });
+    });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+function addWSSEventListener () {
+    const ws = new WebSocket('wss://' + window.location.host + '~a');
+
+    function receivedMessage(msg) {
+        document.getElementById('chat-messages')
+            .insertAdjacentHTML('afterbegin', msg.data);
+        // document.querySelector('#chat-messages').insertAdjacentHTML('afterbegin', msg.data);
+    }
+
+    ws.addEventListener ('message', receivedMessage);
+}
+
+function addInputFieldEventListener () {
+    const inputField = document.getElementById('chat-input');
+    inputField.addEventListener ('keyup', (evt) => {
+        if (evt.key === 'Enter') {
+            // clear the input on Enter
+            evt.target.value = '';
+        }
+    });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+function moreInfo() {
+    const chatForm = document.getElementById('chat-form');
+    const inputField = document.getElementById('chat-input');
+    const sendButton = document.getElementById('submit-button');
+    chatForm.reset ();
+    inputField.focus ();
+    document.execCommand('insertText', false, 'More Info!');
+    sendButton.click();
+}
+
+// Removing the form attribute "disables" the form allowing the
+// websocket chat to be used instead.
+function disableHTMLForm () {
+    const inputField = document.getElementById('chat-input');
+    const sendButton = document.getElementById('submit-button');
+    inputField.removeAttribute ('form');
+    sendButton.removeAttribute ('form');
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    addBurgerMenu();
+    if (WebSocket) {
+        // Use websockets
+        addInputFieldEventListener();
+        // disableHTMLForm();
+        // addWSSEventListener();
+    }
+    // Fallback will be used otherwise.
+});

static/ws.min.js

@@ -0,0 +1 @@
+!function(){var u;function s(e){return null!=u.getInternalData(e).webSocket}function h(e){return!u.bodyContains(e)&&(u.getInternalData(e).webSocket.close(),1)}function t(e){e=new WebSocket(e,[]);return e.binaryType=htmx.config.wsBinaryType,e}function o(e,t){var n=[];return(u.hasAttribute(e,t)||u.hasAttribute(e,"hx-ws"))&&n.push(e),e.querySelectorAll("["+t+"], [data-"+t+"], [data-hx-ws], [hx-ws]").forEach(function(e){n.push(e)}),n}function i(e,t){if(e)for(var n=0;n<e.length;n++)t(e[n])}htmx.version&&!htmx.version.startsWith("1.")&&console.warn("WARNING: You are using an htmx 1 extension with htmx "+htmx.version+".  It is recommended that you move to the version of this extension found on https://htmx.org/extensions"),htmx.defineExtension("ws",{init:function(e){u=e,htmx.createWebSocket||(htmx.createWebSocket=t),htmx.config.wsReconnectDelay||(htmx.config.wsReconnectDelay="full-jitter")},onEvent:function(e,t){var n=t.target||t.detail.elt;switch(e){case"htmx:beforeCleanupElement":var r=u.getInternalData(n);return void(r.webSocket&&r.webSocket.close());case"htmx:beforeProcessNode":i(o(n,"ws-connect"),function(e){var o=e;if(u.bodyContains(o)){var t=u.getAttributeValue(o,"ws-connect");if(null==t||""===t){var n=function(e){e=u.getAttributeValue(e,"hx-ws");if(e)for(var t=e.trim().split(/\s+/),n=0;n<t.length;n++){var r=t[n].split(/:(.+)/);if("connect"===r[0])return r[1]}}(o);if(null==n)return;t=n}0===t.indexOf("/")&&(n=location.hostname+(location.port?":"+location.port:""),"https:"===location.protocol?t="wss://"+n+t:"http:"===location.protocol&&(t="ws://"+n+t));var i=function(r,t){var s={socket:null,messageQueue:[],retryCount:0,events:{},addEventListener:function(e,t){this.socket&&this.socket.addEventListener(e,t),this.events[e]||(this.events[e]=[]),this.events[e].push(t)},sendImmediately:function(e,t){this.socket||u.triggerErrorEvent(),t&&!u.triggerEvent(t,"htmx:wsBeforeSend",{message:e,socketWrapper:this.publicInterface})||(this.socket.send(e),t&&u.triggerEvent(t,"htmx:wsAfterSend",{message:e,socketWrapper:this.publicInterface}))},send:function(e,t){this.socket.readyState!==this.socket.OPEN?this.messageQueue.push({message:e,sendElt:t}):this.sendImmediately(e,t)},handleQueuedMessages:function(){for(;0<this.messageQueue.length;){var e=this.messageQueue[0];if(this.socket.readyState!==this.socket.OPEN)break;this.sendImmediately(e.message,e.sendElt),this.messageQueue.shift()}},init:function(){this.socket&&this.socket.readyState===this.socket.OPEN&&this.socket.close();var n=t(),e=(u.triggerEvent(r,"htmx:wsConnecting",{event:{type:"connecting"}}),(this.socket=n).onopen=function(e){s.retryCount=0,u.triggerEvent(r,"htmx:wsOpen",{event:e,socketWrapper:s.publicInterface}),s.handleQueuedMessages()},n.onclose=function(e){var t;!h(r)&&0<=[1006,1012,1013].indexOf(e.code)&&(t=function(e){var t=htmx.config.wsReconnectDelay;if("function"==typeof t)return t(e);if("full-jitter"===t)return t=Math.min(e,6),1e3*Math.pow(2,t)*Math.random();logError('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"')}(s.retryCount),setTimeout(function(){s.retryCount+=1,s.init()},t)),u.triggerEvent(r,"htmx:wsClose",{event:e,socketWrapper:s.publicInterface})},n.onerror=function(e){u.triggerErrorEvent(r,"htmx:wsError",{error:e,socketWrapper:s}),h(r)},this.events);Object.keys(e).forEach(function(t){e[t].forEach(function(e){n.addEventListener(t,e)})})},close:function(){this.socket.close()}};return s.init(),s.publicInterface={send:s.send.bind(s),sendImmediately:s.sendImmediately.bind(s),queue:s.messageQueue},s}(o,function(){return htmx.createWebSocket(t)});i.addEventListener("message",function(e){if(!h(o)){var t=e.data;if(u.triggerEvent(o,"htmx:wsBeforeMessage",{message:t,socketWrapper:i.publicInterface})){u.withExtensions(o,function(e){t=e.transformResponse(t,null,o)});var n=u.makeSettleInfo(o),e=u.makeFragment(t);if(e.children.length)for(var r=Array.from(e.children),s=0;s<r.length;s++)u.oobSwap(u.getAttributeValue(r[s],"hx-swap-oob")||"true",r[s],n);u.settleImmediately(n.tasks),u.triggerEvent(o,"htmx:wsAfterMessage",{message:t,socketWrapper:i.publicInterface})}}}),u.getInternalData(o).webSocket=i}}),i(o(n,"ws-send"),function(e){var a,c,t,n;e=e,(n=u.getAttributeValue(e,"hx-ws"))&&"send"!==n||(a=u.getClosestMatch(e,s),c=e,t=u.getInternalData(c),u.getTriggerSpecs(c).forEach(function(e){u.addTriggerHandler(c,e,t,function(e,t){var n,r,s,o,i;h(a)||(n=u.getInternalData(a).webSocket,r=u.getHeaders(c,u.getTarget(c)),i=(o=u.getInputValues(c,"post")).errors,o=o.values,s=u.getExpressionVars(c),o=u.mergeObjects(o,s),s={parameters:u.filterValues(o,c),unfilteredParameters:o,headers:r,errors:i,triggeringEvent:t,messageBody:void 0,socketWrapper:n.publicInterface},u.triggerEvent(e,"htmx:wsConfigSend",s)&&(i&&0<i.length?u.triggerEvent(e,"htmx:validation:halted",i):(void 0===(o=s.messageBody)&&(i=Object.assign({},s.parameters),s.headers&&(i.HEADERS=r),o=JSON.stringify(i)),n.send(o,e),t&&u.shouldCancel(t,e)&&t.preventDefault())))})}))})}}})}();