Django, Channelsを使ったチャットアプリでのエラー"WebSocket is already in CLOSING or CLOSED state."

djangoのchannelsを使ってチャットアプリを作っています。
こちらの動画を参考にして、データベースを使ったチャットを作ろうとしていた時にエラーが出ました。

【セットアップ】

OS: MacOSX 10.15.1
browser: Chrome 78.0.3904.87
Python: 3.74
Django: 2.2.6
channels: 2.3.1

【状況】

下記のコードで作ったアプリで、新しくメッセージを打つと、
入力したメッセージに続いて、空のメッセージが無限に出続けます。

【エラー】

ChromeのConsoleで確認したところ、下のエラーを無限に出していました。

WebSocket is already in CLOSING or CLOSED state.

【やったこと】

・FireFoxでも試しましたがダメでした。
・WebSocketをこちらのReconnectingWebSocketを使っていたので、一度ChannelsTutorial通りのWebSocketを使って試しましたがダメでした。

【コード】

tree
1├── chat
2│   ├── __init__.py
3│   ├── __pycache__
4│   ├── admin.py
5│   ├── apps.py
6│   ├── consumers.py
7│   ├── migrations
8│   ├── models.py
9│   ├── routing.py
10│   ├── static
11│   │   └── chat
12│   │       ├── main.js
13│   │       ├── reconnecting-websocket.js
14│   │       └── style.css
15│   ├── templates
16│   │   └── chat
17│   │       ├── index.html
18│   │       ├── room.html
19│   ├── tests.py
20│   ├── urls.py
21│   └── views.py
22

html
1<!-- room.html -->
2
3<div class="messages">
4    <ul id="chat-log">
5        <li class="sent">
6            <img src="" alt="dummy" />
7            <p>dummy</p>
8        </li>
9        <li class="replies">
10            <img src="" alt="dummy" />
11            <p>dummy</p>
12        </li>
13    </ul>
14</div>
15<div class="message-input">
16    <div class="wrap">
17    <input id="chat-message-input" type="text" placeholder="Write your message..." />
18    <i class="fa fa-paperclip attachment" aria-hidden="true"></i>
19    <button id="chat-message-submit" class="submit">
20        <i class="fa fa-paper-plane" aria-hidden="true"></i>
21    </button>
22    </div>
23</div>

javascript
1// room.html
2<script>
3    var roomName = {{ room_name_json }};
4    var username = {{ username }};
5
6    var chatSocket = new ReconnectingWebSocket(
7        'ws://' + window.location.host +
8        '/ws/chat/' + roomName + '/');
9
10    chatSocket.onmessage = function(e) {
11        var data = JSON.parse(e.data);
12        var message = data['message'];
13        var author = message['author'];
14
15        var msgListTag = document.createElement('li');
16        var imgTag = document.createElement('img');
17        var pTag = document.createElement('p');
18        pTag.textContent = message.content;
19        imgTag.src = 'https://emilcarlsson.se/assets/mikeross.png';
20
21        if (author === username) {
22            msgListTag.className = 'sent';
23        } else {
24            msgListTag.className = 'replies';
25        }
26        msgListTag.appendChild(imgTag);
27        msgListTag.appendChild(pTag);
28        document.querySelector('#chat-log').appendChild(msgListTag);
29    };
30
31    chatSocket.onclose = function(e) {
32        console.error('Chat socket closed unexpectedly');
33    };
34
35    document.querySelector('#chat-message-input').focus();
36    document.querySelector('#chat-message-input').onkeyup = function(e) {
37        if (e.keyCode === 13) {  // enter, return
38            document.querySelector('#chat-message-submit').click();
39        }
40    };
41
42    document.querySelector('#chat-message-submit').onclick = function(e) {
43        var messageInputDom = document.querySelector('#chat-message-input');
44        var message = messageInputDom.value;
45        chatSocket.send(JSON.stringify({
46            'command': 'new_message',
47            'message': message,
48            'from': username
49        }));
50
51        messageInputDom.value = '';
52    };
53</script>

python
1# consumers.py
2class ChatConsumer(WebsocketConsumer):
3
4    def fetch_messages(self, data): 
5        messages = Message.last_10_messages()
6        content = {
7            'messages': self.messages_to_json(messages)
8        }
9        self.send_message(content)
10
11    def new_message(self, data):
12        author = data['from']
13        author_user = User.objects.filter(username=author)[0]
14        message = Message.objects.create(
15            author=author_user,
16            content=data['message'])
17        content = {
18            'command': 'new_message',
19            'message': self.message_to_json(message)
20        }
21        return self.send_chat_message(content)
22
23    def messages_to_json(self, messages):
24        result = []
25        for message in messages:
26            result.append(self.messages_to_json(message))
27        return result
28
29    def message_to_json(self, message):
30        return {
31            'author': message.author.username,
32            'content': message.content,
33            'created_at': str(message.created_at)
34        }
35
36    commands = {
37        'fetch_messages': fetch_messages,
38        'new_message': new_message
39    }
40
41    def connect(self):
42        self.room_name = self.scope['url_route']['kwargs']['room_name']
43        self.room_group_name = 'chat_%s' % self.room_name
44
45        async_to_sync(self.channel_layer.group_add)(
46            self.room_group_name,
47            self.channel_name
48        )
49
50        self.accept()
51
52    def disconnect(self, close_code):
53        async_to_sync(self.channel_layer.group_discard)(
54            self.room_group_name,
55            self.channel_name
56        )
57        
58    def receive(self, text_data):
59        data = json.loads(text_data)
60        self.commands[data['command']](self, data)
61
62    def send_chat_message(self, message):
63        async_to_sync(self.channel_layer.group_send)(
64            self.room_group_name,
65            {
66                'type': 'chat_message',
67                'message': message
68            }
69        )
70    
71    def send_message(self, message):
72        self.send(text_data=json.dumps(message))
73
74    def chat_message(self, event):
75        message = event['message']
76        self.send(text_data=json.dumps(message))