<!-- 1. O Navegador envia o pedido de Upgrade -->
GET /chat HTTP/1.1
Host: api.seusite.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
 
<!-- 2. O Servidor aceita e comuta o protocolo -->
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

<div class="wzw-chat-box">
    <div class="chat-header">
        <h3>💬 Sala de Bate-Papo (WebSocket)</h3>
        <span id="chatStatus" class="status-offline">Desconectado</span>
    </div>
 
    <!-- Painel onde as mensagens aparecem em cascata -->
    <div id="chatMessages" class="chat-messages"></div>
 
    <!-- Formulário de Envio -->
    <form id="chatForm" class="chat-input-area">
        <input 
            type="text" 
            id="msgInput" 
            placeholder="Digite sua mensagem e pressione Enter..." 
            autocomplete="off" 
            required>
        <button type="submit" id="btnEnviar" class="btn-send">Enviar</button>
    </form>
</div>

.wzw-chat-box {
    max-width: 580px;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
    color: #f8fafc;
}
 
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #1e293b;
    border-bottom: 1px solid #334155;
}
 
.status-online { color: #10b981; font-weight: bold; font-size: 0.85rem; }
.status-offline { color: #ef4444; font-weight: bold; font-size: 0.85rem; }
 
.chat-messages {
    height: 320px;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #0b1120;
}
 
/* Balões de Conversa */
.msg-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
}
 
.msg-me {
    align-self: flex-end;
    background-color: #2563eb;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}
 
.msg-other {
    align-self: flex-start;
    background-color: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
    border-bottom-left-radius: 2px;
}
 
.chat-input-area {
    display: flex;
    padding: 12px;
    background-color: #1e293b;
    gap: 8px;
}
 
.chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #fff;
    outline: none;
}
 
.chat-input-area input:focus {
    border-color: #38bdf8;
}
 
.btn-send {
    padding: 10px 18px;
    background-color: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

// Código JavaScript do Chat
const statusEl = document.getElementById('chatStatus');
const messagesEl = document.getElementById('chatMessages');
const formEl = document.getElementById('chatForm');
const inputEl = document.getElementById('msgInput');
 
// 1. Conexão ao servidor de Echo público para demonstração imediata
// (Em produção, aponte para: 'wss://seu-servidor.com/ws')
const socket = new WebSocket('wss://echo.websocket.events');
 
// 2. Quando a conexão é confirmada
socket.onopen = () => {
    statusEl.className = 'status-online';
    statusEl.textContent = '● Conectado (Full-Duplex)';
    adicionarMensagem('Sistema', 'Conectado à sala em tempo real!', 'msg-other');
};
 
// 3. Recebimento de mensagens vindas do servidor
socket.onmessage = (event) => {
    adicionarMensagem('Servidor Echo', event.data, 'msg-other');
};
 
// 4. Tratamento de encerramento de conexão
socket.onclose = () => {
    statusEl.className = 'status-offline';
    statusEl.textContent = '○ Conexão Encerrada';
};
 
// 5. Envio de mensagem pelo usuário
formEl.addEventListener('submit', (e) => {
    e.preventDefault();
    const texto = inputEl.value.trim();
 
    if (texto && socket.readyState === WebSocket.OPEN) {
        // Envia o dado pelo canal TCP aberto
        socket.send(texto);
        
        // Exibe no histórico local
        adicionarMensagem('Você', texto, 'msg-me');
        inputEl.value = '';
    }
});
 
function adicionarMensagem(autor, texto, classe) {
    const div = document.createElement('div');
    div.className = `msg-bubble ${classe}`;
    div.innerHTML = `${autor}: ${texto}`;
    messagesEl.appendChild(div);
    messagesEl.scrollTop = messagesEl.scrollHeight; // Auto-scroll para a última mensagem
}