Я создал приложение чата с использованием socket.io и храню массив сообщений. Каждый объект массива имеет message
и date
. Приложение чата работает только на стороне клиента, т.е. когда я обновляю страницу, все предыдущие чаты исчезают. Как я могу хранить сообщения программно? используя mongodb, nodejs / express и reactjs на стороне клиента?
Код:
server.js:
const express = require('express');
const mongoose = require('mongoose');
const socket = require('socket.io');
const app = express();
const db = require('./config/keys').mongoURI;
mongoose.connect(db, {useNewUrlParser: true})
.then(() => console.info('Mongodb connected...'))
.catch( err => console.info(err));
const port = 5000;
let server = app.listen(5000, function(){
console.info('server is running on port 5000')
});
let io = socket(server);
io.on("connection", function(socket){
console.info("Socket Connection Established with ID :"+ socket.id)
socket.on('SEND_MESSAGE', data => {
io.emit('RECEIVE_MESSAGE', data);
});
})
messageSchema.js:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Create Schema
const MessageSchema = new Schema({
message: {
type: String,
required: true
},
date: {
type: Date,
default: Date.now
}
});
module.exports = Message = mongoose.model('Message', MessageSchema);
chat.js:
import React, { Component } from 'react'
import './chat.css'
import io from "socket.io-client";
export default class Chat extends Component {
constructor(props){
super(props);
this.state = {
message: '',
date: '',
messages: []
};
const socket = io('localhost:5000');
this.sendMessage = event => {
event.preventDefault();
if (this.state.message !== ''){
socket.emit('SEND_MESSAGE', {
message: this.state.message,
date: Date.now()
});
this.setState({ message: '', date: '' });
}
};
socket.on('RECEIVE_MESSAGE', data => {
addMessage(data);
});
const addMessage = data => {
console.info(data);
this.setState({
messages: [...this.state.messages, data],
});
console.info(this.state.message);
console.info(this.state.messages);
};
}
render() {
return (
<div>
<div id = "status"></div>
<div id = "chat">
<div className = "card">
<div id = "messages" className = "card-block">
{this.state.messages.map((message, index) => {
return (
<div key = {index} className = "msgBox"><p className = "msgText">{message.message}</p></div>
)
})}
</div>
</div>
<div className = "row">
<div className = "column">
<input id = "inputmsg" type = "text" placeholder = "Enter Message...."
value = {this.state.message} onChange = {ev => this.setState({message: ev.target.value})}/>
</div>
<div className = "column2">
<button id = "send" className = "button" onClick = {this.sendMessage}>Send</button>
</div>
</div>
</div>
</div>
)
}
}
Скриншот:
Какие изменения я должен внести в server.js и chat.js, чтобы сообщения чата хранились в базе данных mongodb. Нужно ли мне создавать конечную точку API для хранения и получения предыдущих чатов? Примечание. Я установил mongodb в mlab с именем базы данных mongochat
и именем коллекции = chat
.
Вы можете попробовать отредактировать свой server.js и сделать что-то вроде этого:
var messageSchema = require("path/to/schema");
.
.
.
socket.on('SEND_MESSAGE', data => {
io.emit('RECEIVE_MESSAGE', data);
var newDate = new Date();
const message = new messageSchema({
'message': data,
'date': newDate
})
message.save((err, data) => {
if (err) //do something
else // do whatever you want
})
});
Вы также можете создать промежуточное программное обеспечение, чтобы предоставить вам простой сервис между MongoDB и APP.
Это специфично для мангуста, вы можете сделать вот так: message.save(function(err,data){ ... })
Я не смог получить эту строку ->
message.save((err, data) => {
message.save является специфичным для mongodb или socket.io?