Html – How to display new chat messages immediately without reloading the whole page?

Alright, first question here!
I’m writing a chat application and what i need is for new messages to be displayed immediately, not just after a reload. I don’t know the best way to go about this; maybe reload just the chat-message-container again? Or display new messages as their own chatMessage elements? In either case I wouldn’t know how to do it.
I commented in the JS where I think the required logic needs to be. Any help is much appreciated!!

The HTML and JS:

{% extends "main.html" %} {% block content %}
<main class="messagePage my-xl">
  <div class="content-box">
    <div class="chat-header">
      <a class="backButton" href="{% url 'inbox' %}"><i class="fa-solid fa-arrow-left"></i></a>
      <h1 class="username-top">{{ other_user.username }}</h1>
    </div>

    <div class="chat-message-container">
      {% for chat_message in chat_messages %}
      <div
        class="chatMessage{% if chat_message.sender == profile %} chatMessage--right{% else %} chatMessage--left{% endif %}"
        id="chat-messages">
        <small>{{ chat_message.content|safe }}</small>
      </div>
      {% endfor %}
    </div>

    <div class="chat-bottom-section">
      <form method="post" action="" class="chat-form">
        {% csrf_token %}
        <div class="chat-input">
          <input
            type="text"
            name="content"
            class="flex-1 mr-3"
            placeholder="Your message..."
            id="chat-message-input"
          />
          <button id="chat-message-submit">
            <span class="icon-btn material-symbols-outlined">send</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</main>
{% endblock %} 
{%block script%} 
{{ room.id|json_script:"json-room-id" }} 
{{profile.id|json_script:"json-sender-id" }} 
{{other_user.id|json_script:"json-receiver-id" }}

<script>
  const roomId = JSON.parse(
    document.getElementById("json-room-id").textContent
  );
  const senderId = JSON.parse(
    document.getElementById("json-sender-id").textContent
  );
  const receiverId = JSON.parse(
    document.getElementById("json-receiver-id").textContent
  );
  const chatSocket = new WebSocket(
    "ws://" + window.location.host + "/ws/" + roomId + "/"
  );

  chatSocket.onopen = function (e) {
    console.log("yas bitch");
  };

  chatSocket.onclose = function (e) {
    console.log("onclose");
  };

  chatSocket.onerror = function (e) {
    console.error("WebSocket error:", e);
  };

  chatSocket.onmessage = function (e) {
    try {
      const data = JSON.parse(e.data);
      /*logic to append new messages/reload the css element*/
      scrollToBottom();
    } catch (error) {
      console.error("Error parsing WebSocket data:", error);
    }
  };

  document.querySelector("#chat-message-input").focus();
  document.querySelector("#chat-message-input").onkeyup = function (e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      document.querySelector("#chat-message-submit").click();
    }
  };

  document.querySelector("#chat-message-submit").onclick = function (e) {
    e.preventDefault();

    const messageInputDom = document.querySelector("#chat-message-input");
    const message_content = messageInputDom.value;

    console.log({
      message_content: message_content,
      senderId: senderId,
      receiverId: receiverId,
      roomId: roomId,
    });

    chatSocket.send(
      JSON.stringify({
        message_content: message_content,
        senderId: senderId,
        receiverId: receiverId,
        roomId: roomId,
      })
    );

    messageInputDom.value = "";

    return false;
  };



  function scrollToBottom() {
    let objDiv = document.getElementById("chat-messages");
    objDiv.scrollTop = objDiv.scrollHeight;
  }
  scrollToBottom();

</script>
{%endblock%}

The view:

@login_required(login_url="login")
def private_chat_view(request, pk):
    profile = request.user.profile
    room = Room.objects.get(id=pk)
    other_user_profile = room.get_partner(profile)
    chat_messages = room.messages.all().reverse()
    
    for chat_message in chat_messages:
        chat_message.content = insert_line_breaks(chat_message.content)

    return render(request, 'chats/room.html', {
        'chat_messages': chat_messages,
        'room': room,
        'profile': profile,
        'other_user': other_user_profile
    })

I tried both approaches I previously mentioned, in both cases nothing happened.