Как .append () новое сообщение на веб-сокете на страницу со стилями CSS?

Question

У меня возникают проблемы с концепцией .append() нового сообщения, полученного через WebSocket, в окно чата на стороне клиента со стилями CSS.

Сейчас у меня есть forloop, который заполняетокно чата, когда в модели ChatMessage есть объекты.

{% for chat in object.chatmessage_set.all %}

Это, очевидно, заполняет страницу sent_msg и incoming_msg только при обновлении страницы, что означает, что любые сообщения, полученные черезWebSocket (а затем сохраненный в БД) не появится, пока пользователь не обновит страницу.

Я новичок во многих клиентских JS / Jquery вещах, так что простите меня, но я хочу использовать .append() для отображения сообщения в окне чата, как только оно отправлено / получено через WebSocket, что приводит к ощущению чата в реальном времени.

Я пытался добавить сообщение в forloop, но оно явно добавляется к каждому отправленному или полученному сообщению и к нему не применяются стили CSS (what является приложенным текстом).

Если я добавлю его за пределы цикла, к нему не будет применен ни один из стилей (размещение и т. Д.), И он будет добавлен под первым сообщениемотправлено (я знаю, что могу сделать prepend, но это все еще не решает проблему)

thread.html

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

base.html

var loc = window.location
    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('<li>' + msgText + '</li>')

Answer 1

на основе комментария вы должны использовать селектор класса для входящего блока, и я думаю, что хорошим решением является использование шаблона.

где-то в вашем thread.html

<span class="imcoming-tpl" style="display:none;">
  <div class="incoming_msg_img">
      <img src="src" class="chat-img-src">
  </div>
  <div class="received_msg" id="received_msg">
      <p class="chat-message">text</p>
  </div>
</span>

и в части js

var incomingMsg = $('.incoming_msg')
socket.onmessage = function(e) {
  console.log("message", e)
  var chatDataMsg = JSON.parse(e.data)
    var tpl = $('.imcoming-tpl').clone();
    tpl.removeClass('imcoming-tpl');
    tpl.find('.chat-message').html(chatDataMsg.message);
    // Some code to add img src need to add the user.profile.image.url on the back side
    // tpl.find('.chat-img-src').attr(src, chatDataMsg.url);
    incomingMsg.append(tpl);
    tpl.show()
}