Невозможно установить соединение через веб-сокет в django

Я пытаюсь установить соединение через вебсокет. Я использую API каналов django. По какой-то причине квитирование не происходит. Может это как-то связано с url?

Это мой основной файл routing.py

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter,URLRouter
import chat.routing

application = ProtocolTypeRouter({
    'websocket':AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

Это мое приложение для чата routing.py

from django.urls import re_path,path
# from django.conf.urls import url
from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/room/(?P<room_name>\w+)/(?P<username>\w+)/$',consumers.ChatRoomConsumer.as_asgi()),
]

Это файл consumers.py моего приложения для чата

# import pytest
from accounts.models import Account
from .models import ChatRoom, Message
from channels.generic.websocket import AsyncWebsocketConsumer
import json
from channels.db import database_sync_to_async
import string
import random
# from asgiref.sync import sync_to_async

class ChatRoomConsumer(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,close_code):
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        username = text_data_json['username']
        room_name = text_data_json['room_name']
        # print("[RECIEVED] "+room_name)
        print("[receiving....]"+message)


        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type':'chatroom_message',
                'message':message,
                'username':username,
                'room_name':room_name,
            }
        )


    async def chatroom_message(self,event):
        message = event['message']
        username = event['username']
        room_name = event['room_name']
        print("[SENDING....]"+message)

        room_obj = ChatRoom.objects.get(room_name=room_name)
        sender = Account.objects.get(username=username)
        await self.save_message(message=message,sender=sender,room_name=room_obj)

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

    @database_sync_to_async
    def save_message(self,message,sender,room_name):
        chat_id = ''.join(random.choices(string.ascii_uppercase+string.digits,k=10))
        new_message = Message(message_id=chat_id,message=message,room_name=room_name,message_sender=sender)
        new_message.save()

Это мой JavaScript

{{room_name|json_script:"room-name"}}
{{username|json_script:"user_username"}}
{% if room_user_1_username %}
{{room_user_1_username|json_script:"room_user_1"}}
{% endif %}
{% if room_user_2_username %}
{{room_user_2_username|json_script:"room_user_2"}}
{% endif %}
<script>
    const roomName = JSON.parse(document.getElementById('room-name').textContent);
    const username = JSON.parse(document.getElementById('user_username').textContent);
    const room_user_1 = JSON.parse(document.getElementById('room_user_1').textContent);
    const room_user_2 = JSON.parse(document.getElementById('room_user_2').textContent);
    var input_box = document.getElementById("input");
    if(input_box.innerHTML==""){
        document.getElementById("submit").style.visibility=false;
    }
    else{
        document.getElementById("submit").style.visibility=true;
    }
    //for sending the message to websocket
    document.getElementById("submit").onclick=function(e){
        const messageInputDom = document.querySelector("#input");
        const message = messageInputDom.value;
        console.log("message: "+message);
        console.log("username:"+username);
        current_user = "{{request.user.username}}";
        console.log("current_user: "+current_user);
        if(username==room_user_1 || username==room_user_2){
            if(messageInputDom.value!=""){
                chatSocket.send(JSON.stringify({
                    'message':message,
                    'username':username,
                    'room_name':roomName,
                }));
            }
        messageInputDom.value = '';
    }
    else{alert("Unauthorised access to a chat room");console.log("Message could not be sent!");}
        messageInputDom.value='';
    }
    //setting up the websocket
    const chatSocket = new WebSocket(
        'ws://'+
        window.location.host+
        '/ws/chat/room/'+
        roomName+
        '/'+
        username+
        '/'
    );
    
    //getting messages from the websocket
    chatSocket.onmessage = function(e){
        const data = JSON.parse(e.data);
        location.reload();//ON GETTING NEW MESSAGES
        console.log("data: message->"+data.message+"\nusername->"+data.username);
        $("#text-msg").val('\n'+data.username+": "+data.message+' (just now)');
        alert(data.message);
    }
</script>

На cmd должно отображаться что-то вроде "CONNECT handshaking"

Вернуться на верх