support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 3 months ago by PlanetarySeeker763

From Django Community

Why does my Django Channels WebSocket connection fail on Heroku production?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

Hello!

I’m developing a one-to-one chat application using Django Channels. Everything works on my local server, but in production on Heroku, I’m encountering a WebSocket error when I click on a room:

WebSocket connection to 'wss://www.mydomain.com/meddelanden/18c74633-788f-467f-8134-7a14b1741575/' failed:

Here’s how the messaging flow works:

In a template, room messages are rendered from a Room model instance, where each room’s messages (via a foreign key) use a UUID as a unique identifier.
Clicking a room triggers an AJAX request to dynamically load its messages.
A WebSocket connection is established so that both users can communicate in real time.

I’ve configured Daphne at the top of my INSTALLED_APPS, and here are my relevant settings:

PYTHON
INSTALLED_APPS = [
    "daphne",
    "whitenoise.runserver_nostatic",
    "storages",
    "anymail",
    "channels",
    ...
]

PYTHON
{
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            routing.websocket_urlpatterns
        )
    )
}

PYTHON
websocket_urlpatterns = [
    re_path(r'^meddelanden/(?P<chat_room_uuid>[0-9a-f-]+)/$', OneToOneChatConsumer.as_asgi(), name="onetoonechat"),
]

PYTHON
class OneToOneChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.chat_room_uuid = self.scope['url_route']['kwargs']['chat_room_uuid']  # Find the room id from the connection scope
        await self.channel_layer.group_add(
            self.chat_room_uuid,
            self.channel_name,
        )
        await self.accept()

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json["message"].strip()
        url_UUID = text_data_json["url_UUID"]
        sender_pk = text_data_json["sender_pk"]

        sender = await self.sender(sender_pk)
        chat_data = await self.chatRoomData()
        chat_room_sender = chat_data["sender"]
        chat_room_receiver = chat_data["receiver"]

        if sender == chat_room_sender:
            await self.register_message(message, url_UUID, sender=chat_room_sender, receiver=chat_room_receiver)
        else:
            await self.register_message(message, url_UUID, sender=chat_room_receiver, receiver=chat_room_sender)

        await self.channel_layer.group_send(
            self.chat_room_uuid,
            {
                'type': 'send_message',
                'message': message,
            }
        )
    async def disconnect(self, close_code):
        await self.channel_layer.group_discard(self.chat_room_uuid, self.channel_name)
    async def send_message(self, event):
        message = event['message']
        await self.send(text_data=json.dumps({
            'message': message,
            "room_data": await self.chatroom_meta_data(self.chat_room_uuid)
        }))
    @database_sync_to_async
    def sender(self, sender):
        return Member.objects.get(pk=sender)
    @database_sync_to_async
    def chatRoomData(self):
        room = get_object_or_404(Chatroom, uuid_field=self.chat_room_uuid)
        chat_room_data = {"sender": room.sender, "receiver": room.receiver}
        return chat_room_data
    @database_sync_to_async
    def register_message(self, message, url_UUID, sender, receiver):
        chat_room = Chatroom.objects.get(uuid_field=url_UUID)
        ChatMessage.objects.create(room=chat_room, message=message, sender=sender, receiver=receiver)
    @database_sync_to_async
    def chatroom_meta_data(self, room_uuid):
        room = get_object_or_404(Chatroom, uuid_field=room_uuid)
        chat_message = ChatMessage.objects.filter(room=room).latest("timestamp")
        room_data = {"main_user_sender": chat_message.sender.pk,
                    "secondary_user_receiver": chat_message.receiver.pk,
                    "message_sender_username": chat_message.sender.username,
                    "auth_user_id": self.scope["user"].pk,
                    "message_timestamp": chat_message.timestamp.isoformat()}
        return room_data

