update chat

_includes/player.html

@@ -1,16 +1,10 @@
-<table id="temporary-table" style="display: none;">   
-        <tr>
-            <td>{{ include.user }}</td>
-        </tr>
-</table>
-
 <div class="live-container">
     <div class="player-container">
         <video
             class="player"
             data-dashjs-player
             {% if page.user %}
-            url="https://cast.alice.ufsj.edu.br/dash/{{page.user}}.mpd"
+            url="https://class.alice.ufsj.edu.br/dash/{{page.user}}.mpd"
             {% endif %}
             autoplay
             controls
@@ -18,7 +12,7 @@
         ></video>
 
         <div class="player-off">
-            <h1>Offlinee</h1>
+            <h1>Offline</h1>
         </div>
     </div>
 
@@ -30,158 +24,128 @@
                 </div>
                 <div class="chat-views">
                     <i class="fa-solid fa-users"></i>
-                    <!-- <h4>679 pessoas online</h4> -->
                 </div>
             </div>
 
+            <!-- Campo de nome do usuário -->
+            <div class="chat-username" style="margin-bottom: 10px;">
+                <label for="username-input">Seu nome:</label>
+                <input
+                    type="text"
+                    id="username-input"
+                    placeholder="Escolha um nome (ou deixe em branco)"
+                    style="width: 100%; padding: 5px; margin-top: 5px;"
+                />
+            </div>
+
             <div class="chat-lines">
-                <div class="chat-line">
+                <!-- Mensagens serão adicionadas aqui via JavaScript -->
-                    <!-- <p><span class="username">{msg.nome}:</span> {msg.mensagem}</p> -->
-                </div>
             </div>
 
             <div class="chat-input">
-                <form on:submit|preventDefault={sendMessage} class="chat-input-form">
+                <form class="chat-input-form">
-                    <input class="input chat-enter" placeholder="Converse com o chat aqui" bind:value={message} />
+                    <input class="input chat-enter" placeholder="Converse com o chat aqui" />
                     <input type="submit" hidden />
                 </form>
             </div>
         </div>
     </div>
-    
-
 </div>
 
 <script src="/assets/js/dash.all.min.js"></script>
 
 <script>
-    // Obter a string de query da URL
     const queryString = window.location.search;
-    // Criar um objeto URLSearchParams com a string de query
     const urlParams = new URLSearchParams(queryString);
 
+    // =====================
+    // Player da live
+    // =====================
+
+    let streamUser;
     {% if page.user %}
-    const user = "{{page.user}}";
+    streamUser = "{{page.user}}";
     {% else %}
-    const user = urlParams.get('user');
+    streamUser = urlParams.get('user');
     {% endif %}
 
-    // Exemplo de como usar o valor
+    if (!streamUser) {
-    console.log(user); // Isso vai exibir o valor do parâmetro 'user'
+        streamUser = "default"; // fallback para evitar erro
+    }
+
+    console.log("Usuário da live:", streamUser);
     const videoElement = document.querySelector('video');
     const playerOffElement = document.querySelector('.player-off');
-    const url = `https://cast.alice.ufsj.edu.br/dash/${user}.mpd`;
+    const url = `https://class.alice.ufsj.edu.br/dash/${streamUser}.mpd`;
     videoElement.src = url;
 
-    
-    
     fetch(url)
         .then(response => {
             if (response.ok) {
                 console.log("Arquivo existe.");
                 playerOffElement.style.display = "none";
-    
-              
             } else {
                 console.log("Arquivo não encontrado.");
-            //   Coloque o código para ocultar o vídeo aqui
                 videoElement.style.opacity = "0";
-              
             }
-      })
+        });
-    // URL do servidor WebSocket
-    const socket = new WebSocket('wss://cast.alice.ufsj.edu.br/chat/chat');
 
-    socket.addEventListener('open', () => {
+    // =====================
-    console.log('Conexão WebSocket aberta com sucesso!');
+    // Chat ao vivo
-});
+    // =====================
 
-// Adiciona um manipulador de eventos para lidar com a recepção de mensagens
-socket.addEventListener('message', (event) => {
-    console.log('Mensagem recebida do servidor:', event.data);
-});
-
-// Adiciona um manipulador de eventos para lidar com o fechamento da conexão
-socket.addEventListener('close', (event) => {
-    console.log('Conexão WebSocket fechada:', event.reason || 'Sem motivo específico');
-});
-
-// Adiciona um manipulador de eventos para lidar com erros
-socket.addEventListener('error', (event) => {
-    console.error('Erro no WebSocket:', event);
-});
     const nomesAlice = [
         'Alice', 'Chapeleiro Maluco', 'Coelho Branco', 'Rainha de Copas',
         'Gato de Cheshire', 'Lebre de Março', 'Lagarta', 'Dodo',
-        'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas',
+        'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas'
-        'JotaChina', 'JotaJapão', 'JotaÍndia', 'JotaCoreia', 'JotaTailândia', 
-        'JotaVietnã', 'JotaMalásia', 'JotaIndonésia', 'JotaFilipinas', 
-        'JotaSingapura', 'JotaNepal', 'JotaCamboja', 'JotaMianmar', 
-        'JotaLaos', 'JotaBangladesh', 'JotaSriLanka'
     ];
 
     function nomeAleatorio() {
         return nomesAlice[Math.floor(Math.random() * nomesAlice.length)];
     }
