Я создал коллекцию под названием chat
. Теперь я могу сохранить чат в mongodb, нажав кнопку отправки, но как я могу отображать данные на лицевой стороне?
server.js:
const express = require('express');
const mongoose = require('mongoose');
const socket = require('socket.io');
const message = require('./model/message')
const app = express();
const mongoURI = require('./config/keys').mongoURI;
mongoose.connect(mongoURI, {useNewUrlParser: true})
.then()
.catch( err => console.info(err));
let db = mongoose.connection;
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('disconnect', function(){
console.info('User Disconnected');
});
let chat = db.collection('chat');
socket.on('SEND_MESSAGE', function(data){
let message = data.message;
let date = data.date;
// Check for name and message
if (message !== '' || date !== ''){
// Insert message
chat.insert({message: message, date:date}, function(){
socket.emit('RECEIVE_MESSAGE', [data]);
});
}
});
chat.find({}).limit(100).sort({_id:1}).toArray(function(err, res){
if (err){
throw err;
}
// Emit the messages
socket.emit('RECEIVE_MESSAGE', res);
});
})
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>
)
}
}
В chat.js я отображаю массив сообщений. В chat.js работает событие SEND_MESSAGE, т.е. я могу вставлять документы внутри mongodb, но как я могу вернуть данные и отобразить их с помощью socket.io?
Весь код: https://gist.github.com/aditodkar/0328809b636aca142ffb8cffdc320b3b
Скриншот:
@SensationSama gist.github.com/aditodkar/389cce1bb00113fa96b20b5df0e683a7
Возможно, вам нужно использовать строку 30 на вашем клиенте:
socket.on('RECEIVE_MESSAGE', data => {
addMessage(data);
});
но вы используете:
socket.emit('RECEIVE_MESSAGE', data => {
addMessage(data);
});
ОБНОВИТЬ:
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: []
};
this.sendMessage = this.sendMessage.bind(this);
this.addMessage = this.addMessage.bind(this);
this.socket = io('localhost:5000');
}
componentDidMount() {
this.socket.on('RECEIVE_MESSAGE', data => {
this.addMessage(data);
});
}
sendMessage(event) {
event.preventDefault();
if (this.state.message !== ''){
this.socket.emit('SEND_MESSAGE', {
message: this.state.message,
date: Date.now()
});
this.setState({ message: '', date: '' });
}
};
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>
)
}
}
Вы пытались поместить пустой объект в функцию поиска? найти({})
Ах да, теперь эта ошибка -> TypeError: Cannot read property 'limit' of undefined
исчез после добавления find({})
вместо find()
Но теперь проблема в том, что сообщение появляется на стороне клиента, но оно не отображается на экране, потому что я использую this.setState({ message: '', date: '' });
, поэтому отображается пустое сообщение, как я могу установить состояние даты и сообщения после отображения данных на экране?
Теперь я изменил код, как я могу отобразить сообщение на экране, а затем установитьState -> this.setState({ message: '', date: '' });
Вы используете setState внутри конструктора. См. stackoverflow.com/questions/34961853/…
В моем случае, где я должен установитьState для изменения сообщения и даты обратно на пустую строку ""?
См. Обновление выше. Не проверял, работает ли. Но это должно быть написано так.
Вашему интерфейсу нужен прослушиватель socket.on, чтобы он мог обрабатывать входящие излучения от одноранговых узлов.