Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

248
Visualizações
Cómo mostrar que alguien está escribiendo en socket.io

Estoy creando una aplicación de chat y quería saber cómo mostraría que alguien está escribiendo. El código completo se puede encontrar aquí . Este es el código que permite que el chat funcione.

 const chatForm = document.getElementById('chat-form'); const chatMessages = document.querySelector('.chat-messages'); const roomName = document.getElementById('room-name'); const userList = document.getElementById('users'); // Get username and room from URL const { username, room } = Qs.parse(location.search, { ignoreQueryPrefix: true, }); console.log({username, room}) const socket = io(); // Join chatroom socket.emit('joinRoom', { username, room }); // Get room and users socket.on('roomUsers', ({ room, users }) => { outputRoomName(room); outputUsers(users); }); // Message from server socket.on('message', (message) => { console.log(message); outputMessage(message); // Scroll down chatMessages.scrollTop = chatMessages.scrollHeight; }); // Message submit chatForm.addEventListener('submit', (e) => { e.preventDefault(); // Get message text let msg = e.target.elements.msg.value; msg = msg.trim(); if (!msg) { return false; } // Emit message to server socket.emit('chatMessage', msg); // Clear input e.target.elements.msg.value = ''; e.target.elements.msg.focus(); }); // Output message to DOM function outputMessage(message) { const div = document.createElement('div'); div.classList.add('message'); const p = document.createElement('p'); p.classList.add('meta'); p.innerText = message.username; p.innerHTML += `<span>${message.time}</span>`; div.appendChild(p); const para = document.createElement('p'); para.classList.add('text'); para.innerText = message.text; div.appendChild(para); document.querySelector('.chat-messages').appendChild(div); } // Add room name to DOM function outputRoomName(room) { roomName.innerText = room; } // Add users to DOM function outputUsers(users) { console.log({users}) userList.innerHTML = ''; users.forEach((user) => { const li = document.createElement('li'); li.innerText = user.username; userList.appendChild(li); }); } //Prompt the user before leave chat room document.getElementById('leave-btn').addEventListener('click', () => { const leaveRoom = confirm('Are you sure you want to leave the chatroom?'); if (leaveRoom) { window.location = '../index.html'; } else { } });
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Cuando el usuario se enfoca en el campo de entrada de chat y el valor no está en blanco:
socket.emit('isChatting', 'user is chatting');

Cuando el usuario perdió el foco en el campo de entrada de chat
socket.emit('isChatting', 'user is not chatting');

 const chatForm = document.getElementById('chat-form'); const chatMessages = document.querySelector('.chat-messages'); const roomName = document.getElementById('room-name'); const userList = document.getElementById('users'); // Get username and room from URL const { username, room } = Qs.parse(location.search, { ignoreQueryPrefix: true, }); console.log({username, room}) const socket = io(); // Join chatroom socket.emit('joinRoom', { username, room }); // Get room and users socket.on('roomUsers', ({ room, users }) => { outputRoomName(room); outputUsers(users); }); // Message from server socket.on('message', (message) => { console.log(message); outputMessage(message); // Scroll down chatMessages.scrollTop = chatMessages.scrollHeight; }); chatForm.addEventListener('focus', (event) => { socket.emit('isChatting', 'user is chatting'); }); chatForm.addEventListener('blur', (event) => { socket.emit('isChatting', 'user is not chatting'); }); // Message submit chatForm.addEventListener('submit', (e) => { e.preventDefault(); // Get message text let msg = e.target.elements.msg.value; msg = msg.trim(); if (!msg) { return false; } // Emit message to server socket.emit('chatMessage', msg); // Clear input e.target.elements.msg.value = ''; e.target.elements.msg.focus(); }); // Output message to DOM function outputMessage(message) { const div = document.createElement('div'); div.classList.add('message'); const p = document.createElement('p'); p.classList.add('meta'); p.innerText = message.username; p.innerHTML += `<span>${message.time}</span>`; div.appendChild(p); const para = document.createElement('p'); para.classList.add('text'); para.innerText = message.text; div.appendChild(para); document.querySelector('.chat-messages').appendChild(div); } // Add room name to DOM function outputRoomName(room) { roomName.innerText = room; } // Add users to DOM function outputUsers(users) { console.log({users}) userList.innerHTML = ''; users.forEach((user) => { const li = document.createElement('li'); li.innerText = user.username; userList.appendChild(li); }); } //Prompt the user before leave chat room document.getElementById('leave-btn').addEventListener('click', () => { const leaveRoom = confirm('Are you sure you want to leave the chatroom?'); if (leaveRoom) { window.location = '../index.html'; } else { } });
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda