How to resolve “Error during WebSocket handshake: Unexpected response code: 503” error in a Django Channels Heroku app?

Question

The error in the console :

  app.e05f6d1a6569.js:105 WebSocket connection to 'wss://domecode.com/wss?session_key=${sessionKey}' failed: Error during WebSocket handshake: Unexpected response code: 503
    (anonymous) @ app.e05f6d1a6569.js:105
    mightThrow @ jquery.js:3762
    process @ jquery.js:3830

I'm running a Django Channels app ( Messaging app ) on Heroku using Daphne. All the files that correspond to this problem are included in this question.

routing.py - messaging app

from messaging import consumers
from django.urls import re_path

websocket_urlpatterns = [
    re_path(r'^ws$', consumers.ChatConsumer),
]

app.js - snipped of the websocket part of the app.js file

var ws_scheme = window.location.protocol == 'https:' ? 'wss' : 'ws';
var socket = new WebSocket(ws_scheme + '://' + window.location.host + '/' + ws_scheme + '?session_key=${sessionKey}');

asgi.py - project's asgi

import os
import django
# from django.core.asgi import get_asgi_application
from channels.routing import get_default_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'domecode.settings')
django.setup()  # to deploy with asgi when using channels
application = get_default_application() 

Procfile

release: python3 manage.py makemigrations && python3 manage.py migrate
web: daphne domecode.asgi:application --port $PORT --bind 0.0.0.0 -v2
worker: python3 manage.py runworker channel_layer -v2 

Django Settings snippet for CHANNEL_LAYERS - REDIS_URL is an env variable in Heroku.

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

Any information on what went wrong here?

Sidenote: It works perfectly fine in the development server however it gives the error mentioned at the top in the production server at https://domecode.com/chat/.

When I send a message on the production server, it gives an error in the console and I don't see my message that was sent unless I reload the page. I've tried looking for similar questions everywhere but none of them were answered in a way that would work for me.

Answer 1

Changes in the Procfile, routing.py of the messaging app and some minor changes such as activating worker dyno on Heroku worked for me.

Procfile should be changed to :

release: python3 manage.py makemigrations && python3 manage.py migrate
web: daphne domecode.asgi:application --port $PORT --bind 0.0.0.0 -v2
worker: python3 manage.py runworker channels --settings=domecode.settings -v2

and Routing.py to :

from messaging import consumers
from django.urls import re_path

websocket_urlpatterns = [
    re_path(r'^ws$', consumers.ChatConsumer),
]