Запрещено (403) Проверка CSRF не удалась. Запрос прерван - приложение для чата в реальном времени с Django Channels

{% extends 'core/base.html' %}
{% block title %}
{{room.name}}
{% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
    <h1 class="text-3xl lg:text-6xl text-white">{{room.name}}</h1>
</div>

<div class="lg:w-2/4 mx-4 lg:mx-auto p-4 bg-white rounded-xl">
    <div class="chat-messages space-y-3" id="chat-messages">
        <div class="p-4 bg-gray-200 rounded-xl">
            <p class="font-semibold">Username</p>
            <p>Message.</p>
        </div>
    </div>
</div>


<div class="lg:w-2/4 mx-4 lg:mx-auto p-4 bg-white rounded-xl">
<form method='POST' action='.' class='flex'>

    <input type="text" name="content" class="flex-1 mr-3" placeholder="Your message..." id="chat-message-input">
    <button class="px-5 py-3 rounded-xl text-white bg-teal-600 hover:bg-teal-700" id="chat-message-submit">
        send
    </button>
</form>
</div>
{% endblock  %}
{% block script %}
{{room.slug|json_script:"json-roomname"}}
{{request.user.username|json_script:"json-username"}}
<script>
    const roomName = JSON.parse(document.getElementById('json-roomname').textContent);
    const userName = JSON.parse(document.getElementById('json-username').textContent);

    const chatSocket = new WebSocket(
        'ws://'
        + window.location.host
        + '/ws/'
        + roomName
        + '/'
    );
    chatSocket.onmessage = function(e) {
        console.log('onmessage')
        const data =  JSON.parse(e.data);
        if (data.message){
            let html = '<div class="p-4 bg-gray-200 rounded-xl">';
                html += '<p class="font-semibold">'+ data.username +'</p>';
                html += '<p>'+ data.message +'</p></div>';
            document.querySelector('#chat-messages').innerHTML += html;

        }else {
            alert('Type something!')
        }
    }
    chatSocket.onclose = function(e) {
        console.log('onclose')
    }
    document.querySelector('#chat-message-submit').onclick = function(e){
        e.preventDefault();
        const messageInputDom = document.querySelector('#chat-message-input');
        const message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            'message': message,
            'username': userName,
            'room': roomName,
        }));
        messageInputDom.value = '';
        return false;
    }
</script>
{% endblock %}

import json
from channels.generic.websocket import AsyncWebsocketConsumer
from asgiref.sync import sync_to_async


class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name

        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )
        await self.accept()

    async def disconnect(self):
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name,
        )

    async def receive(self, text_data):
        data = json.loads(text_data)
        message = data['message']
        username = data['username']
        room = data['room']
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'username': username,
                'room': room,

            }
        )

    async def chat_message(self, event):
        message = event['message']
        username = event['username']
        room = event['room']

        await self.send(text_data=json.dumps({
            'message': message,
            'username': username,
            'room': room,

        }))

from django.urls import path
from . import consumers
websocket_urlpatterns = [
    path('ws/<str:room_name>/', consumers.ChatConsumer.as_asgi()),
]

<form>
   {% csrf_token %}  
</form>