title: Websockets with Django Channels on Heroku
body: <p>I am trying to deploy my app to heroku.
  The app has a simple chatting system that uses Websockets and django channels.</p>
  <p>When I test my app using python manage.py runserver the app behaves just as intended.</p>
  <p>I tried deploying the app and all features work except for the chatting system.</p>
  <p>Here is the error message I am getting in the Chrome Console:</p>
  <pre><code>layout.js:108 Mixed Content: The page at 'https://desolate-lowlands-74512.herokuapp.com/index' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://desolate-lowlands-74512.herokuapp.com/ws/chat/19/'. This request has been blocked; this endpoint must be available over WSS.
  </code></pre>
  <p>This is what I tried to fix it: I went from ws to wss
  I changed this:</p>
  <pre><code> const chatSocket = new WebSocket(
          'ws://'
          + window.location.host
          + '/ws/chat/'
          + friendship_id
          + '/'
        );
        console.log(chatSocket)
  </code></pre>
  <p>to this:</p>
  <pre><code> const chatSocket = new WebSocket(
          'wss://'
          + window.location.host
          + '/ws/chat/'
          + friendship_id
          + '/'
        );
        console.log(chatSocket)
  </code></pre>
  <p>with this change the websocket loads but the chatting system still doesn't work.
  The messages still don't get sent or received</p>
  <p>This is the error message I get when opening the Chatbox:</p>
  <pre><code>layout.js:108 WebSocket connection to 'wss://desolate-lowlands-74512.herokuapp.com/ws/chat/19/' failed: Error during WebSocket handshake: Unexpected response code: 404
  </code></pre>
  <p>and this is the error message I get when I try to send the message:</p>
  <pre><code>WebSocket is already in CLOSING or CLOSED state.
  </code></pre>
  <p>Here is the code:
  This is my asgi.py file:</p>
  <pre><code>&quot;&quot;&quot;
  ASGI config for DBSF project.
  
  It exposes the ASGI callable as a module-level variable named ``application``.
  
  For more information on this file, see
  https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
  &quot;&quot;&quot;
  
  import os
  
  from django.core.asgi import get_asgi_application
  from channels.routing import ProtocolTypeRouter, URLRouter
  from channels.auth import AuthMiddlewareStack
  import social.routing
  
  os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DBSF.settings')
  
  application = ProtocolTypeRouter({
      &quot;http&quot;: get_asgi_application(),
      &quot;websocket&quot;: AuthMiddlewareStack(
          URLRouter(
              social.routing.websocket_urlpatterns
          )
      ),
  })
  </code></pre>
  <p>here is routing.py</p>
  <pre><code>from django.urls import re_path
  from . import consumers
  
  websocket_urlpatterns = [
      re_path(r'ws/chat/(?P&lt;friendship_id&gt;\w+)/$', consumers.ChatConsumer.as_asgi()),
  ]
  </code></pre>
  <p>Here's consumers.py</p>
  <pre><code>import json
  from asgiref.sync import async_to_sync
  from channels.generic.websocket import WebsocketConsumer
  from .models import Message, Friendship, User
  import datetime
  
  class ChatConsumer(WebsocketConsumer):
     
      def connect(self):
          self.room_name = self.scope['url_route']['kwargs']['friendship_id']
          self.room_group_name = 'chat_%s' % self.room_name
          # 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']
          sender = text_data_json['sender']
          receiver = text_data_json['receiver']
          friendship_id = self.scope['url_route']['kwargs']['friendship_id']
          message_to_save = Message(conversation=Friendship.objects.get(id=friendship_id), sender=User.objects.get(username=sender), receiver=User.objects.get(username=receiver), text=message, date_sent=datetime.datetime.now())
          message_to_save.save()
  
          # Send message to room group
          async_to_sync(self.channel_layer.group_send)(
              self.room_group_name,
              {
                  'type': 'chat_message',
                  'message': message,
                  'sender': sender,
                  'receiver': receiver,
                  'id': message_to_save.id
              }
          )
  
      # Receive message from room group
      def chat_message(self, event):
          message = event['message']
          sender = event['sender']
          receiver = event['receiver']
          id = event['id']
  
          # Send message to WebSocket
          self.send(text_data=json.dumps({
              'message': message,
              'sender': sender,
              'receiver': receiver,
              'id': id,
          }))
  </code></pre>
  <p>Here is settings.py</p>
  <pre><code>&quot;&quot;&quot;
  Django settings for DBSF project.
  
  Generated by 'django-admin startproject' using Django 3.1.2.
  
  For more information on this file, see
  https://docs.djangoproject.com/en/3.1/topics/settings/
  
  For the full list of settings and their values, see
  https://docs.djangoproject.com/en/3.1/ref/settings/
  &quot;&quot;&quot;
  
  from pathlib import Path
  import django_heroku
  import os
  from dotenv import load_dotenv
  load_dotenv()
  # Build paths inside the project like this: BASE_DIR / 'subdir'.
  BASE_DIR = Path(__file__).resolve().parent.parent
  
  # Quick-start development settings - unsuitable for production
  # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
  
  # SECURITY WARNING: keep the secret key used in production secret!
  SECRET_KEY = os.environ['SECRET_KEY']
  AUTH_USER_MODEL = 'social.User'
  # SECURITY WARNING: don't run with debug turned on in production!
  DEBUG = True
  ALLOWED_HOSTS = ['desolate-lowlands-74512.herokuapp.com', 'localhost', '127.0.0.1']
  
  # Application definition
  
  INSTALLED_APPS = [
      'channels',
      'social',
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
  ]
  
  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'whitenoise.middleware.WhiteNoiseMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',
      'django.middleware.clickjacking.XFrameOptionsMiddleware',
  ]
  
  ROOT_URLCONF = 'DBSF.urls'
  
  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [],
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]
  
  REST_FRAMEWORK = {
      # Use Django's standard `django.contrib.auth` permissions,
      # or allow read-only access for unauthenticated users.
      'DEFAULT_PERMISSION_CLASSES': [
          'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
      ]
  }
  
  WSGI_APPLICATION = 'DBSF.wsgi.application'
  ASGI_APPLICATION = 'DBSF.asgi.application'
  CHANNEL_LAYERS = {
      'default': {
          'BACKEND': 'channels_redis.core.RedisChannelLayer',
          'CONFIG': {
              &quot;hosts&quot;: [('127.0.0.1', 6379)],
          },
      },
  }
  
  # Database
  # https://docs.djangoproject.com/en/3.1/ref/settings/#databases
  
  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': BASE_DIR / 'db.sqlite3',
      }
  }
  
  
  # Password validation
  # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
  
  AUTH_PASSWORD_VALIDATORS = [
      {
          'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
      },
      {
          'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
      },
  ]
  
  
  # Internationalization
  # https://docs.djangoproject.com/en/3.1/topics/i18n/
  
  LANGUAGE_CODE = 'en-us'
  
  TIME_ZONE = 'EST'
  
  USE_I18N = True
  
  USE_L10N = True
  
  USE_TZ = True
  
  
  # Static files (CSS, JavaScript, Images)
  # https://docs.djangoproject.com/en/3.1/howto/static-files/
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  STATIC_URL = '/static/'
  MEDIA_ROOT= os.path.join(BASE_DIR, 'media/')
  MEDIA_URL= &quot;/media/&quot;
  </code></pre>
  <p>here's wsgi.py</p>
  <pre><code>&quot;&quot;&quot;
  WSGI config for DBSF project.
  
  It exposes the WSGI callable as a module-level variable named ``application``.
  
  For more information on this file, see
  https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
  &quot;&quot;&quot;
  
  import os
  
  from django.core.wsgi import get_wsgi_application
  
  os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DBSF.settings')
  
  application = get_wsgi_application()
  </code></pre>
  <p>I assume the once I change from ws to wss the consumer can't connect. I think this will be an easy fix but I can't figure out what code i need to change. I suspect that it is something in asgy.py or routing.py</p>
  <p>Please let me know if it is unclear what I am asking or if I need to show any other files</p>