Skip to main content

Classic Socket.io Pages (public/)

These pages are served by server.js and talk to the Socket.io control plane for live now-playing, chat, voting, and telemetry.

index.html — LOKLOK FM | Social Broadcast Network​

The main landing page and player.

  • Player wired to the live stream with a CRT overlay aesthetic.
  • Comments: socket.emit('send_comment', { name, text }) → new_comment events render live.
  • Vibe votes: socket.emit('interaction', { type: 'vibe_vote', vibe }).
  • Real-time now-playing via status.
  • Styling: Tailwind + Orbitron / Rajdhani / Share Tech Mono fonts.

index_remote_live.html — LOKLOK — Live Radio​

A remote live player with a wave canvas.

  • Amber/glass theme, Bricolage Grotesque / Inter / JetBrains Mono fonts.
  • Uses visualizer.js (Web Audio Analyser) to draw the waveform of the stream.
  • join_channel + status for now-playing.

chat.html — themed chat rooms​

Themed chat (historical PWA start page; the current installable PWA is the radio player at PWA).

  • Rooms via join { name, room }.
  • Messages: sendMessage supporting text, voice notes (data-URL audio), and images (data-URL).
  • Reactions: reaction { msgId, emoji, user } on any message.
  • User list (user_list), plus status now-playing in the sidebar.
  • Uses emoji-picker-element; font Plus Jakarta Sans; Socket.io 4.7.2.

lok.html — LOKLOK Studio | Broadcast Network​

Studio-focused page (font: Space Grotesk) — the operating desk entry point.

studio.html — LOKLOK STUDIO | Pro Live Injector​

Pro live-injection console:

  • Push buttons that trigger live injection events to the server.
  • On-air sign lights up while a live session is active.
  • Microphone pipeline: start_stream → audio_data chunks → stop_stream (the underlying live-audio path to the broadcast engine).
  • Tailwind + lucide icons.

social.html — Social Platform Studio​

Studio UI for the social platform (submit audio via file or URL, vote/react, approve/reject/re-process, force rotation sync, live rank board). See Social Platform.

dashboard.html — LOKLOK AI | Brain Dashboard​

Ops dashboard with Chart.js telemetry and a glassmorphism sidebar — listener stats, bandwidth, system health.

monitor.html — NETWORK OVERWATCH​

Broadcast monitoring:

  • Timeline track rendering the upcoming queue (timeline_update).
  • Stats from stats_update (listeners, bandwidth, history).
  • Tailwind + lucide; Orbitron / Rajdhani fonts; glass panels.

lab.html — Neural Telemetry Lab​

Research-style page (Chart.js + JetBrains Mono) for inspecting the neural / scheduling telemetry of the experimental engines.

app.js — shared client helper​

  • Channel listing + tuneIn.
  • join_channel on the active channel id.
  • status subscription.
  • 8-second refresh loop for data that is not event-driven.

visualizer.js — audio visualizer​

Canvas-driven Web Audio Analyser visualizer bound to the audio stream; powers the wave displays on the live pages.

Styling conventions​

  • Fonts: Orbitron / Rajdhani / Share Tech Mono / Space Grotesk / Bricolage Grotesque / Inter / JetBrains Mono / Plus Jakarta Sans across the pages.
  • Aesthetic: glassmorphism, CRT overlays, neon/amber accents — consistent with the LOKLOK brand.
  • All pages load Socket.io and expect it at the serving origin.