Django channels: messages are duplicated in a one channel

Question

I'm going through official Django Channels tutorial and get stacked with the same problem as this guy: Django Channels group send only sends the message to last channel

So, I have a bunch of standard files:

# asgi.py
import os
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
import chat.routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings')

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

# routing.py
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
]


# consumers.py
import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
async def connect(self):
    self.room_name = self.scope['url_route']['kwargs']['room_name']
    self.room_group_name = 'chat_%s' % self.room_name
    await self.channel_layer.group_add(
        self.room_group_name,
        self.channel_name
    )
    await self.accept()

async def disconnect(self, close_code):
    await self.channel_layer.group_discard(
        self.room_group_name,
        self.channel_name
    )

async def receive(self, text_data):
    print('def receive from websocket')
    text_data_json = json.loads(text_data)
    message = text_data_json['message']
    await self.channel_layer.group_send(
        self.room_group_name,
        {
            'type': 'chat_message',
            'message': message
        }
    )

async def chat_message(self, event):
    message = event['message']
    await self.send(text_data=json.dumps({
        'message': message
    }))

And a part of settings.py

ASGI_APPLICATION = 'mysite.asgi.application'
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}

This is a simple chat room. I open two tabs in the same browser, text "Hello" in the first one and get two "Hello" inside of the second tab with zero "Hello" in the first tab.

UPDATE!!! I made some experiments and I think that consumers functions work correctly (I logged channel_name parameter during the messages sending and inside def receive() I can see exactly that channel_name, from which I sent a message, and at the same time inside def chat_message() I can see all channels). So, the problem should be in js?

<textarea id="chat-log" cols="100" rows="20"></textarea><br>
    <input id="chat-message-input" type="text" size="100"><br>
    <input id="chat-message-submit" type="button" value="Send">
    {{ room_name|json_script:"room-name" }}
    <script>
        const roomName = JSON.parse(document.getElementById('room-name').textContent);

        const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/chat/'
            + roomName
            + '/'
        );

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            document.querySelector('#chat-log').value += (data.message + '\n');
        };

        chatSocket.onclose = function(e) {
            console.error('Chat socket closed unexpectedly');
        };

        document.querySelector('#chat-message-input').focus();
        document.querySelector('#chat-message-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // enter, return
                document.querySelector('#chat-message-submit').click();
            }
        };

        document.querySelector('#chat-message-submit').onclick = function(e) {
            const messageInputDom = document.querySelector('#chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            messageInputDom.value = '';
        };
    </script>

Answer 1

The problem is solved. In my case it was with django environment. I used the common one, which I also use for other projects. Maybe the reason of issue was in conflict between some installs. I've created a new environment, installed django and channels and everything is working now.

Answer 2

I faced this issue too. I think this is a bug in channels=3.0.0

I upgraded to channels=3.0.4 and it is working now!