@fuzionx/framework 0.1.45 → 0.1.47

package/cli/templates/make/app-ssr/views/default/pages/chat.html

@@ -0,0 +1,288 @@
+{% extends "layouts/main.html" %}
+{% block title %}{{ t(key="chat.page_title", default="Chat Demo") }} — FuzionX WebSocket{% endblock %}
+{% block description %}{{ t(key="chat.meta_desc", default="Live WebSocket chat demo powered by FuzionX WsHandler. Try the real-time messaging with user presence.") }}{% endblock %}
+{% block content %}
+
+<div class="container">
+  <!-- ── Join Screen ── -->
+  <div id="chat-join" class="chat-join-screen">
+    <div class="glass-card chat-join-card">
+      <div class="chat-join-icon">💬</div>
+      <h1 class="chat-join-title">WebSocket <span class="gradient-text">{{ t(key="chat.demo_title", default="Chat Demo") }}</span></h1>
+      <p class="chat-join-sub">{{ t(key="chat.demo_sub", default="Experience FuzionX real-time WebSocket in action.") }}<br>{{ t(key="chat.demo_tech", default="Built with") }} <code>WsHandler</code> + <code>FuzionXSocket</code> WASM client.</p>
+      <div class="form-group" style="margin-top:2rem;">
+        <input type="text" id="nickname-input" class="chat-nickname-input" placeholder="{{ t(key="chat.nickname_placeholder", default="Enter your nickname...") }}" maxlength="20" autocomplete="off">
+      </div>
+      <button id="join-btn" class="btn btn-hero-primary btn-full" onclick="joinChat()">
+        <span>{{ t(key="chat.btn_join", default="Join Chat") }}</span>
+      </button>
+      <div class="chat-join-tech">
+        <span class="feature-tag tag-ws">FuzionXSocket</span>
+        <span class="feature-tag tag-rust">WASM</span>
+        <span class="feature-tag tag-node">Auto ASP</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Chat Room ── -->
+  <div id="chat-room" class="chat-room" style="display:none;">
+    <div class="chat-layout">
+      <!-- Sidebar: User List -->
+      <aside class="chat-sidebar glass-card">
+        <div class="chat-sidebar-header">
+          <h3>{{ t(key="chat.online", default="Online") }} <span id="user-count" class="chat-user-count">0</span></h3>
+        </div>
+        <ul id="user-list" class="chat-user-list">
+        </ul>
+        <div class="chat-sidebar-footer">
+          <button class="btn btn-outline btn-full" onclick="leaveChat()" style="font-size:0.85rem;">{{ t(key="chat.btn_leave", default="Leave Chat") }}</button>
+        </div>
+      </aside>
+
+      <!-- Main: Messages -->
+      <div class="chat-main glass-card">
+        <div class="chat-messages-header">
+          <h3>💬 {{ t(key="chat.room_title", default="Chat Room") }}</h3>
+          <span id="connection-status" class="chat-status chat-status-connecting">{{ t(key="chat.connecting", default="connecting...") }}</span>
+        </div>
+        <div id="chat-messages" class="chat-messages">
+        </div>
+        <div id="typing-indicator" class="chat-typing" style="display:none;"></div>
+        <form id="chat-form" class="chat-input-form" onsubmit="sendMessage(event)">
+          <input type="text" id="message-input" class="chat-message-input" placeholder="{{ t(key="chat.msg_placeholder", default="Type a message...") }}" autocomplete="off" maxlength="500">
+          <button type="submit" class="btn btn-primary chat-send-btn">{{ t(key="chat.btn_send", default="Send") }}</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-content">
+      <span class="footer-brand">FuzionX</span>
+      <span class="footer-text">{{ t(key="chat.footer", default="Powered by WsHandler") }} — <a href="/features#websocket" style="color:var(--accent-solid);">{{ t(key="chat.footer_link", default="WebSocket Features") }}</a></span>
+    </div>
+  </div>
+</footer>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+let ws = null;
+let mySessionId = null;
+let myNickname = null;
+let typingTimeout = null;
+const JOIN_BTN_TEXT = '{{ t(key="chat.btn_join", default="Join Chat") }}';
+const ESC_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ESC_MAP[c]); }
+
+async function joinChat() {
+  const input = document.getElementById('nickname-input');
+  const name = (input.value || '').trim();
+  if (!name) { input.focus(); input.style.borderColor = '#e74c3c'; return; }
+  myNickname = name;
+  const btn = document.getElementById('join-btn');
+  btn.disabled = true;
+  btn.querySelector('span').textContent = '{{ t(key="chat.connecting", default="connecting...") }}';
+  await connectWS();
+}
+
+// 로그인 사용자 닉네임 자동 입력 (자동 참여 안 함)
+document.addEventListener('DOMContentLoaded', function() {
+  {% if auth.user %}
+  const userName = '{{ auth.user.name | default(value="") }}';
+  if (userName) {
+    document.getElementById('nickname-input').value = userName;
+  }
+  {% endif %}
+});
+
+async function connectWS() {
+  const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const url = `${wsProto}//${location.host}/ws/chat`;
+
+  // WASM 로드 대기
+  await window._aspReady;
+
+  // FuzionXSocket이 아직 없으면 직접 WASM 로드
+  if (!window.FuzionXSocket) {
+    try {
+      const _v = Date.now();
+      const mod = await import(`/wasm/fuzionx_client_wasm.js?v=${_v}`);
+      await mod.default({ module_or_path: `/wasm/fuzionx_client_wasm_bg.wasm?v=${_v}` });
+      window.FuzionXSocket = mod.FuzionXSocket;
+    } catch (e) {
+      console.error('[Chat] WASM load failed:', e);
+      resetJoinBtn();
+      return;
+    }
+  }
+
+  ws = new window.FuzionXSocket(url, '{{ config.bridge.asp.master_secret | default(value="") }}', {{ config.bridge.asp.enabled | default(value="false") }} || {{ config.app.asp.enabled | default(value="false") }});
+
+  ws.on('connect', () => {
+    setStatus('connected', window.aspEnabled ? 'connected (ASP 🔐)' : 'connected');
+  });
+
+    ws.on('message', (raw) => {
+    console.log('[Chat] raw:', JSON.stringify(raw));
+  });
+
+  ws.on('chat_ready', (data) => {
+    if (!data || !data.sessionId) return;
+    mySessionId = data.sessionId;
+
+    // 화면 전환
+    document.getElementById('chat-join').style.display = 'none';
+    document.getElementById('chat-room').style.display = 'block';
+    document.getElementById('message-input').focus();
+    appendSystemMessage(`${myNickname} 접속`);
+
+    // 서버에 사용자 정보 전송 — 응답으로 userlist가 포함됨
+    ws.send('setUser', {
+      name: myNickname,
+      {% if auth.user %}
+      email: '{{ auth.user.email | default(value="") }}',
+      id: {{ auth.user.id | default(value="0") }},
+      {% endif %}
+    });
+  });
+
+  ws.on('userlist', (data) => { renderUserList(data); });
+  ws.on('user_joined', (data) => { 
+    addUserToList(data); 
+    appendSystemMessage(`${data.name || 'unknown'} 입장`);
+  });
+  ws.on('user_left', (data) => {
+    removeUserFromList(data);
+    appendSystemMessage(`${data.name || 'unknown'} 퇴장`);
+  });
+  ws.on('system', (data) => { appendSystemMessage(data.text); });
+  ws.on('typing', (data) => { showTyping(data.user); });
+  ws.on('broadcast', (data) => { appendSystemMessage(`📢 ${data.user}: ${data.text}`); });
+  ws.on('chat_msg', (data) => {
+    appendMessage({ sender: data.user, message: data.text, timestamp: data.timestamp }, false);
+  });
+
+  ws.on('disconnect', () => { setStatus('disconnected', 'disconnected'); });
+  ws.on('reconnect', () => { setStatus('connecting', 'reconnecting...'); });
+  ws.on('error', () => { setStatus('error', 'connection error'); resetJoinBtn(); });
+
+  ws.connect();
+}
+
+function renderUserList(data) {
+  const list = document.getElementById('user-list');
+  const count = document.getElementById('user-count');
+  count.textContent = data.count || 0;
+  list.innerHTML = '';
+  (data.users || []).forEach(user => {
+    list.appendChild(_createUserLi(user));
+  });
+}
+
+function addUserToList(user) {
+  const list = document.getElementById('user-list');
+  const count = document.getElementById('user-count');
+  if (list.querySelector(`[data-sid="${user.sid}"]`)) return;
+  list.appendChild(_createUserLi(user));
+  count.textContent = list.children.length;
+}
+
+function removeUserFromList(data) {
+  const list = document.getElementById('user-list');
+  const count = document.getElementById('user-count');
+  const el = list.querySelector(`[data-sid="${data.sid}"]`);
+  if (el) el.remove();
+  count.textContent = list.children.length;
+}
+
+function _createUserLi(user) {
+  const li = document.createElement('li');
+  const isMe = mySessionId && mySessionId === user.sid;
+  li.className = 'chat-user-item' + (isMe ? ' is-me' : '');
+  li.setAttribute('data-sid', user.sid);
+  li.innerHTML = '<span class="chat-user-dot"></span><span class="chat-user-name">' + escapeHtml(user.name) + '</span>' + (isMe ? '<span class="chat-user-me">you</span>' : '');
+  return li;
+}
+
+function appendMessage(data, isMe) {
+  const container = document.getElementById('chat-messages');
+  const wrapper = document.createElement('div');
+  wrapper.className = 'chat-msg ' + (isMe ? 'chat-msg-me' : 'chat-msg-other');
+  const time = data.timestamp ? new Date(data.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+  wrapper.innerHTML = '<div class="chat-msg-bubble">' +
+    (!isMe ? '<span class="chat-msg-sender">' + escapeHtml(data.sender || '') + '</span>' : '') +
+    '<span class="chat-msg-text">' + escapeHtml(data.message || '') + '</span>' +
+    '<span class="chat-msg-time">' + time + '</span></div>';
+  container.appendChild(wrapper);
+  container.scrollTop = container.scrollHeight;
+}
+
+function appendSystemMessage(message) {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'chat-msg-system';
+  div.textContent = message;
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+}
+
+function showTyping(user) {
+  const indicator = document.getElementById('typing-indicator');
+  indicator.textContent = user + ' {{ t(key="chat.typing", default="is typing...") }}';
+  indicator.style.display = 'block';
+  clearTimeout(typingTimeout);
+  typingTimeout = setTimeout(() => { indicator.style.display = 'none'; }, 2000);
+}
+
+function sendMessage(e) {
+  e.preventDefault();
+  const input = document.getElementById('message-input');
+  const text = input.value.trim();
+  if (!text || !ws || !ws.is_connected()) return;
+  ws.send('message', { text });
+  appendMessage({ sender: myNickname, message: text, timestamp: Date.now() }, true);
+  input.value = '';
+  input.focus();
+}
+
+function leaveChat() {
+  if (ws) ws.disconnect();
+  ws = null; mySessionId = null;
+  document.getElementById('chat-room').style.display = 'none';
+  document.getElementById('chat-join').style.display = '';
+  document.getElementById('chat-messages').innerHTML = '';
+  resetJoinBtn();
+}
+
+function resetJoinBtn() {
+  const btn = document.getElementById('join-btn');
+  btn.disabled = false;
+  btn.querySelector('span').textContent = JOIN_BTN_TEXT;
+}
+
+function setStatus(cls, text) {
+  const el = document.getElementById('connection-status');
+  if (!el) return;
+  el.className = 'chat-status chat-status-' + cls;
+  el.textContent = text;
+}
+
+// Enter key + typing indicator
+document.getElementById('nickname-input').addEventListener('keydown', e => { if (e.key === 'Enter') joinChat(); });
+document.getElementById('message-input').addEventListener('input', function() {
+  if (!ws || !ws.is_connected()) return;
+  const now = Date.now();
+  if (!this._lastTyping || now - this._lastTyping > 1500) {
+    ws.send('typing', {});
+    this._lastTyping = now;
+  }
+});
+</script>
+{% endblock %}
+
+