feat(artusx-websocket): update client ui

artusjs · Jun 21, 2024 · 86af21b · 86af21b
1 parent ab90825
commit 86af21b
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/packages/apps/artusx-websocket/src/view/index.html b/packages/apps/artusx-websocket/src/view/index.html
@@ -72,20 +72,25 @@
       const input = document.getElementById('input');
       const messages = document.getElementById('messages');
 
+      const appendMsg = (msg, from = 'default') => {
+        const item = document.createElement('li');
+        item.textContent = `${from}: ${msg}`;
+        messages.appendChild(item);
+        window.scrollTo(0, document.body.scrollHeight);
+      };
+
       form.addEventListener('submit', (e) => {
         e.preventDefault();
         if (input.value) {
           socket.emit('chat_message', input.value);
+          appendMsg(input.value, 'client');
           input.value = '';
         }
       });
 
       socket.on('chat_message', (msg) => {
         console.log('chat_message', msg);
-        const item = document.createElement('li');
-        item.textContent = msg;
-        messages.appendChild(item);
-        window.scrollTo(0, document.body.scrollHeight);
+        appendMsg(msg, 'server');
       });
     </script>
   </body>