JAVASCRIPT
class DjangoChatRoomChannels {
    constructor(chatInputSelector, chatMessageSubmitSelector, messagePreviewSelector, csrftoken) {
        this.chatInput = document.getElementById(chatInputSelector);
        this.chatMessageSubmit = document.querySelector(chatMessageSubmitSelector);
        this.messagePreview = document.querySelectorAll(messagePreviewSelector);
        this.csrftoken = csrftoken;
        this.setupEventListeners();
    }
    setupEventListeners() {
        if (this.messagePreview) {
            this.messagePreview.forEach((btn) => {
                btn.addEventListener("click", (e) => {
                    e.preventDefault();
                    const urlUUID = btn.dataset.uuidfield;
                    const url = btn.dataset.url;
                    this.setups(urlUUID, url);
                })
            })
        }
    }
    setups(urlUUID, url) {
        const websocketProtocol = window.location.protocol === "https:" ? "wss" : "ws";
        const wsEndpoint = `${websocketProtocol}://${window.location.host}/meddelanden/${urlUUID}/`;
        this.chatSocket = new WebSocket(wsEndpoint);
        this.chatSocket.onmessage = async (e) => {
            e.preventDefault();
            const data = JSON.parse(e.data);
            const text_message = data.message;
            const auth_user_id = data.room_data.auth_user_id;
            const main_user_sender = data.room_data.main_user_sender;
            const message_sender_username = data.room_data.message_sender_username;
            const timestamp = new Date(data.room_data.message_timestamp).toLocaleString([], {
                hour: '2-digit',
                minute: '2-digit',
            });
            this.displayMessages(
                auth_user_id, 
                main_user_sender, 
                message_sender_username,
                text_message,
                timestamp, 
            );
        };
        this.chatSocket.onclose = (e) => {
            console.log("Chat socket closed unexpectedly");
        };
        this.chatInput.focus();
        this.chatInput.onkeydown = (e) => {
            if (e.key === "Enter") {
                e.preventDefault();
                this.chatMessageSubmit.click();
            }
        };
        this.chatMessageSubmit.onclick = (e) => {
            e.preventDefault();
            const message = this.chatInput.value.trim();
            const sender = this.chatMessageSubmit.dataset.sender;
            const messageContentScroll = document.getElementById("msgContentscrollDown");
            if (message !== "") {
                this.chatSocket.send(JSON.stringify({
                    "message": message,
                    "url_UUID": urlUUID,
                    "sender_pk": sender,
                }));
            }
            this.chatInput.value = "";
            if (messageContentScroll) {
                scrollToBottom(messageContentScroll);
            } else {
                console.warn("Scroll container not found.")
            }
        };
    }
    displayMessages(auth_user_id, main_user_sender, message_sender_username, text_message, timestamp) {
        let messagesContainer;
        if (screen.width < 768) {
            messagesContainer = document.querySelector(".message_fields__mobile_view");
        } else {
            messagesContainer = document.querySelector(".message_fields__desktop_view");
        }
        if (!messagesContainer) {
            console.log("Message container not found.");
        }
        let messageHTML = "";
        if (auth_user_id == main_user_sender) {
            messageHTML = `<div class="message-box message-sender"> 
                            <div class="message-box__content"> 
                                <small>Du</small> 
                                <span>${text_message}</span> 
                            </div> 
                            <small class="message-box__message-timestamp">${timestamp}</small> 
                        </div>`;
        } else {
            messageHTML = `<div class="message-box message-receiver"> 
                            <div class="message-box__content"> 
                                <small>${message_sender_username}</small> 
                                <span>${text_message}</span> 
                            </div> 
                            <small class="message-box__message-timestamp">${timestamp}</small> 
                        </div>`;
        }
        const newMessageDiv = document.createElement('div');
        newMessageDiv.innerHTML = messageHTML;
        messagesContainer.appendChild(newMessageDiv);
    }
}
if (document.querySelector(".message-page")) {
    if (screen.width < 768) {
        new DjangoChatRoomChannels("chat-input__mobile", ".chat-message-submit__mobile", ".message-list__item-preview", csrftoken);
    } else {
        new DjangoChatRoomChannels("chat-input__desktop", ".chat-message-submit__desktop", ".message-list__item-preview", csrftoken);
    }
}

PYTHON
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [env("REDIS_CLOUD_URL")],
        },
    },
}

I’ve checked my ASGI and routing configurations and confirmed that Daphne is in the right place. The error only occurs in production. Any ideas on what could be causing the WebSocket connection to fail on Heroku?

Thanks!

Comments 0

•

Answers 1

•

1 Answer

Answer by StackOverflow TychoAI Agent • 9 days ago

Troubleshooting WebSocket Connection Issues on Heroku with Django Channels

Based on your description, you're experiencing WebSocket connection failures in your Django Channels application when deployed to Heroku, while everything works fine locally. This is a common issue when deploying WebSocket applications to production environments. Let me help you troubleshoot this.

Potential Issues and Solutions

1. Heroku WebSocket Support Configuration

Heroku requires specific configuration to properly support WebSockets:

PYTHON
# In your Procfile, ensure you're using Daphne correctly
web: daphne your_project.asgi:application -b 0.0.0.0 -p $PORT

Also, make sure you've enabled WebSockets on your Heroku app:

BASH
heroku features:enable http-session-affinity

2. Proxy Configuration

Heroku uses proxies that can interfere with WebSocket connections. Your ASGI application needs to be configured to handle this:

PYTHON
# In your asgi.py
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            routing.websocket_urlpatterns
        )
    ),
})

3. Check Redis Connection

Your Redis configuration looks good, but verify that the Redis connection is working properly in production:

PYTHON
# Add logging to your settings.py
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
        },
    },
    'loggers': {
        'django': {
            'handlers': ['console'],
            'level': 'INFO',
        },
        'channels': {
            'handlers': ['console'],
            'level': 'INFO',
        },
    },
}

4. SSL/TLS Termination

Heroku terminates SSL/TLS connections at their routing layer. Make sure your application is properly handling this:

PYTHON
# In settings.py
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

5. Deployment Checklist

According to the Django deployment documentation, ensure you've:

Switched away from manage.py runserver (which you have by using Daphne)
Set DEBUG = False in production
Configured ALLOWED_HOSTS properly
Set up proper HTTPS settings

6. Client-Side Debugging

Add more detailed error handling in your JavaScript:

JAVASCRIPT
this.chatSocket = new WebSocket(wsEndpoint);
this.chatSocket.onopen = (e) => {
    console.log("WebSocket connection established");
};
this.chatSocket.onerror = (e) => {
    console.error("WebSocket error:", e);
};
this.chatSocket.onclose = (e) => {
    console.log("WebSocket closed with code:", e.code, "reason:", e.reason);
};

7. Check Heroku Logs

Monitor your Heroku logs for any errors related to WebSocket connections:

BASH
heroku logs --tail

Specific Recommendations

Verify your Procfile: Ensure it's correctly configured to use Daphne.
Check your ASGI configuration: Make sure it's properly handling both HTTP and WebSocket protocols.
Inspect network traffic: Use browser developer tools to see the exact WebSocket handshake failure.
Test with a simple consumer: Create a minimal WebSocket consumer to isolate the issue.
Consider using a different WebSocket server: If Daphne is causing issues, you might try Uvicorn with its WebSocket support.

The error message you're seeing indicates that the WebSocket connection is being attempted but failing. This typically happens due to proxy issues, incorrect routing, or server configuration problems rather than issues with your consumer code itself.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Discussion

No comments yet.