update views, url, add room html, update readme

yennanliu · Jul 27, 2024 · 69f2f58 · 69f2f58
1 parent 1d04a7d
commit 69f2f58
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 2 deletions.
diff --git a/chat-room/README.md b/chat-room/README.md
@@ -1,14 +1,25 @@
 # Chat Room App
 
+## Run
+```bash
+cd chat-room/mysite/
+
+# (make sure at same level with manage.py)
+python3 manage.py runserver
+```
+
 ## Endpoints
+
 - http://127.0.0.1:8000/chat/
 - http://127.0.0.1:8000/admin/
 
 ## Ref
+
 - https://github.com/django/channels
 - https://channels.readthedocs.io/en/latest/
 
 - tutorial
   - https://channels.readthedocs.io/en/latest/tutorial/index.html
 - init setup
-  - https://channels.readthedocs.io/en/latest/tutorial/part_1.html
+  - https://channels.readthedocs.io/en/latest/tutorial/part_1.html
+  - https://channels.readthedocs.io/en/latest/tutorial/part_2.html
diff --git a/chat-room/mysite/chat/templates/chat/room.html b/chat-room/mysite/chat/templates/chat/room.html
@@ -0,0 +1,50 @@
+<!-- chat/templates/chat/room.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Chat Room</title>
+</head>
+<body>
+    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
+    <input 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 roomName = JSON.parse(document.getElementById('room-name').textContent);
+
+        const chatSocket = new WebSocket(
+            'ws://'
+            + window.location.host
+            + '/ws/chat/'
+            + roomName
+            + '/'
+        );
+
+        chatSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+            document.querySelector('#chat-log').value += (data.message + '\n');
+        };
+
+        chatSocket.onclose = function(e) {
+            console.error('Chat socket closed unexpectedly');
+        };
+
+        document.querySelector('#chat-message-input').focus();
+        document.querySelector('#chat-message-input').onkeyup = function(e) {
+            if (e.key === 'Enter') {  // enter, return
+                document.querySelector('#chat-message-submit').click();
+            }
+        };
+
+        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
+            }));
+            messageInputDom.value = '';
+        };
+    </script>
+</body>
+</html>
diff --git a/chat-room/mysite/chat/urls.py b/chat-room/mysite/chat/urls.py
@@ -6,4 +6,5 @@
 
 urlpatterns = [
     path("", views.index, name="index"),
+    path("<str:room_name>/", views.room, name="room"),
 ]
diff --git a/chat-room/mysite/chat/views.py b/chat-room/mysite/chat/views.py
@@ -1,8 +1,14 @@
 from django.shortcuts import render
 
+# https://channels.readthedocs.io/en/latest/tutorial/part_2.html
+
 # Create your views here.
 from django.shortcuts import render
 
 
 def index(request):
-    return render(request, "chat/index.html")
+    return render(request, "chat/index.html")
+
+
+def room(request, room_name):
+    return render(request, "chat/room.html", {"room_name": room_name})