1. ws/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("chat/",  include("chat.urls")),
    path("admin/", admin.site.urls),
]

 

2. chat/urls.py

from unicodedata import name
from django.urls import path
from chat.views import *

app_name = "chat"
urlpatterns = [
    path(""                 , ChatLobby.as_view()   , name="lobby"),
    path("<str:room_name>/" , ChatRoom.as_view()    , name="room")
]

 

3. chat/views.py

from typing import Any, Dict

from django.shortcuts import render
from django.views.generic.base import TemplateView


class ChatLobby(TemplateView):
    template_name = "chat/lobby.html"


class ChatRoom(TemplateView):
    template_name = "chat/room.html"
    
    def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
        _context = super().get_context_data(**kwargs)
        _context["room_name"] = self.kwargs.get("room_name")
        return _context

 

4. Create a new file 

chat/templates/chat/lobby.html

<!-- chat/templates/chat/lobby.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Lobby</title>
</head>
<body>
    What chat room would you like to enter?<br>
    <input id="room-name-input" type="text" size="50"><br>
    <input id="room-name-submit" type="button" value="Enter">

    <script>
        document.querySelector('#room-name-input').focus();
        document.querySelector('#room-name-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // enter, return
                document.querySelector('#room-name-submit').click();
            }
        };

        document.querySelector('#room-name-submit').onclick = function(e) {
            var roomName = document.querySelector('#room-name-input').value;
            window.location.pathname = '/chat/' + roomName + '/';
        };
    </script>
</body>
</html>

 

chat/templates/chat/room.html

<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <textarea id="chat-log" cols="50" rows="20"></textarea><br>
    <input id="chat-message-input" type="text" size="50"><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.keyCode === 13) {  // 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>

 

5. Go to http://127.0.0.1:8000/chat/ 

Type in “football” as the room name and press enter

 

You should be redirected to the room page at http://127.0.0.1:8000/chat/football/ which now displays an empty chat log.

 

if view source on page, you can see room name.