django-channels: No route found for path

Question

I have a Django + Vue.js chat application that I'm trying to connect to django-channels.

To access any chat room, you simply go to:

http://localhost:8080/rooms/"id"/

My javascript connection looks like this:

connectToWebSocket () {
  const chatSocket = new WebSocket(
    `ws://localhost:8000/ws/rooms/${this.$route.params.id}/`
  )

  chatSocket.onopen = this.onOpen
  chatSocket.onclose = this.onClose
  chatSocket.onmessage = this.onMessage
  chatSocket.onerror = this.onError
},

My consumers.py:

class ChatConsumer(WebsocketConsumer):
def connect(self):
    self.room_uri = self.scope['url_route']['kwargs']['uri']
    self.room_group_name = 'chat_%s' % self.room_uri

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

    self.accept()

def disconnect(self, close_code):
    # Leave room group
    async_to_sync(self.channel_layer.group_discard)(
        self.room_group_name,
        self.channel_name
    )

# Receive message from WebSocket
def receive(self, text_data):
    text_data_json = json.loads(text_data)
    message = text_data_json['message']
    user = text_data_json['user.username']

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

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

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

and my routing.py:

from django.conf.urls import url

from core import consumers


websocket_urlpatterns = [
    url(r'^ws/rooms/<uri>/', consumers.ChatConsumer),
]

my project routing.py:

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

import core.routing


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

The problem is, I can't connect to the websocket, my django server says:

[Failure instance: Traceback: : No route found for path 'ws/rooms/759b9a8262ea4b7/'.

What's wrong in my code that I can't connect to a specific room through the websocket?

Full stack trace:

[Failure instance: Traceback: : No route found for path 'ws/rooms/759b9a8262ea4b7/'. /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/autobahn/websocket/protocol.py:2801:processHandshake /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/txaio/tx.py:429:as_future /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/twisted/internet/defer.py:151:maybeDeferred /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/daphne/ws_protocol.py:82:onConnect --- --- /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/twisted/internet/defer.py:151:maybeDeferred /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/daphne/server.py:198:create_application /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/staticfiles.py:41:call /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/routing.py:58:call /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/sessions.py:43:call /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/sessions.py:141:call /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/sessions.py:165:init /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/middleware.py:31:call /home/dave/PycharmProjects/chatapp2/back/venv/lib/python3.6/site-packages/channels/routing.py:154:call

Answer 1

Try something like this:

routing.py(inside your django app)

from django.urls import path
from core import consumers

websocket_urlpatterns = [
    path('ws/rooms/<uri>/', consumers.ChatConsumer),
]

routing.py(same level as your settings.py)

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

application = ProtocolTypeRouter({
    # (http->django views is added by default)
    'websocket': AuthMiddlewareStack(
        URLRouter(
            myapp.routing.websocket_urlpatterns
        )
    ),
})

And lastly in your settings.py

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [REDIS_URL],
        },
    },
}

INSTALLED_APPS.append('channels')
ASGI_APPLICATION = 'myapp.routing.application'