chat
SSH Build / Deploy (push) Successful in 9s
Details
SSH Build / Deploy (push) Successful in 9s
Details
This commit is contained in:
emerson
parent
49fa605628
commit
632cfeeb86
219
pages/live.html
219
pages/live.html
|
|
@ -2,105 +2,6 @@
|
|||
layout: default
|
||||
permalink: /live.html
|
||||
---
|
||||
|
||||
<script src="/assets/js/dash.all.min.js">
|
||||
// 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);
|
||||
|
||||
// Obter o valor do parâmetro 'user'
|
||||
const user = urlParams.get('user');
|
||||
|
||||
// Exemplo de como usar o valor
|
||||
console.log(user); // Isso vai exibir o valor do parâmetro 'user'
|
||||
const videoElement = document.querySelector('video');
|
||||
const playerOffElement = document.querySelector('.player-off');
|
||||
const url = `https://cast.alice.ufsj.edu.br/dash/${user}.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('ws://alice.ufsj.edu.br:8081/chat');
|
||||
|
||||
// Variáveis para armazenar o nome do usuário e a mensagem
|
||||
let username = prompt('Qual é o seu nome?');
|
||||
let message = '';
|
||||
|
||||
// Função que envia a mensagem
|
||||
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 = '';
|
||||
}
|
||||
|
||||
// Função que adiciona uma nova linha de mensagem ao chat
|
||||
function addMessage(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;
|
||||
}
|
||||
|
||||
// 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>
|
||||
|
||||
<div class="live-container">
|
||||
<div class="player-container">
|
||||
<video
|
||||
|
|
@ -144,4 +45,122 @@ document.querySelector('.chat-input-form').addEventListener('submit', event => {
|
|||
</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);
|
||||
|
||||
// Obter o valor do parâmetro 'user'
|
||||
const user = urlParams.get('user');
|
||||
|
||||
// Exemplo de como usar o valor
|
||||
console.log(user); // Isso vai exibir o valor do parâmetro 'user'
|
||||
const videoElement = document.querySelector('video');
|
||||
const playerOffElement = document.querySelector('.player-off');
|
||||
const url = `https://cast.alice.ufsj.edu.br/dash/${user}.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');
|
||||
|
||||
socket.addEventListener('open', () => {
|
||||
console.log('Conexão WebSocket aberta com sucesso!');
|
||||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
// Variáveis para armazenar o nome do usuário e a mensagem
|
||||
let username = prompt('Qual é o seu nome?');
|
||||
let message = '';
|
||||
|
||||
// Função que envia a mensagem
|
||||
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 = '';
|
||||
}
|
||||
|
||||
// Função que adiciona uma nova linha de mensagem ao chat
|
||||
function addMessage(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;
|
||||
}
|
||||
|
||||
// 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>
|
||||
Loading…
Reference in New Issue