-    // Variáveis para armazenar o nome do usuário e a mensagem
+
     let username = nomeAleatorio();
-    let message = '';
 
-    // Função que envia a mensagem
+    function setCustomUsername() {
+        const customUsername = document.querySelector('#username-input').value.trim();
+        username = customUsername || nomeAleatorio();
+    }
+
+    const source = new EventSource(`php/chat/relay.php?user=${encodeURIComponent(streamUser)}`);
+
+    source.onmessage = function (event) {
+        const msg = JSON.parse(event.data);
+        addMessage(msg);
+    };
+
     function sendMessage(event) {
-      event.preventDefault(); // Previne o comportamento padrão do formulário
+        event.preventDefault();
 
-      // Cria um objeto com os dados da mensagem
+        const message = document.querySelector('.chat-enter').value;
         const msgData = {
             nome: username,
             mensagem: message
         };
 
-      // Envia a mensagem como uma string JSON
+        fetch(`php/chat/send.php?user=${encodeURIComponent(streamUser)}`, {
-      socket.send(JSON.stringify(msgData));
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body: 'mensagem=' + encodeURIComponent(JSON.stringify(msgData))
+        });
 
-      // Limpa o campo de entrada de mensagem
         document.querySelector('.chat-enter').value = '';
     }
 
-    // Função que adiciona uma nova linha de mensagem ao chat
     function addMessage(msg) {
-        console.log(msg);
-        
         const chatLines = document.querySelector('.chat-lines');
-        
-      // Cria o elemento da mensagem
         const newMessage = document.createElement('div');
         newMessage.classList.add('chat-line');
-      newMessage.innerHTML = `<p><span class="username">${msg.nome}:</span> ${msg.mensagem}</p>`;
+        newMessage.innerHTML = `<p><span class=\"username\">${msg.nome}:</span> ${msg.mensagem}</p>`;
 
-      // Adiciona a nova mensagem no final da lista de mensagens
         chatLines.appendChild(newMessage);
-    
-      // Rola o chat para baixo para mostrar a nova mensagem
         chatLines.scrollTop = chatLines.scrollHeight;
     }
 
-    // Event listener para quando o WebSocket abrir a conexão
+    document.querySelector('.chat-input-form').addEventListener('submit', sendMessage);
-    socket.addEventListener('open', () => {
+    document.querySelector('#username-input').addEventListener('change', setCustomUsername);
-      console.log('Conectado ao servidor WebSocket');
-    });
-    
-    // Event listener para quando uma mensagem é recebida do servidor
-    socket.addEventListener('message', event => {
-      // Parseia a mensagem recebida como JSON
-      const msg = JSON.parse(event.data);
-    
-      // Adiciona a mensagem ao chat
-      addMessage(msg);
-    });
-    
-    // Event listener para o envio de mensagem no formulário
-    document.querySelector('.chat-input-form').addEventListener('submit', event => {
-      // Captura o valor do input
-      message = document.querySelector('.chat-enter').value;
-    
-      // Chama a função que envia a mensagem
-      sendMessage(event);
-    });
 </script>

php/chat/relay.php

@@ -0,0 +1,35 @@
+<?php
+if (!isset($_GET['user'])) {
+    http_response_code(400);
+    exit("Missing user");
+}
+
+$user = preg_replace('/[^a-zA-Z0-9_-]/', '', $_GET['user']);
+header("Content-Type: text/event-stream");
+header("Cache-Control: no-cache");
+header("Connection: keep-alive");
+
+$tmp_file = sys_get_temp_dir() . "/relay_chat_{$user}.txt";
+
+if (!file_exists($tmp_file)) {
+    file_put_contents($tmp_file, '');
+}
+
+$last_modif = 0;
+
+while (true) {
+    clearstatcache();
+    $current_modif = filemtime($tmp_file);
+
+    if ($current_modif > $last_modif) {
+        $last_modif = $current_modif;
+        $data = file_get_contents($tmp_file);
+        echo "data: " . trim($data) . "\n\n";
+        ob_flush();
+        flush();
+    }
+
+    sleep(1);
+}
+?>
+

php/chat/send.php

@@ -0,0 +1,11 @@
+<?php
+if (isset($_POST['mensagem']) && isset($_GET['user'])) {
+    $mensagem = trim($_POST['mensagem']);
+    $user = preg_replace('/[^a-zA-Z0-9_-]/', '', $_GET['user']); // sanitiza o nome do usuário
+
+    if ($mensagem !== '') {
+        $tmp_file = sys_get_temp_dir() . "/relay_chat_{$user}.txt";
+        file_put_contents($tmp_file, $mensagem);
+    }
+}
+?>