Почему не отображается сообщение в чате?

Question

[Дмитрий Ярощук]

Проблема заключается в том что когда я ввожу и отправляю сообщение, оно отправляется, появляется зеленый квадратик с информацией но без моего сообщения. Не могу понять почему оно не отображается.

код

import io from "https://cdn.skypack.dev/socket.io-client@4.6.1";
import moment from "https://cdn.skypack.dev/moment@2.29.4";

const socket = io('http://localhost:3000');

const button = document.getElementById('send');
const input = document.getElementById('input');
let userId;

button.addEventListener('click', () => {
    if(input.value === '') {
        return;
    }
    socket.emit('message', input.value);
    input.value = '';
})

socket.on('welcome', id => {
    userId = id;
    console.log(userId)
})

socket.on('receiveMessage', response => {
    const isMessageFromUser = response.userId === userId;

    const chatContainer = document.createElement('div');
    chatContainer.classList.add('chatContainer');
    if(!isMessageFromUser){
        chatContainer.classList.add('left');
    }

    const message = document.createElement('div');
    message.classList.add('message');
    if(!isMessageFromUser) {
        message.classList.add('friend')
    }
    //messageInfo
    const messageBox = document.createElement('div');
    messageBox.classList.add('message_box');

    const username = document.createElement('p');
    username.innerText = 'Кирил';
    username.classList.add('username');

    const date = document.createElement('p');
    date.innerText = moment().format();
    date.classList.add('date');

    const messageContainer = document.createElement('div');
    messageContainer.classList.add('message_container');

    const textParagraph = document.createElement('p');
    textParagraph.innerText = response.message;

    chatContainer.appendChild(message);
    message.appendChild(messageBox);
    messageBox.appendChild(username);
    messageBox.appendChild(date);
    message.appendChild(messageContainer);

    const chatMessageContainer = document.getElementsByClassName('chat')[0];
    chatMessageContainer.appendChild(chatContainer);
});

Comments

[historydev]

где socket.on('message')?

[Дмитрий Ярощук]

Владимир, Вы имеет ввиду backEnd часть ?

import express from 'express';
import { Server } from 'socket.io'

const PORT = 3000;
const app = express();
const options = {
  cors: true,
  origin: ['http://localhost:3000'],
}

const server = app.listen(PORT, () => {
  console.log('Сервер запустился!');
})

const io = new Server(server, options);
app.use(express.static('./dist'))

app.get('/', (req, res) => {
  res.sendFile("index.html");
})

const messages = {}

io.on('connection', socket => {
  socket.emit('добрый день', socket.id);
  socket.join('room1');
  socket.emit('messages', messages);

  socket.on('message', message => {
    io.to('room1').emit('receiveMessage', {
      userId: socket.id,
      message: message
    })
  })

  socket.on('editMessage', (data) => {
    if (messages[data.messageId]) {
      message[data.messageId].message = data.message;
    }

    io.to('room1').emit('updateMessage', {
      messageId: data.messageId,
      message: messages[data.messageId]
    });
  })

  socket.on('deleteMessage', messageId => {
    delete messages[messageId];
    io.to('room1').emit('removeMessage', messageId);
  })
})

Answer 1

[historydev]

Вставьте элемент, вы его не используете:

const textParagraph = document.createElement('p');
    textParagraph.innerText = response.message;

Comments

[Дмитрий Ярощук]

Владимир не очень вас понимаю. Куда именно нужно вставить данный элемент textParagraph
Вы имеете ввиду таким образом message.appendChild(textParagraph)

[historydev]

Дмитрий Ярощук, Да, таким образом

[Дмитрий Ярощук]

Владимир не помогает, блок зеленый появляется а сообщение нет.
Я пробовал messageContainer.appendChild(textParagraph);
textParagraph.appendChild(response.message);
isMessageFromUser.appendChild(textParagraph);

[historydev]

Дмитрий Ярощук, учимся применять console.log => console.log(response). Посмотрите что вывело в консоль, если данные там есть, проблема в том как и куда вы вставляете свои блоки. Если данных нет, проблема с передачей сообщения