У меня есть несколько основных c вопросов, на которые я не смог найти рабочих ответов, как бы глубоко я их ни искал.
мой вопрос в том, что я хотел отображать в реальном времени в имени пользователя, когда они это делают текстовые сообщения в комнате, например, whatsap group.i скопировали код чата из inte rnet, а затем я изменил библиотеки, добавив момент. js, после чего я добавил несколько кодов на сервер. js и скрипт. js но все еще имеет ошибку и не отображает время в тексте. поэтому, пожалуйста, помогите мне решить эту проблему, потому что я новичок в node.js. Буду признателен за вашу помощь и усилия
сервер. js
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const moment = require('moment');
app.set('views', './views')
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use(express.urlencoded({ extended: true }))
const rooms = { }
const botName = 'ChatCord Bot';
app.get('/', (req, res) => {
res.render('index', { rooms: rooms })
})
app.post('/room', (req, res) => {
if (rooms[req.body.room] != null) {
return res.redirect('/')
}
rooms[req.body.room] = { users: {} }
res.redirect(req.body.room)
// Send message that new room was created
io.emit('room-created', req.body.room)
})
app.get('/:room', (req, res) => {
if (rooms[req.params.room] == null) {
return res.redirect('/')
}
res.render('room', { roomName: req.params.room })
})
server.listen(3000)
io.on('connection', socket => {
socket.on('new-user', (room, name) => {
socket.join(room)
rooms[room].users[socket.id] = name
socket.to(room).broadcast.emit('user-connected', name)
})
socket.on('send-chat-message', (room, message) => {
socket.to(room).broadcast.emit('chat-message', { message: message, name: rooms[room].users[socket.id] })
})
socket.on('disconnect', () => {
getUserRooms(socket).forEach(room => {
socket.to(room).broadcast.emit('user-disconnected', rooms[room].users[socket.id])
delete rooms[room].users[socket.id]
})
})
})
function getUserRooms(socket) {
return Object.entries(rooms).reduce((names, [name, room]) => {
if (room.users[socket.id] != null) names.push(name)
return names
}, [])
}
Скрипт. js
const socket = io('http://localhost:3000')
const messageContainer = document.getElementById('message-container')
const roomContainer = document.getElementById('room-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')
if (messageForm != null) {
const name = prompt('What is your name?')
appendMessage('You joined')
socket.emit('new-user', roomName, name)
messageForm.addEventListener('submit', e => {
e.preventDefault()
const message = messageInput.value
appendMessage(`You: ${message}`)
socket.emit('send-chat-message', roomName, message)
messageInput.value = ''
})
}
socket.on('room-created', room => {
const roomElement = document.createElement('div')
roomElement.innerText = room
const roomLink = document.createElement('a')
roomLink.href = `/${room}`
roomLink.innerText = 'join'
roomContainer.append(roomElement)
roomContainer.append(roomLink)
})
socket.on('chat-message', data => {
appendMessage(`${data.name}: ${data.message}`)
io.to(user.room).emit('message', formatMessage(name, message) );
})
socket.on('user-connected', name => {
appendMessage(`${name} connected`)
})
socket.on('user-disconnected', name => {
appendMessage(`${name} disconnected`)
})
function appendMessage(message) {
const messageElement = document.createElement('div')
messageElement.innerText = message
messageContainer.append(messageElement)
}
function formatMessage(name, text) {
return {
name,
text,
time: moment().format('h:mm a')
};
}
room.e js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chat App</title>
<script>
const roomName = "<%= roomName %>"
</script>
<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
<script defer src="script.js"></script>
<style>
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
#message-container {
width: 80%;
max-width: 1200px;
}
#message-container div {
background-color: #CCC;
padding: 5px;
}
#message-container div:nth-child(2n) {
background-color: #FFF;
}
#send-container {
position: fixed;
padding-bottom: 30px;
bottom: 0;
background-color: white;
max-width: 1200px;
width: 80%;
display: flex;
}
#message-input {
flex-grow: 1;
}
</style>
</head>
<body>
<div id="message-container"></div>
<form id="send-container">
<input type="text" id="message-input">
<button type="submit" id="send-button">Send</button>
</form>
</body>
</html>
Это код, который я сделал до сих пор, пожалуйста, проверьте его, и я загрузил два изображения, одно для домашнего экрана, другое отображение существующей ошибки комнаты, где я получаю сообщение об ошибке
