TypeError: Group name must be a valid unicode string containing only ASCII alphanumerics, hyphens, o

現在、非同期処理のチャットアプリをDjangoで作成中です。channelというライブラリを使っています。ドキュメントを見ながら進めていますが、ターミナル上で以下のエラーが発生しています。

TypeError: Group name must be a valid unicode string containing only ASCII alphanumerics, hyphens, or periods.
WebSocket DISCONNECT /ws/chat/%E3%83%AD%E3%83%93%E3%83%BC/ [127.0.0.1:53665]

調べたもののなかなか参考になるものが見つからず、困っています。何か方法があればご教授ください。
以下を追加してから動かなくなったので、問題はこのファイルではないかなと思います。一応、バックエンドとフロントエンドのコードを貼っています。

現在、メッセージを送信してもその内容がログに表示されない状態になっています。

python
1import json
2from asgiref.sync import async_to_sync
3from channels.generic.websocket import WebsocketConsumer
4
5
6class ChatConsumer(WebsocketConsumer):
7    def connect(self):
8        self.room_name = self.scope['url_route']['kwargs']['room_name']
9        self.room_group_name = 'chat_%s' % self.room_name
10
11        # Join room group
12        async_to_sync(self.channel_layer.group_add)(
13            self.room_group_name,
14            self.channel_name
15        )
16
17        self.accept()
18
19    def disconnect(self, close_code):
20        # Leave room group
21        async_to_sync(self.channel_layer.group_discard)(
22            self.room_group_name,
23            self.channel_name
24        )
25
26    # Receive message from WebSocket
27    def receive(self, text_data):
28        text_data_json = json.loads(text_data)
29        message = text_data_json['message']
30
31        # Send message to room group
32        async_to_sync(self.channel_layer.group_send)(
33            self.room_group_name,
34            {
35                'type': 'chat_message',
36                'message': message
37            }
38        )
39
40    # Receive message from room group
41    def chat_message(self, event):
42        message = event['message']
43
44        # Send message to WebSocket
45        self.send(text_data=json.dumps({
46            'message': message
47        }))

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8" />
6    <title>Chat Room</title>
7</head>
8
9<body>
10    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
11    <input id="chat-message-input" type="text" size="100"><br>
12    <input id="chat-message-submit" type="button" value="Send">
13    {{ room_name|json_script:"room-name" }}
14    <script>
15        const roomName = JSON.parse(document.getElementById('room-name').textContent);
16
17        const chatSocket = new WebSocket(
18            'ws://'
19            + window.location.host
20            + '/ws/chat/'
21            + roomName
22            + '/'
23        );
24
25        chatSocket.onmessage = function (e) {
26            const data = JSON.parse(e.data);
27            document.querySelector('#chat-log').value += (data.message + '\n');
28        };
29
30        chatSocket.onclose = function (e) {
31            console.error('Chat socket closed unexpectedly');
32        };
33
34        document.querySelector('#chat-message-input').focus();
35        document.querySelector('#chat-message-input').onkeyup = function (e) {
36            if (e.keyCode === 13) {  // enter, return
37                document.querySelector('#chat-message-submit').click();
38            }
39        };
40
41        document.querySelector('#chat-message-submit').onclick = function (e) {
42            const messageInputDom = document.querySelector('#chat-message-input');
43            const message = messageInputDom.value;
44            chatSocket.send(JSON.stringify({
45                'message': message
46            }));
47            messageInputDom.value = '';
48        };
49    </script>
50</body>
51
52</html>