Problema ao Enviar Mensagens em Chat Básico de Conexão entre Profissionais e Clientes
11/01/2025
0
Olá a todos,
Recentemente, criei um chat bem básico que conecta profissionais e clientes em busca de serviços. O desenvolvimento foi auxiliado por uma IA, mas estou enfrentando um problema ao enviar mensagens.
Problema:
Quando aperto o botão "Enviar", a mensagem não aparece na caixa de diálogo. As mensagens ficam apenas na caixa de texto e não são enviadas ou exibidas no chat.
Configuração:
Estou utilizando Node.jscom Express e Socket.iopara o servidor, e HTML, CSS, e JavaScript para o frontend. Aqui está um resumo do meu código:
Servidor (server.js):
javascript
const express = require(''express'');
const http = require(''http'');
const socketIo = require(''socket.io'');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on(''connection'', (socket) => {
console.log(''Novo cliente conectado'');
socket.on(''join'', ({ name, neighborhood }) => {
socket.join(''chat-room'');
io.to(''chat-room'').emit(''message'', { user: ''admin'', text: `$ do bairro $ entrou no chat.` });
});
socket.on(''sendMessage'', (message, callback) => {
console.log(''Mensagem recebida no servidor:'', message);
io.to(''chat-room'').emit(''message'', { user: socket.id, text: message });
callback();
});
socket.on(''disconnect'', () => {
console.log(''Cliente desconectado'');
io.to(''chat-room'').emit(''message'', { user: ''admin'', text: ''Um usuário saiu do chat.'' });
});
});
server.listen(5000, () => console.log(''Servidor rodando na porta 5000''));
Cliente (cliente/scripts.js):
javascript
const socket = io(''http://localhost:5000'');
function startChat() {
const name = document.getElementById(''name'').value;
const neighborhood = document.getElementById(''neighborhood'').value;
if (name && neighborhood) {
socket.emit(''join'', { name, neighborhood });
document.getElementById(''user-form'').classList.add(''hidden'');
document.getElementById(''chat'').classList.remove(''hidden'');
socket.on(''message'', (message) => {
document.getElementById(''messages'').innerHTML += `<div><strong>${message.user}:</strong> ${message.text}</div>`;
});
}
}
function sendMessage() {
const message = document.getElementById(''message'').value;
if (message.trim()) {
socket.emit(''sendMessage'', message, () => {
document.getElementById(''message'').value = '''';
});
}
}
HTML do Cliente (cliente/index.html):
html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Cliente</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script defer src="scripts.js"></script>
</head>
<body>
<div class="chat-container">
<h2>Bem-vindo ao Chat</h2>
<form id="user-form">
<label for="name">Nome:</label>
<input type="text" id="name" name="name" required>
<label for="neighborhood">Bairro:</label>
<input type="text" id="neighborhood" name="neighborhood" required>
<button type="button" onclick="startChat()">Próximo</button>
</form>
<div id="chat" class="hidden">
<div id="messages"></div>
<input type="text" id="message" placeholder="Digite sua mensagem...">
<button type="button" onclick="sendMessage()">Enviar</button>
</div>
</div>
</body>
</html>
O que já tentei:
Verifiquei os logs no console do navegador e no terminal do servidor.
Adicionei logs console.log para depurar o fluxo de mensagens.
Qualquer ajuda ou sugestão sobre o que pode estar errado e como corrigir este problema seria muito apreciada. Obrigado!
Recentemente, criei um chat bem básico que conecta profissionais e clientes em busca de serviços. O desenvolvimento foi auxiliado por uma IA, mas estou enfrentando um problema ao enviar mensagens.
Problema:
Quando aperto o botão "Enviar", a mensagem não aparece na caixa de diálogo. As mensagens ficam apenas na caixa de texto e não são enviadas ou exibidas no chat.
Configuração:
Estou utilizando Node.jscom Express e Socket.iopara o servidor, e HTML, CSS, e JavaScript para o frontend. Aqui está um resumo do meu código:
Servidor (server.js):
javascript
const express = require(''express'');
const http = require(''http'');
const socketIo = require(''socket.io'');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on(''connection'', (socket) => {
console.log(''Novo cliente conectado'');
socket.on(''join'', ({ name, neighborhood }) => {
socket.join(''chat-room'');
io.to(''chat-room'').emit(''message'', { user: ''admin'', text: `$ do bairro $ entrou no chat.` });
});
socket.on(''sendMessage'', (message, callback) => {
console.log(''Mensagem recebida no servidor:'', message);
io.to(''chat-room'').emit(''message'', { user: socket.id, text: message });
callback();
});
socket.on(''disconnect'', () => {
console.log(''Cliente desconectado'');
io.to(''chat-room'').emit(''message'', { user: ''admin'', text: ''Um usuário saiu do chat.'' });
});
});
server.listen(5000, () => console.log(''Servidor rodando na porta 5000''));
Cliente (cliente/scripts.js):
javascript
const socket = io(''http://localhost:5000'');
function startChat() {
const name = document.getElementById(''name'').value;
const neighborhood = document.getElementById(''neighborhood'').value;
if (name && neighborhood) {
socket.emit(''join'', { name, neighborhood });
document.getElementById(''user-form'').classList.add(''hidden'');
document.getElementById(''chat'').classList.remove(''hidden'');
socket.on(''message'', (message) => {
document.getElementById(''messages'').innerHTML += `<div><strong>${message.user}:</strong> ${message.text}</div>`;
});
}
}
function sendMessage() {
const message = document.getElementById(''message'').value;
if (message.trim()) {
socket.emit(''sendMessage'', message, () => {
document.getElementById(''message'').value = '''';
});
}
}
HTML do Cliente (cliente/index.html):
html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Cliente</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script defer src="scripts.js"></script>
</head>
<body>
<div class="chat-container">
<h2>Bem-vindo ao Chat</h2>
<form id="user-form">
<label for="name">Nome:</label>
<input type="text" id="name" name="name" required>
<label for="neighborhood">Bairro:</label>
<input type="text" id="neighborhood" name="neighborhood" required>
<button type="button" onclick="startChat()">Próximo</button>
</form>
<div id="chat" class="hidden">
<div id="messages"></div>
<input type="text" id="message" placeholder="Digite sua mensagem...">
<button type="button" onclick="sendMessage()">Enviar</button>
</div>
</div>
</body>
</html>
O que já tentei:
Verifiquei os logs no console do navegador e no terminal do servidor.
Adicionei logs console.log para depurar o fluxo de mensagens.
Qualquer ajuda ou sugestão sobre o que pode estar errado e como corrigir este problema seria muito apreciada. Obrigado!
Davi Nascimento
Curtir tópico
+ 0
Responder
Posts
13/01/2025
Davi Nascimento
ninguem fala nada nesse carai
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)