جاوااسکریپت تکمیلی؛ داده، چرخهٔ عمر و کلاینت چت

node --version
npm ci
npm run check
npm test
npm start

node --version
npm.cmd ci
npm.cmd run check
npm.cmd test
npm.cmd start

const joinForm = document.querySelector('#join-form');
const nickname = document.querySelector('#nickname');
const connectButton = document.querySelector('#connect-button');
const disconnectButton = document.querySelector('#disconnect-button');
const connectionStatus = document.querySelector('#connection-status');
const connectionDot = document.querySelector('#connection-dot');
const onlineCount = document.querySelector('#online-count');
const list = document.querySelector('#messages');
const messageForm = document.querySelector('#message-form');
const textInput = document.querySelector('#message-text');
const textCount = document.querySelector('#text-count');
const sendButton = document.querySelector('#send-button');
const sendStatus = document.querySelector('#send-status');

let socket = null;
let ready = false;
let manualStop = true;
let displayName = '';
let retries = 0;
let reconnectTimer = null;
let historyTimer = null;
let serverId = '';
let latestSeq = 0;
let pending = null;
const seen = new Set();
const unknown = new Set();
const encoder = new TextEncoder();
const timeFormat = new Intl.DateTimeFormat('fa-IR', { hour: '2-digit', minute: '2-digit' });
const numberFormat = new Intl.NumberFormat('fa-IR');

function createRequestId() {
  const source = globalThis.crypto;
  if (typeof source?.randomUUID === 'function') return source.randomUUID();
  if (typeof source?.getRandomValues !== 'function') throw new Error('Secure random unavailable');
  const bytes = new Uint8Array(16);
  source.getRandomValues(bytes);
  bytes[6] = (bytes[6] & 0x0f) | 0x40;
  bytes[8] = (bytes[8] & 0x3f) | 0x80;
  const hex = [...bytes].map(value => value.toString(16).padStart(2, '0')).join('');
  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
}

