chat

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
@@ -145,3 +46,121 @@ document.querySelector('.chat-input-form').addEventListener('submit', event => {
     
 
 </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>