Add usernames to messages; use proper <div> tags for messages

chat/consumers.py

@@ -2,6 +2,10 @@ import json
 from channels.generic.websocket import AsyncWebsocketConsumer
 
 class ChatConsumer(AsyncWebsocketConsumer):
+    async def send_sever_message(self, msg):
+        await self.send(json.dumps({
+            'message': 'SERVER: ' + msg 
+        }))
     async def connect(self):
         self.room_name = self.scope['url_route']['kwargs']['room_name']
         self.room_group_name = 'chat_%s' % self.room_name
@@ -13,6 +17,8 @@ class ChatConsumer(AsyncWebsocketConsumer):
         )
 
         await self.accept()
+        await self.send_sever_message("Welcome!")
+        await self.send_sever_message("Type /c to clear message!")
 
     async def disconnect(self, close_code):
         # Leave room group
@@ -31,7 +37,7 @@ class ChatConsumer(AsyncWebsocketConsumer):
             self.room_group_name,
             {
                 'type': 'chat_message',
-                'message': message
+                'message': self.scope['user'].username + ': ' + message
             }
         )
 

chat/templates/chat/chat.html

@@ -4,11 +4,13 @@ Chat
 {% endblock %}
 
 {% block body %}
-    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
-    <input id="chat-message-input" type="text" size="100"><br>
+    <div id="messages">
+    </div>
+    <input autofocus="true" id="chat-message-input" type="text" size="100"><br>
     <input id="chat-message-submit" type="button" value="Send">
     {{ room_name|json_script:"room-name" }}
     <script>
+        const MESSAGE_DIV = document.getElementById("messages");
         const roomName = JSON.parse(document.getElementById('room-name').textContent);
         const WSProtocol = window.location.protocol === "https:" ? "wss" : "ws";
 
@@ -23,7 +25,10 @@ Chat
 
         chatSocket.onmessage = function(e) {
             const data = JSON.parse(e.data);
-            document.querySelector('#chat-log').value += (data.message + '\n');
+            new_mes = document.createElement("div");
+            new_mes.innerText = data.message;
+            MESSAGE_DIV.appendChild(new_mes);
+            new_mes.focus();
         };
 
         chatSocket.onclose = function(e) {
@@ -40,9 +45,17 @@ Chat
         document.querySelector('#chat-message-submit').onclick = function(e) {
             const messageInputDom = document.querySelector('#chat-message-input');
             const message = messageInputDom.value;
-            chatSocket.send(JSON.stringify({
-                'message': message
-            }));
+            if (message[0] !== '/')
+            {
+                chatSocket.send(JSON.stringify({
+                    'message': message
+                }));
+            } else {
+                if (message[1] === 'c')
+                {
+                    MESSAGE_DIV.innerHTML = '';
+                }
+            }
             messageInputDom.value = '';
         };
     </script>