简体   繁体   中英

setting up username and time on my chat app

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM