https://i.imgur.com/3KmQ0ZM.png
Hello, I need help with my chat app project. I am trying to to save username and time in chatbox to the database I got the message down part. I am using mongoDB and socket.io. Here are the codes for server.js ( back end ) main.js ( front end ) and messages.js for the mongoDB schema
server.js
const path = require('path');
const http = require('http');
const express = require('express');
const socketio = require('socket.io');
const formatMessage = require('./utils/messages');
const { userJoin, getCurrentUser, userLeave, getRoomUsers }= require('./utils/users');
// MongoDB
const mongoose = require('mongoose')
const mongoDB = 'mongodb+srv://account:password@cluster0.5njb3.mongodb.net/message-database?retryWrites=true&w=majority'
const { MongoClient } = require('mongodb');
mongoose.connect(mongoDB, { useNewUrlParser: true, useUnifiedTopology: true }).then(() => console.log('connected')).catch(err => console.log(err));
const Msg = require('./models/messages');
async function main() {
// We'll add code here soon
}
const app = express();
const server = http.createServer(app)
const io = socketio(server);
// Set static folder
app.use(express.static(path.join(__dirname, 'public')));
const botName = 'ChatterBox';
// Run when client connects
io.on('connection', socket => {
Msg.find().then(result => {
socket.emit('output-messages', result)
})
socket.on('joinRoom', ({ username, room }) => {
const user = userJoin(socket.id, username, room);
socket.join(user.room);
// Welcome current user
socket.emit('message', formatMessage(botName, 'Welcome to ChatterBox!'));
// Broadcast when a user connects
socket.broadcast
.to(user.room)
.emit('message', formatMessage(botName, `${username} has joined the chat!`));
// Send users and room info
io.to(user.room).emit('roomUsers', {
room: user.room,
users: getRoomUsers(user.room)
});
});
// Listen for chatMessage
socket.on('chatMessage', (text) => {
const user = getCurrentUser(socket.id);
const message = new Msg({text:text});
message.save().then(() => {
io.to(user.room).emit('message', formatMessage(user.username, text))
})
})
// Runs when client disconnects
socket.on('disconnect', () => {
const user = userLeave(socket.id)
if(user) {
io.to(user.room).emit(
'message',
formatMessage(botName, `${user.username} has left the chat`)
);
// Send users and room info
io.to(user.room).emit('roomUsers', {
room: user.room,
users: getRoomUsers(user.room)
});
}
});
const PORT = 3000 || process.env.port;
server.listen(PORT, () => console.log(`Server running on port ${PORT}`)); // run a server and take in a port number
main.js
const chatForm = document.getElementById('chat-form');
const chatMessages = document.querySelector('.chat-messages');
const roomName = document.getElementById('room-name');
const userList = document.getElementById('users');
// Get username and room from URL
const { username, room } = Qs.parse(location.search, {
ignoreQueryPrefix: true
});
console.log( username, room);
const socket = io();
// Join chatroom
socket.emit('joinRoom', { username, room });
// Get room and users
socket.on('roomUsers', ({ room, users}) => {
outputRoomName(room);
outputUsers(users);
})
// Message from server
socket.on('message', message => {
console.log(message)
outputMessage(message)
// Scroll down
chatMessages.scrollTop = chatMessages.scrollHeight;
});
// mongoDB
socket.on('output-messages', message => {
console.log(message)
if (message.length) {
message.forEach((message) => {
outputMessage(message)
console.log(message)
});
}
});
// Message submit
chatForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get message text
const msg = e.target.elements.msg.value;
// Emit message to server
socket.emit('chatMessage', msg)
// Clear Input
e.target.elements.msg.value = '';
e.target.elements.msg.focus();
});
// Output message to DOM
function outputMessage(message) {
const div = document.createElement('div')
div.classList.add('message');
div.innerHTML = `<p class="meta"> ${message.username} <span>${message.time}</span></p>
<p class="text">
${message.text}
</p>`;
document.querySelector('.chat-messages').appendChild(div);
}
// Add room name to DOM
function outputRoomName(room) {
roomName.innerText = room;
}
// Add users to DOM
function outputUsers(users) {
userList.innerHTML = '';
users.forEach((user) => {
const li = document.createElement('li');
li.innerText = user.username;
userList.appendChild(li);
});
}
messages.js
const mongoose = require('mongoose');
var msgSchema = new mongoose.Schema( {
text: {
type: String,
required: true
}
})
var userSchema = new mongoose.Schema( {
username: {
type: String,
required: true
}
})
var timeSchema = new mongoose.Schema( {
time: {
type: String,
required: true
}
})
const Msg = mongoose.model('text', msgSchema)
const User = mongoose.model('username', userSchema)
const Time = mongoose.model('time', timeSchema)
module.exports = Msg, User, Time;
User.js
const users = [];
// Join user to chat
function userJoin(id, username, room) {
const user = { id, username, room };
users.push(user);
return user;
}
// Get current user
function getCurrentUser(id) {
return users.find(user => user.id === id)
}
// User leaves chat
function userLeave(id) {
const index = users.findIndex(user => user.id === id);
if(index !== -1) {
return users.splice(index, 1)[0];
}
}
// Get room users
function getRoomUsers(room) {
return users.filter(user => user.room === room);
}
module.exports = {
userJoin,
getCurrentUser,
userLeave,
getRoomUsers,
}
utils/messages.js
const moment = require('moment');
function formatMessage(username, text) {
return {
username,
text,
time: moment().format('h:mm a')
}
}
module.exports = formatMessage
First your function formatMessage
return a wrong value :
const moment = require('moment');
function formatMessage(username, text) {
return { /* if you put { that mean this is an Object and object work like
{
key: "value"
}
but you are just enterring values like an array :
["value", "username", "timestamp"]
*/
username,
text,
time: moment().format('h:mm a')
}
}
module.exports = formatMessage
so you should edit in this way :
const moment = require('moment');
function formatMessage(username, text) {
return {
username: username,
text: text,
time: time: moment().format('h:mm a')
}
}
module.exports = formatMessage
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.