add chat
SSH Build / Deploy (push) Successful in 11s
Details
SSH Build / Deploy (push) Successful in 11s
Details
This commit is contained in:
emerson
parent
7902e22c64
commit
7f06081026
|
|
@ -1,6 +1,6 @@
|
|||
<div class="SideBar full background is-flex is-flex-direction-column">
|
||||
<div class="SideBar ">
|
||||
|
||||
<div class="top-sidebar is-flex">
|
||||
<div class="top-sidebar">
|
||||
<img
|
||||
src="{{ site.baseurl }}/assets/images/AliceClassIcon.png"
|
||||
class="image logo"
|
||||
|
|
|
|||
|
|
@ -69,20 +69,23 @@ h1, h2, h3, h4, h5, h6 {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
padding: 30px 25px;
|
||||
}
|
||||
|
||||
.page-sidebar{
|
||||
width: 100px;
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
margin: 0 25px;
|
||||
|
||||
|
||||
}
|
||||
.page-content{
|
||||
width: 100px;
|
||||
|
||||
background-color: var(--tertiary-color);
|
||||
flex-grow: 10;
|
||||
margin: 0 25px;
|
||||
margin: 0 50px;
|
||||
border-radius: 30px;
|
||||
|
||||
box-shadow: -10px 5px 15px var(--primary-color);
|
||||
|
|
@ -93,14 +96,13 @@ h1, h2, h3, h4, h5, h6 {
|
|||
.SideBar{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
|
||||
.SideBar .top-sidebar{
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: start;
|
||||
}
|
||||
|
|
@ -111,15 +113,12 @@ h1, h2, h3, h4, h5, h6 {
|
|||
|
||||
.SideBar .button-sidebar{
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.SideBar .image{
|
||||
width: 90%;
|
||||
width: 60%;
|
||||
height: auto;
|
||||
margin: 30px 0px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.menu{
|
||||
|
|
|
|||
207
pages/live.html
207
pages/live.html
|
|
@ -6,25 +6,58 @@ permalink: /live.html
|
|||
<script src="/assets/js/dash.all.min.js"></script>
|
||||
|
||||
|
||||
<div class="player-container">
|
||||
<video
|
||||
class="player"
|
||||
data-dashjs-player
|
||||
autoplay
|
||||
controls
|
||||
muted
|
||||
></video>
|
||||
|
||||
<div class="player-off">
|
||||
<h1>Offline</h1>
|
||||
<div class="live-container">
|
||||
<div class="player-container">
|
||||
<video
|
||||
class="player"
|
||||
data-dashjs-player
|
||||
autoplay
|
||||
controls
|
||||
muted
|
||||
></video>
|
||||
|
||||
<div class="player-off">
|
||||
<h1>Offlinee</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat">
|
||||
<div class="chat-container">
|
||||
<div class="chat-info">
|
||||
<div>
|
||||
<h1>Live chat</h1>
|
||||
</div>
|
||||
<div class="chat-views">
|
||||
<i class="fa-solid fa-users"></i>
|
||||
<!-- <h4>679 pessoas online</h4> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-lines">
|
||||
<div class="chat-line">
|
||||
<!-- <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">
|
||||
<input class="input chat-enter" placeholder="Converse com o chat aqui" bind:value={message} />
|
||||
<input type="submit" hidden />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.player-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
|
||||
flex-grow: 10;
|
||||
}
|
||||
|
||||
.player {
|
||||
|
|
@ -62,6 +95,90 @@ permalink: /live.html
|
|||
video::-webkit-media-controls-play-button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.live-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin: 15px;
|
||||
background-color: #0b1a33;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #1a2b4d;
|
||||
}
|
||||
|
||||
.chat h1, .chat h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-lines {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background-color: #0b1a33;
|
||||
}
|
||||
|
||||
.chat-line {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chat-line p {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bold;
|
||||
color: #4a90e2;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 10px;
|
||||
border-top: 1px solid #1a2b4d;
|
||||
}
|
||||
|
||||
.chat-input-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-enter {
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #1a2b4d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chat-enter:focus {
|
||||
outline: none;
|
||||
background-color: #243b65;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -98,4 +215,68 @@ permalink: /live.html
|
|||
|
||||
}
|
||||
})
|
||||
|
||||
// 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>
|
||||
Loading…
Reference in New Issue