[livechat] script js

.js

var event_source, interval;
function initEventSource() {
  event_source = new EventSource(`${host}/charger-messages`)
  event_source.addEventListener('updated', (event) => {
    /** @type [[]] */
    let all_messages = JSON.parse(event.data).messages_pack
    let user_id = JSON.parse(event.data).user_id

    if (all_messages.length > 0) {
      all_messages.forEach(function (messages) {
        // console.log(all_messages)
        updateDiscussion(messages, user_id, messages[0].discussion)
      })
    }
  })
  event_source.onopen = function () {
    clearInterval(interval)
  }
  event_source.onerror = function () {
    event_source.close()
    interval = setInterval(initEventSource, 3500)
  }
}
initEventSource()


var sent_message = false;
let forms = document.getElementsByName('message-form');
var form;
if (forms !== null) {
  Array.from(forms.entries()).forEach(function (elt) {

    elt[1].addEventListener('submit', function (event) {
      event.preventDefault();

      form = event.target;
      if (form.checkValidity()) {
        let usp = new URLSearchParams(location.search);
        let user_id = -1;
        for (let pair of usp.entries()) {
          if (pair[0] == 'target') user_id = pair[1];
        }
        const discussion_id = form.elements.discussion.value;
        document.getElementById(`form-input-submit-message-${discussion_id}`).setAttribute('disabled', "true");
        // console.log('Sending message...');

        jQuery.ajax({
          type: "POST",
          url: `${host}/wp-admin/admin-ajax.php`, // host est défini dans un autre script comme variable globale
          data: {
            action: 'send_message',
            message_content: form.elements.content.value,
            discussion_id: discussion_id,
            user_id: user_id
          },
          success: function (output) {
            if (output.success && output.data.created_message) {
              // console.info('Message sent.');
              if (discussion_id == 0) {
                location.reload()
              } else {
                sent_message = true;
                updateDiscussion(output.data.messages, form.elements.sender.value, discussion_id);
              }
            } else {
              // console.log('Message not sent');
            }
          },
          error: function (error) {
            alert('Une erreur est survenue lors de l\'envoi.');
            console.log(error);
          },
          complete: function () {
            document.getElementById(`form-input-submit-message-${discussion_id}`).removeAttribute('disabled');
          }
        });
      }
    });

  })
}

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    let tab_menu = event.target
    if (tab_menu != null) {
      const lastElementChild = tab_menu.lastElementChild;
      if (lastElementChild.tagName == "SPAN")
        lastElementChild.classList.remove('d-md-block')
      let id = tab_menu.getAttribute('aria-controls')
      id = id.replace('list-discussion-', '')

      jQuery.ajax({
        type: "POST",
        url: `${host}/wp-admin/admin-ajax.php`,
        data: {
          action: 'mark_messages_as_read',
          discussion_id: id
        },
        complete: function (response) {
          // console.log(response.responseJSON);
        }
      });
    }
  })
})

function updateDiscussion(messages, sender, discussion_id) {
  let discussion_content = '<div class="alert alert-info small mx-5 p-1 text-center">Debut de conversation</div>';
  messages.forEach(message => {
    let _class = message.sender == sender ? 'talk-bubble-right float-end' : 'talk-bubble-left float-start';
    discussion_content += `<div class="talk-bubble ${_class} w-100">` +
      `${message.content}` +
      `</div>`;
  });
  let latest_message = messages[messages.length - 1];
  let unread_number = messages.filter(message => message.sender != sender && message.is_read == false).length;
  if (form != null && sent_message == true) {
    form.reset();
    sent_message = false;
  }

  document.getElementById(`discussion-${discussion_id}`).innerHTML = discussion_content;
  document.getElementById(`latest-message-${discussion_id}`).innerHTML = latest_message.sender != sender
    ? latest_message.content
    : `<span style='font-style: italic;'>Vous: </span> ${latest_message.content}`;

  if (unread_number != 0 && document.getElementById(`unread-number-${discussion_id}`) != null) {
    document.getElementById(`unread-number-${discussion_id}`).innerHTML = unread_number;
  } else if (unread_number == 0) {
    if (document.getElementById(`unread-number-${discussion_id}`) != null) {
      document.getElementById(`list-discussion-${discussion_id}-list`).removeChild(document.getElementById(`list-discussion-${discussion_id}-list`).lastChild);
    }
  } else {
    let unread_div = document.createElement('span');
    unread_div.className = "d-none d-md-block badge bg-warning text-dark rounded-pill ms-2";
    unread_div.id = 'unread-number-' + discussion_id;
    unread_div.innerText = unread_number
    document.getElementById(`list-discussion-${discussion_id}-list`).appendChild(unread_number);
  }
}