CODEWITHSUNDEEP
pythondjangowebsocketdisconnectdjango-channels
Vasil Shtiliyanov
Vasil Shtiliyanov

Reputation: 78

Django channels websocket disconnects after handshake

I am building a simple chat room following examples of django channels. Everything worked like a charm yesterday and I managed to create a chatroom and even managed to chat in there. All of a sudden without any change in my code the Websocket started disconnecting immediately after connection and handshake.

My setup:
Django == 1.10.5
Python == 2.7
channels == 1.1.8
asgi-redis == 1.4.2
daphne == 1.3.0

My consumers.py looks like this:

consumers.py:
@channel_session
def ws_connect(message):
    room = message.content['path'].strip("/")
    message.channel_session['room'] = room
    Group("chat").add(message.reply_channel)
    message.reply_channel.send({"accept": True})

And the frontend part :

 $(function() {
        // When we're using HTTPS, use WSS too.
        var ws_scheme = window.location.protocol = "ws";
        var chatsock = new WebSocket(ws_scheme + '://' + window.location.host + window.location.pathname);


        chatsock.onmessage = function(message) {
            var data = JSON.parse(message.data);
            var chat = $("#chat");
            var ele = $('<tr></tr>');
            console.log(data);

            ele.append(
                $("<td></td>").text(data.timestamp)
            );
            ele.append(
                $("<td></td>").text(data.handle)
            );
            ele.append(
                $("<td></td>").text(data.message)
            );

            chat.append(ele)
        };

        $("#chatform").on("submit", function(event) {
            var time = new Date();
            var string = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
            // var timestamp = time.getHourMinuteSecond();
            var message = {
                timestamp: string,
                handle: $('#handle').val(),
                message: $('#message').val()
            };
            console.log("submit");
            chatsock.send(JSON.stringify(message));
            $("#message").val('').focus();
            return false;
        });
    });

Maybe an update in some technology is out. I am struggling to find out why this happens. In settings.py I have the following configuration for the redis channel layer:

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "asgi_redis.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("localhost", 6379)],
        },
        "ROUTING": "config.routing.channel_routing",
    },
}

I have another websocket logic for notifications which is also disconnecting right after handshake. I tried updating Django to 1.11. but no luck. In routing.py of the chat app:

chat_routing = [
    route("websocket.connect", consumers.ws_connect),
    route("websocket.receive", consumers.ws_message),
    route("websocket.disconnect", consumers.ws_disconnect),
]

I am running on Linux Ubuntu 16.04 and the only thing I updated in the last few days is Chrome version. So any ideas what should I do?

Upvotes: 1

Views: 3808

Answers (3)

Dominic
Dominic

Reputation: 33

The error can be fixed if you add a slash +'/' to the end of the URL:

var chatsock = new WebSocket(ws_scheme + '://' + window.location.host + window.location.pathname + '/');

In most cases / missing at the end causes problems in Chrome browser, but works fine in Firefox

Upvotes: 0

Chad Van De Hey
Chad Van De Hey

Reputation: 2911

Adding on to @Vasil answer above, this seems to be an issue in Chrome when localhost is used as the domain name of your running django project. If you run the project with an IP instead of Localhost, Chrome will not cause any issues.

Upvotes: 0

Vasil Shtiliyanov
Vasil Shtiliyanov

Reputation: 78

Turned out to be a Google Chrome update issue. probably going a version back will fix the problem if I can do it but that's the issue because I tried it on Mozilla and it still works like a charm.

Upvotes: 2

Related Questions