function setStatus(text, state = '') {
  connectionStatus.textContent = text;
  connectionDot.className = 'dot' + (state ? ' ' + state : '');
}
function notice(text, error = false) {
  sendStatus.textContent = text;
  sendStatus.classList.toggle('error', error);
}
function updateControls() {
  nickname.disabled = !manualStop;
  connectButton.disabled = !manualStop;
  disconnectButton.disabled = manualStop;
  textInput.disabled = !ready;
  sendButton.disabled = !ready || pending !== null;
}
function unknownPending() {
  if (!pending) return;
  clearTimeout(pending.timer);
  unknown.add(pending.id);
  if (unknown.size > 10) unknown.delete(unknown.values().next().value);
  pending = null;
  notice('نتیجهٔ ارسال نامعلوم است؛ متن حفظ شد و خودکار دوباره فرستاده نمی‌شود. ارسال دستی ممکن است تکراری شود.', true);
}
function validMessage(value) {
  return value && typeof value.id === 'string' && typeof value.at === 'string' &&
    Number.isSafeInteger(value.seq) && value.seq > 0 &&
    typeof value.name === 'string' && [...value.name].length <= 24 &&
    typeof value.text === 'string' && [...value.text].length <= 500 &&
    encoder.encode(value.text).length <= 2000 && Number.isFinite(Date.parse(value.at));
}
function appendMessage(message) {
  if (seen.has(message.id) || message.seq <= latestSeq) return;
  document.querySelector('#empty-state')?.remove();
  const article = document.createElement('article');
  article.className = 'message';
  article.dataset.messageId = message.id;
  const meta = document.createElement('div');
  meta.className = 'message-meta';
  const name = document.createElement('span');
  name.className = 'message-name';
  name.textContent = message.name;
  const time = document.createElement('time');
  time.dateTime = message.at;
  time.textContent = timeFormat.format(new Date(message.at));
  const text = document.createElement('p');
  text.className = 'message-text';
  text.textContent = message.text;
  meta.append(name, time); article.append(meta, text); list.append(article);
  seen.add(message.id); latestSeq = message.seq;
  while (list.children.length > 50) {
    seen.delete(list.firstElementChild.dataset.messageId);
    list.firstElementChild.remove();
  }
  list.scrollTop = list.scrollHeight;
}
function snapshot(packet) {
  if (typeof packet.serverId !== 'string' || typeof packet.clientId !== 'string' ||
      !Number.isSafeInteger(packet.latestSeq) || packet.latestSeq < 0 ||
      !Array.isArray(packet.messages) || packet.messages.length > 50 ||
      !packet.messages.every(validMessage)) throw new Error('Invalid history');
  let seq = 0;
  const ids = new Set();
  for (const message of packet.messages) {
    if (message.seq <= seq || message.seq > packet.latestSeq || ids.has(message.id)) throw new Error('Invalid history order');
    seq = message.seq; ids.add(message.id);
  }
  if (packet.messages.length && seq !== packet.latestSeq) throw new Error('Invalid history boundary');
  const restarted = serverId && serverId !== packet.serverId;
  serverId = packet.serverId; latestSeq = 0; seen.clear(); list.replaceChildren();
  for (const message of packet.messages) appendMessage(message);
  latestSeq = packet.latestSeq;
  if (!packet.messages.length) {
    const p = document.createElement('p'); p.id = 'empty-state'; p.className = 'empty-state';
    p.textContent = 'هنوز پیامی نیست؛ اولین پیام آزمایشی را شما بنویسید.';
    list.append(p);
  }
  ready = true; retries = 0; clearTimeout(historyTimer);
  setStatus('وصل هستید؛ آمادهٔ گفت‌وگو', 'online');
  if (!pending) {
    if (unknown.size) notice('ارسال قبلی هنوز نتیجهٔ قطعی ندارد؛ متن حفظ شده و خودکار دوباره فرستاده نمی‌شود.', true);
    else notice(restarted ? 'سرور دوباره شروع شده و تاریخچهٔ قبلی در حافظه نیست.' : 'آماده‌اید؛ پیام تازه بنویسید.');
  }
  updateControls();
}
function scheduleReconnect() {
  if (manualStop) return;
  if (retries >= 5) {
    manualStop = true; setStatus('اتصال برقرار نشد؛ دستی دوباره وارد شوید', 'offline');
    updateControls(); return;
  }
  const delay = Math.min(10000, 500 * 2 ** retries + Math.floor(Math.random() * 251));
  retries += 1;
  setStatus(`اتصال دوباره؛ تلاش ${numberFormat.format(retries)} از ۵`);
  reconnectTimer = setTimeout(connect, delay);
}
function connect() {
  if (manualStop) return;
  ready = false; clearTimeout(reconnectTimer); clearTimeout(historyTimer);
  setStatus('در حال اتصال…'); updateControls();
  const url = new URL('/chat', location.href);
  url.protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
  const current = new WebSocket(url);
  socket = current;
  historyTimer = setTimeout(() => {
    if (socket === current && !ready) current.close(1000, 'History timeout');
  }, 8000);
  current.addEventListener('open', () => {
    if (socket !== current || manualStop) return current.close(1000);
    current.send(JSON.stringify({ type: 'join', name: displayName }));
  });
  current.addEventListener('message', event => {
    if (socket !== current || manualStop) return;
    try {
      const packet = JSON.parse(event.data);
      if (packet.type === 'history') { snapshot(packet); return; }
      if (packet.type === 'message') {
        if (!ready || !validMessage(packet.message)) throw new Error('Invalid message');
        appendMessage(packet.message); return;
      }
      if (packet.type === 'presence') {
        if (!Number.isSafeInteger(packet.online) || packet.online < 0 || packet.online > 20) throw new Error('Invalid presence');
        onlineCount.textContent = numberFormat.format(packet.online); return;
      }
      if (packet.type === 'ack') {
        if (typeof packet.clientMessageId !== 'string' || typeof packet.messageId !== 'string' || !Number.isSafeInteger(packet.seq)) throw new Error('Invalid ack');
        if (pending?.id === packet.clientMessageId) {
          clearTimeout(pending.timer);
          if (textInput.value === pending.draft) textInput.value = '';
          pending = null; notice('سرور پیام را پذیرفت.'); updateControls();
          textCount.textContent = numberFormat.format([...textInput.value].length);
        } else if (unknown.delete(packet.clientMessageId) && !pending) notice('تأیید دیررس رسید؛ سرور پیام قبلی را پذیرفته بود.');
        return;
      }
      if (packet.type === 'error') {
        if (typeof packet.code !== 'string' || typeof packet.message !== 'string') throw new Error('Invalid error');
        if (pending && (!packet.clientMessageId || packet.clientMessageId === pending.id)) {
          clearTimeout(pending.timer); pending = null; updateControls();
        }
        notice(packet.message, true); return;
      }
      throw new Error('Unknown packet');
    } catch {
      notice('پاسخ سرور با قرارداد هماهنگ نیست؛ اتصال بسته شد.', true);
      manualStop = true; current.close(1000, 'Invalid server packet');
    }
  });
  current.addEventListener('error', () => {
    if (socket === current) setStatus('ارتباط برقرار نشد؛ نشانی، Origin و پراکسی را بررسی کنید', 'offline');
  });
  current.addEventListener('close', event => {
    if (socket !== current) return;
    clearTimeout(historyTimer); ready = false; onlineCount.textContent = '۰'; unknownPending();
    if ([1003, 1008, 1009].includes(event.code)) manualStop = true;
    if (manualStop) setStatus('قطع شده؛ برای ورود دوباره دکمه را بزنید', 'offline');
    else scheduleReconnect();
    updateControls();
  });
}
joinForm.addEventListener('submit', event => {
  event.preventDefault();
  if (!['http:', 'https:'].includes(location.protocol)) {
    notice('صفحه را از نشانی HTTP برنامه باز کنید؛ بازکردن مستقیم فایل HTML کافی نیست.', true); return;
  }
  const name = nickname.value.normalize('NFC').trim();
  if (!name.isWellFormed() || !name || [...name].length > 24 || encoder.encode(name).length > 96) {
    notice('نام آزمایشی را کوتاه‌تر، از ۱ تا ۲۴ نویسه، انتخاب کنید.', true); nickname.focus(); return;
  }
  manualStop = false; displayName = name; retries = 0; connect();
});
disconnectButton.addEventListener('click', () => {
  manualStop = true; ready = false;
  clearTimeout(reconnectTimer); clearTimeout(historyTimer); unknownPending();
  socket?.close(1000, 'User left'); setStatus('از گفت‌وگو خارج شدید'); updateControls();
});
textInput.addEventListener('input', () => {
  textCount.textContent = numberFormat.format([...textInput.value.normalize('NFC')].length);
});
messageForm.addEventListener('submit', event => {
  event.preventDefault();
  if (!ready || pending || socket?.readyState !== WebSocket.OPEN) return;
  const text = textInput.value.normalize('NFC').trim();
  if (!text.isWellFormed() || !text || [...text].length > 500 || encoder.encode(text).length > 2000) {
    notice('یک پیام کوتاه از ۱ تا ۵۰۰ نویسه و حداکثر ۲۰۰۰ بایت بنویسید.', true); return;
  }
  let id;
  try { id = createRequestId(); }
  catch { notice('مرورگر شناسهٔ تصادفی امن نمی‌سازد؛ از مرورگر تازه یا HTTPS استفاده کنید.', true); return; }
  const packet = JSON.stringify({ type: 'chat', clientMessageId: id, text });
  if (socket.bufferedAmount + encoder.encode(packet).length > 262144) {
    notice('صف ارسال شلوغ است؛ کمی صبر کنید. پیام فرستاده نشد.', true); return;
  }
  try { socket.send(packet); }
  catch { notice('ارسال آغاز نشد؛ متن شما حفظ شد.', true); return; }
  pending = { id, draft: textInput.value, timer: setTimeout(() => { unknownPending(); updateControls(); }, 8000) };
  notice('در صف ارسال است؛ منتظر تأیید سرور…'); updateControls();
});
textInput.addEventListener('keydown', event => {
  if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
    event.preventDefault(); messageForm.requestSubmit();
  }
});
window.addEventListener('pagehide', () => {
  manualStop = true; ready = false; clearTimeout(reconnectTimer); clearTimeout(historyTimer);
  if (pending) { clearTimeout(pending.timer); pending = null; }
  socket?.close(1000, 'Page hidden');
});
window.addEventListener('pageshow', event => {
  if (event.persisted) { setStatus('صفحه برگشت؛ برای اتصال دوباره وارد شوید'); updateControls(); }
});
updateControls();