Home > database >  Django: Error during WebSocket handshake: Unexpected response code: 500
Django: Error during WebSocket handshake: Unexpected response code: 500

Time:12-04

I have been following this tutorial to build a chat application.

I have been facing WebSocket connection to 'ws://127.0.0.1:8000/ws/lobby/' failed: Error during WebSocket handshake: Unexpected response code: 500 error. I checked other solutions too but they don't seem to work.

The console displays the error at (room.html)

            'ws://'
              window.location.host
              '/ws/'
              roomName
              '/'
            );

in the console.

The following is displayed in the terminal:

HTTP GET /favicon.ico/ 200 [0.01, 127.0.0.1:53842]
HTTP GET /lobby/?username=darsh 200 [0.01, 127.0.0.1:53842]
WebSocket HANDSHAKING /ws/lobby/ [127.0.0.1:53844]
HTTP GET /favicon.ico/ 200 [0.01, 127.0.0.1:53842]
Exception inside application: No route found for path 'ws/lobby/'.
Traceback (most recent call last):
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/staticfiles.py", line 44, in __call__
    return await self.application(scope, receive, send)
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/routing.py", line 71, in __call__
    return await application(scope, receive, send)
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/sessions.py", line 47, in __call__
    return await self.inner(dict(scope, cookies=cookies), receive, send)
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/sessions.py", line 263, in __call__
    return await self.inner(wrapper.scope, receive, wrapper.send)
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/auth.py", line 185, in __call__
    return await super().__call__(scope, receive, send)
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/middleware.py", line 26, in __call__
    return await self.inner(scope, receive, send)
  File "/home/darsh/.local/lib/python3.8/site-packages/channels/routing.py", line 168, in __call__
    raise ValueError("No route found for path %r." % path)
ValueError: No route found for path 'ws/lobby/'.
WebSocket DISCONNECT /ws/lobby/ [127.0.0.1:53844]

I am attaching the codes that I used:

chat/room.html


<html>
  <head>
    <meta charset="utf-8"/>
    <title>Chatty</title>
    <!-- Include Bulma CSS framework -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </head>

  <body>
    <section class="section">
        <div class="container">
          <div class="columns is-multiline">
            <div class="column is-6 is-offset-3 mb-6">
              <section class="hero is-primary">
                <div class="hero-body">
                  <p class="title">Chatty</p>
                  <p class="subtitle">A simple chat built with Django, Channels and Redis</p>
                </div>
              </section>
            </div>
  
            <div class="column is-6 is-offset-3">
                <div class="box">     
                  <div id="chat-messages">
                  </div>
                </div>
  
                <div class="field">
                  <div class="control">
                    <input class="input" type="text" placeholder="Message" id="chat-message-input">
                  </div>
                </div>
  
                <div class="field">
                  <div class="control">
                    <a class="button is-info" id="chat-message-submit">Submit</a>
                  </div>
                </div>
  
                <small class="has-text-grey-light">Your username: {{ username }}</small>
              </div>
            </div>
         </div>
      </section>
      
      {{ room_name|json_script:"json-roomname" }}
      {{ 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) {
                const data = JSON.parse(e.data);
              
                if (data.message) {
                  document.querySelector('#chat-messages').innerHTML  = (''   data.username   ': '   data.message   '');
                } else {
                  alert('The message was empty!')
                }
            };
              
            document.querySelector('#chat-message-input').focus();
            document.querySelector('#chat-message-input').onkeyup = function(e) {
            if (e.keyCode === 13) {
                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,
                'username': userName,
                'room': roomName
            }));
            
            messageInputDom.value = '';
            };

        chatSocket.onclose = function(e) {
        console.error('The socket closed unexpectedly');
        };

      </script>

  </body>
</html>

routing.py

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
  path('ws/', consumers.ChatConsumer.as_asgi()), # Using asgi
]

consumers.py

from channels.generic.websocket import AsyncWebsocketConsumer # The class we're using
from asgiref.sync import sync_to_async # Implement later

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

        #Join room
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        #Leave group
        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']

         # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
            'type': 'chat_message',
            'message': message,
            'username': username
            }
        )

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

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

CodePudding user response:

You need your room_name in your routing:

Use re_path

from django.urls import re_path 

websocket_urlpatterns = [
  re_path('ws/(?P<room_name>\w )/', consumers.ChatConsumer.as_asgi()), # Using asgi
]

In your case this was lobby, hence the error.

  • Related