Почему не отображается сообщение в чате?
Проблема заключается в том что когда я ввожу и отправляю сообщение, оно отправляется, появляется зеленый квадратик с информацией но без моего сообщения. Не могу понять почему оно не отображается. Полный код!
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);
});
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);
})
})
Источник: Stack Overflow на русском