Question

我有一个聊天应用程序，消息被分类为outgoing或incoming。

在客户端，这些消息显示在聊天的两侧，具体取决于它们是发送还是接收。

我正在尝试使用Jquery .append(msgText)在发送或接收消息时回显该消息（如上图所示），但无法使其以正确的格式在正确的位置回显（它仅显示页面刷新后显示，但我希望它实时回显。

我已经尝试在forloop中使用var sentMsg = $('#sent_msg')作为id定位#sent_msg，但是显然它只是将已发送的文本附加到每条已发送的消息中。

如果我将它放在forloop（ex）var chatHolder = $('#chat-items')之外，那么问题是左右两侧没有格式...所有消息（发送和接收）都只是通过在无序列表的左侧。

是否有方法可以附加到forloop的每个新迭代中并应用正确的格式/样式？

我正在这里学习绳索，因此请多加投入。

thread.html

 <ul id="chat-items">
            {% for chat in object.chatmessage_set.all %}
            {% if chat.user == user %}
<div id="sent_msg">
            <div class="outgoing_msg">
              <div class="outgoing_msg_img"> <img src="{{ chat.user.profile.image.url }}" alt="sunil"> </div>
              <div class="sent_msg">
                <p>{{ chat.message }}</p>
                <span class="time_date"> {{ chat.timestamp }}</span>
              </div>
            </div>
</div>
            {% else %}
<div id="incoming_msg">
            <div class="incoming_msg">
              <div class="incoming_msg_img"> <img src="{{ chat.user.profile.image.url }}" alt="sunil"> </div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>{{ chat.message }}</p>
                  <span class="time_date"> {{ chat.timestamp }}</span>
                </div>
              </div>
            </div>
</div>
            {% endif %}
            {% endfor %}
            </ul>

base.html

<script>
    // websocket scripts - client side*
    var loc = window.location
    var msgInput = $("#id_message")
    var chatHolder = $('#chat-items')
    var incomingMsg = $('#incoming_msg')
    var sentMsg = $('#sent_msg')

    // below is the message I am receiving
    socket.onmessage = function(e) {
      console.log("message", e)
      var chatDataMsg = JSON.parse(e.data)
      incomingMsg.append('<li>' + chatDataMsg.message + ' from ' + chatDataMsg.username + '</li>')
    }

    // below is the message I am sending
    socket.onopen = function(e) {
      console.log("open", e)
      formData.submit(function(event) {
        event.preventDefault()
        var msgText = msgInput.val()
        sentMsg.append(msgText)
        var finalData = {
          'message': msgText
        }
        socket.send(JSON.stringify(finalData))
        formData[0].reset()
      })
    }

jQuery .append（）到单个forloop Python Django中的多个位置

0 个答案: