app.js

const username =
  prompt("Tên của bạn")
  || "Anonymous";

document.getElementById(
  "usernameText"
).textContent = username;

document.getElementById(
  "avatar"
).textContent =
  username[0].toUpperCase();

const WORKER_URL =
  "wss://realtime-chat.hungnguyen-junn.workers.dev/ws";

const API_URL =
  "https://realtime-chat.hungnguyen-junn.workers.dev/messages";

const ws =
  new WebSocket(WORKER_URL);

const messages =
  document.getElementById("messages");

const input =
  document.getElementById("messageInput");

const sendBtn =
  document.getElementById("sendBtn");

function formatTime() {

  return new Date()
    .toLocaleTimeString(
      [],
      {
        hour: "2-digit",
        minute: "2-digit"
      }
    );
}

function addMessage(data) {

  const div =
    document.createElement("div");

  const isSelf =
    data.username === username;

  div.className =
    `message ${isSelf ? "self" : ""}`;

  div.innerHTML = `
    <div class="message-user">
      ${data.username}
    </div>

    <div class="message-text">
      ${data.message}
    </div>

    <div class="message-time">
      ${formatTime()}
    </div>
  `;

  messages.appendChild(div);

  messages.scrollTop =
    messages.scrollHeight;
}

// load history
async function loadMessages() {

  try {

    const res =
      await fetch(API_URL);

    const data =
      await res.json();

    data.forEach(addMessage);

  } catch (err) {

    console.error(err);
  }
}

loadMessages();

// websocket connected
ws.onopen = () => {

  console.log(
    "Realtime connected"
  );
};

// receive realtime
ws.onmessage = (event) => {

  try {

    const data =
      JSON.parse(event.data);

    addMessage(data);

  } catch (err) {

    console.error(err);
  }
};

// send message
function sendMessage() {

  const text =
    input.value.trim();

  if (!text) return;

  ws.send(
    JSON.stringify({
      username,
      message: text
    })
  );

  input.value = "";
}

sendBtn.onclick =
  sendMessage;

input.addEventListener(
  "keypress",
  (e) => {

    if (e.key === "Enter") {
      sendMessage();
    }
  }
);