es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Aplicación de chat – Socket.io – ¿Cómo puedo mostrar el mensaje a otros usuarios?

23 Jul, 2023 Programación

Estoy construyendo esta aplicación de chat para un proyecto escolar y seguí múltiples tutoriales al mismo tiempo, eso es lo que me llevó a este código desordenado con el que estoy atascado.
En este punto, cuando un usuario escribe un mensaje y lo envía, el mensaje se muestra solo para él pero no para los demás.
Entonces, ¿cómo hago para que el mensaje se muestre para todos? (nota: quiero usar una clase CSS diferente para los mensajes recibidos).

Código del lado del cliente:

const socket = io('ws://localhost:8080');
const sendBtn = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const messagesContainer = document.getElementById('messagesContainer');
const chatBigContainer = document.getElementById('chatBigContainer');

sendBtn.addEventListener('click', () => {
    if (messageInput.value === "") {
        return;
    } else {
        const text = messageInput.value;
        socket.emit('message', text);
        const divEl = document.createElement('div');
        divEl.className = "your-message";
        messagesContainer.appendChild(divEl);
        const labelEl = document.createElement('label');
        labelEl.innerHTML = "You";
        divEl.appendChild(labelEl);
        let messageSent = document.createElement('p');
        messageSent.innerHTML = text;
        divEl.appendChild(messageSent);

        messageInput.value = "";
    }
});

Código del lado del servidor:

const http = require('http').createServer();

const io = require('socket.io')(http, {
    cors: { origin: "*" }
});

io.on('connection', (socket) => {
    console.log('a user connected');

    socket.on('message', (message) => {
        console.log(message);
        socket.broadcast.emit('message', `${message}`);
    });
});

http.listen(8080, () => console.log('listening on http://localhost:8080'));
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que el mensaje se muestre a todos, es necesario emitir el mensaje desde el servidor a todos los clientes. Actualmente, el mensaje solo se emite al servidor y se difunde a los demás clientes.

    Para emitir el mensaje a todos los clientes, puedes cambiar la siguiente línea en tu código del lado del servidor:

    socket.broadcast.emit('message', `${message}`);

    a

    io.emit('message', `${message}`);

    Esto emitirá el mensaje a todos los sockets conectados.

    Para utilizar una clase CSS diferente para los mensajes recibidos, puedes agregar una declaración condicional en el código del lado del cliente que verifique la etiqueta del mensaje. Si la etiqueta es “Tú”, entonces se puede utilizar la clase “your-message”, en caso contrario, se utilizará una clase diferente para los mensajes recibidos. Aquí tienes un ejemplo de cómo puedes hacer esto:

    socket.on('message', (message) => {
  const divEl = document.createElement('div');
  let label = "mensaje recibido"; // etiqueta por defecto

  // Verificar si el mensaje fue enviado por el usuario
  if (message.startsWith("Tú:")) {
    label = "Tú";
    divEl.className = "your-message";
    message = message.slice(4); // Eliminar la etiqueta "Tú:" del mensaje
  } else {
    divEl.className = "received-message";
  }

  const labelEl = document.createElement('label');
  labelEl.innerHTML = label;
  divEl.appendChild(labelEl);

  const messageEl = document.createElement('p');
  messageEl.innerHTML = message;
  divEl.appendChild(messageEl);

  messagesContainer.appendChild(divEl);
});

    En este ejemplo, primero creamos una etiqueta predeterminada para todos los mensajes. Luego verificamos si el mensaje comienza con “Tú:”, lo cual indica que el mensaje fue enviado por el usuario. En ese caso, cambiamos la etiqueta a “Tú” y aplicamos la clase “your-message” al mensaje. También eliminamos la etiqueta “Tú:” del texto del mensaje. Si el mensaje no fue enviado por el usuario, aplicamos una clase CSS diferente (“received-message”) al mensaje.

    Puedes ajustar los estilos CSS para las clases “your-message” y “received-message” según tus necesidades.

Comments are closed.