Блог

Я создал приложение для чата, такое как WhatsApp, используя каналы Django, redis и веб-сайты. Он включает в себя такие функции, как приватный и публичный чат. Пользователь также может отправлять изображения в чат. Пользовательский интерфейс разработан таким образом, что сообщение отправителя находится справа, а сообщение получателя-слева.

Чего я хочу?
Я хочу добавить функцию, чтобы пользователь мог удалять каждое текстовое сообщение. Я добавил кнопку удаления (выглядит как круг, содержащий символ креста) после каждого чата. Действие удаления выполняется только после обновления страницы. Я хочу, чтобы это произошло без обновления страницы. Поэтому я хочу добавить загрузку шаблона URL в javascript, но это не работает.

Он показывает ошибки, такие как «Не удалось проанализировать остаток» (ошибка django) или «$ не определен» (ошибка javascript). Я перепробовал все решения, упомянутые здесь.

Мой код в room.html
Этот код предназначен для группового чата

 {% block content %}
<br><br>
{% include 'message.html' %}
    <div class="container mb-5" style="max-width: 600px;">
        <form>
            <div>
                <label class="h4 pt-5">Public Chatroom</label>
                <div class=" border border-primary border-2"  placeholder="Chat Screen" id="chat-text"  style=" height: 400px; overflow-y: scroll;">
                    {% if group_messages %}
                    
                        {% for group_message in group_messages %}
                        
                            {% if group_message.username == user.username %}

                                {% if 'base64' in group_message.content %}

                                    <div id="sent" class="text-end my-2">
                                        {% include 'image_display.html' %}
                                    </div>

                                {% else %}

                                    <div id="sent" class="text-end my-2">
                                        {% include 'text_display.html' %}
                                    </div>
                                {% endif %}
                            {% else %}
                                {% if 'base64' in group_message.content %}

                                    <div id="replies" class="my-2">
                                        {% include 'image_display.html' %}
                                    </div>

                                {% else %}
                                
                                    {% include 'text_display.html' %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div><br>
            </div>
            <div class="form-group">
                <input class="form-control" id="input" type="text" placeholder="Type Here"></br>
            </div>
            <input class="btn btn-outline-secondary container" id="submit" type="button" value="Send"> <br>
            <a href="#" class="mt-2 btn btn-primary container" onclick="ChooseImage()"> Send Image<input id="imageFile" accept="image/*" style="display: none;" onchange="SendImage(this);" type="file" ></a> <br>
            <small class="mt-2">Your username: {{ user.username }}</small>
        </form>
      <br>
    </div>

    {{ request.user.username|json_script:"user_username" }}

    <script>
        var group_message = "{{group_message}}";
   
        const user_username = JSON.parse(document.getElementById('user_username').textContent);

        document.querySelector('#submit').onclick = function (e) {
            const message = document.getElementById('input').value;

            chatSocket.send(JSON.stringify({
                'message': message,
                'username': user_username,
            })); 

            document.getElementById('input').value = "";

        }

        function ChooseImage() {
            document.getElementById('imageFile').click();
            
        }

        function SendImage(event) {
            var file = event.files[0];

            if (!file.type.match("image.*")){
                alert("Please select image only.");
            }
            else {
                var reader = new FileReader();

                reader.addEventListener("load", function () {

                    chatSocket.send(JSON.stringify({
                        'message': reader.result,
                        'username': user_username,
                    })); 
                   

                 }, false);

                 if (file) {
                     var images12 = reader.readAsDataURL(file);
                 }

                }

        }

        const url = 'ws://localhost:8000/ws/chat/';
        const chatSocket = new WebSocket(url);

        chatSocket.onmessage = function (e) {
            const data = JSON.parse(e.data);
            var message = data['message'];
            var sender = data['username'];
            var today = new Date();
            var time = today.getHours()   ":"   today.getMinutes();

            if (message.indexOf("base64") != -1){
                    var message = `<img src="${message}" style="height: 100px; width: 100px;" class="my-2" />`;
            }else{
                var message = message
            }

            if (sender == user_username){
                
                document.getElementById('chat-text').innerHTML ='<br>'  '<div class = "float-end mx-2 my-2">'   sender   ': '   message  ', Sent at  '   time   '  '    '<button class = "btn btn-outline-danger btn-sm rounded-circle" style="height:20px; width: 20px;">'   'amp;#215;'    '</button>'   '<br>'  ' </div>'   '<br>';
                
            } else {

                document.getElementById('chat-text').innerHTML ='<br>'   '<div class = "mx-2">'   sender   ': '   message   ', Sent at  '  time   '  '   '<button class = "btn btn-outline-danger btn-sm rounded-circle" style="height:20px, width: 20px;">'    'amp;#215;'    '</button>'  '<br>'   ' </div>'  '<br>';
                
            }
            
        }
    </script>

{% endblock content %}
 

Код в text_display.html

 amp;nbsp;amp;nbsp;{{group_message.username}}: {{group_message.content}}, amp;nbsp;Sent at {{group_message.created_at|time:"H:i"}}<a href="{% url 'group_chat_delete' group_message.id %}" role="button" class="mx-3 btn btn-outline-danger btn-sm rounded-circle" style="height: 20px; width: 20px;">amp;#215;</a> <br>
 

Код в image_display.html

 amp;nbsp;amp;nbsp;{{group_message.username}}: <img src="{{group_message.content}}" alt="Image" style="width: 100px; height: 100px;">, amp;nbsp;Sent at {{group_message.created_at|time:"H:i"}}<a href="{% url 'group_chat_delete' group_message.id %}" role="button" class="mx-3 btn btn-outline-danger btn-sm rounded-circle" style="height: 20px; width: 20px;">amp;#215;</a> <br>
 

Код от views.py файл:

 class GroupChatDeleteView(DeleteView):
    """View to delete a task in group chat."""
    model = GroupMessage
    raise_exception = True
    context_object_name = 'group_message'
    success_message = 'Chat successfully deleted!'
    success_url = reverse_lazy('room')
    template_name = 'group_chat_del.html'
    pk_url_kwarg = 'msg_id'    

    def delete(self, request, *args, **kwargs):
        """Override delete method to allow success message to be added."""
        messages.success(self.request, self.success_message)
        return super().delete(request, *args, **kwargs)

 

Я хочу добавить этот код тега привязки `href=»{% url ‘group_chat_delete’ group_message.id %}` в блоке » если (отправитель == имя пользователя)` (javascript).

Пожалуйста, помогите мне сделать это. Мы очень ценим любую помощь.