Uncaught ReferenceError: Cannot access 'chatSocket' before initialization at HTMLImageElement.document.getElementById.onclick

Я делаю приложение для чата с djnago Я использую channels_redis, оно прекрасно работает на localhost, когда я использовал channels, но как только я перешел на channels_redis и использовал heroku redis addons и aws recently и развернул на heroku Я получаю это сообщение об ошибке Uncaught ReferenceError: Cannot access 'chatSocket' before initialization at HTMLImageElement.document.getElementById.onclick. Я действительно не знаю, как я могу решить эту проблему .... потому что теперь всякий раз, когда я нажимаю на кнопку отправки сообщения, я получаю эту ошибку, позвольте мне показать вам сначала js часть в моем шаблоне чата.html

<script>

        /* send message*/
        document.getElementById('send-btn-id').onclick = function (e) {
            const msg = document.getElementById('message').value;
            chatSocket.send(JSON.stringify({
                'message': msg,
                'user': me,
                'friend': friendName
            }));
            document.getElementById('message').value = "";
            $("#card-body").animate({ scrollTop: 20000000 }, "slow");
        };

        const friendName = JSON.parse(document.getElementById('friend').textContent);
        const me = JSON.parse(document.getElementById('me').textContent);

        /* set friend profile name */
        document.getElementById('friend-name').innerHTML = friendName['username'];

        /* start conversation */
        document.querySelector('.start-conversation').innerHTML = 'Start conversation with <strong>'+friendName['username']+'</strong>';

        /* connection request */
        const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/chat/'
            + friendName['username']
            + '/'
        );

        chatSocket.onmessage = function (e) {
            const data = JSON.parse(e.data);
            var class_name = 'in';
            var profile_image = '{{friend_obj.profile.image.url}}';

            if(me['username'] == data.user['username']) {
                data.user['username'] = 'Me';
                class_name = 'out';
                profile_image = '{{request.user.profile.image.url}}';
            }

            var chat_list = document.querySelector('#chat-list-id');
            var chat = "<li class=\""+class_name+"\"><div class=\"chat-img\"><img alt=\"avatarchat\" src=\""+profile_image+"\"></div><div class=\"chat-body\"><div class=\"chat-message\"><h5>"+data.user['username']+"</h5><p>"+data.message+"</p></div></div></li>";
            
            $("#card-body").animate({ scrollTop: 20000000 }, "slow");
            chat_list.innerHTML += chat;
        };
        
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Вернуться на верх