emerson/AliceClass
emerson
/
AliceClass
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update chat
Deploy / Deploy (push) Successful in 40s Details

This commit is contained in:
www-data 2025-03-27 09:59:15 -03:00
parent e28a164a5c
commit 756d2a98b2
3 changed files with 136 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
_includes/player.html
View File

@ -1,24 +1,18 @@
<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
muted
muted
></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">
<!-- <p><span class="username">{msg.nome}:</span> {msg.mensagem}</p> -->
</div>
<!-- Mensagens serão adicionadas aqui via JavaScript -->
</div>
<div class="chat-input">
<form on:submit|preventDefault={sendMessage} class="chat-input-form">
<input class="input chat-enter" placeholder="Converse com o chat aqui" bind:value={message} />
<form class="chat-input-form">
<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
console.log(user); // Isso vai exibir o valor do parâmetro 'user'
if (!streamUser) {
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');
.then(response => {
if (response.ok) {
console.log("Arquivo existe.");
playerOffElement.style.display = "none";
} else {
console.log("Arquivo não encontrado.");
videoElement.style.opacity = "0";
}
});
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',
'JotaChina', 'JotaJapão', 'JotaÍndia', 'JotaCoreia', 'JotaTailândia',
'JotaVietnã', 'JotaMalásia', 'JotaIndonésia', 'JotaFilipinas',
'JotaSingapura', 'JotaNepal', 'JotaCamboja', 'JotaMianmar',
'JotaLaos', 'JotaBangladesh', 'JotaSriLanka'
'Alice', 'Chapeleiro Maluco', 'Coelho Branco', 'Rainha de Copas',
'Gato de Cheshire', 'Lebre de Março', 'Lagarta', 'Dodo',
'Tweedledee', 'Tweedledum', 'Rainha Vermelha', 'Rei de Copas'
];
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
// Cria um objeto com os dados da mensagem
const msgData = {
nome: username,
mensagem: message
};
// Envia a mensagem como uma string JSON
socket.send(JSON.stringify(msgData));
// Limpa o campo de entrada de mensagem
document.querySelector('.chat-enter').value = '';
event.preventDefault();
const message = document.querySelector('.chat-enter').value;
const msgData = {
nome: username,
mensagem: message
};
fetch(`php/chat/send.php?user=${encodeURIComponent(streamUser)}`, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: 'mensagem=' + encodeURIComponent(JSON.stringify(msgData))
});
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>`;
// 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;
const newMessage = document.createElement('div');
newMessage.classList.add('chat-line');
newMessage.innerHTML = `<p><span class=\"username\">${msg.nome}:</span> ${msg.mensagem}</p>`;
chatLines.appendChild(newMessage);
chatLines.scrollTop = chatLines.scrollHeight;
}
// Event listener para quando o WebSocket abrir a conexão
socket.addEventListener('open', () => {
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>
document.querySelector('.chat-input-form').addEventListener('submit', sendMessage);
document.querySelector('#username-input').addEventListener('change', setCustomUsername);
</script>

35
php/chat/relay.php Normal file
View File

@ -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);
}
?>

11
php/chat/send.php Normal file
View File

@ -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);
}
}
?>