Публикация данных в базе данных Mongo с помощью axios (React front end)

Question

Я воссоздаю базовый чат из предыдущего проекта (ранее использовались Bootstrap и Socket), и для этого я использую компонент React для рендеринга чата (который состоит из области ввода имени пользователя, области вводадля текстового содержимого и div, в котором имя пользователя и сообщение должны отображаться вместе, т.е. "BugsBun01:" Что такое Doc ?! "). Я не уверен, должен ли я иметь пустой div, где содержимое чата принадлежит в отдельном компоненте React( моя конечная цель - иметь родительский компонент для немедленного обновления области чата при записи содержимого из полей вставки (имя пользователя и текстовое содержимое) в коллекцию базы данных )

У меня есть Mongoбаза данных, которая содержит коллекцию для чатов (имя пользователя / сообщение), но мой вопрос

A) как мне использовать axios для хранения вставленного имени пользователя и текста в коллекции, и

B) после сохранения как разрешить родительскому компоненту (React) немедленно обновить их до пустогоdiv (chatArea) из базы данных mongo, чтобы при обновлении страницы старые чаты пользователей все еще присутствовали?

Нужно ли componentDidMount ()?

Нужно ли промежуточное программное обеспечение в моем файле server.js?(bodyparser и т. д.)

Я довольно новичок в использовании React js, так что терпите меня.Также это довольно простой чат, который фокусируется на функциональности.

class Chat extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            username: '',
            message: '',
            messages: []
        };
    }

    render() {
        return (       
            <div  id="myChat">
                <div id="status"></div>
                <input type="text" id="username" class="form-control" placeholder="Enter Username..." value={this.state.username} onChange={ev => this.setState({username: ev.target.value})}>
                </input>
                <div id="chat">
                    <br></br>
                    <div class="card">
                        <div id="messages" class="card-block">
                            {this.state.messages.map(message => {
                                return (
                                    <div>{message.author}: {message.message}</div>
                                )
                            })}
                        </div>
                    </div>
                    <br></br>
                </div>
                <textarea id="textarea" class="form-control" placeholder="Enter message..." value={this.state.message} onChange={ev => this.setState({message: ev.target.value})} ></textarea>
            </div>
        );
    }
}

Answer 1

Вам нужен ваш сервер, для этого не нужно использовать axios, чтобы вы могли управлять всем с помощью сокета.

Server.js, который управляет вашим сервером, который вы хотите играть с базой данных.

Server.js: реализует стартовый сокет.

const io = require('socket.io')();
const AVATAR = 'https://i1.wp.com/tricksmaze.com/wp-content/uploads/2017/10/Stylish-Girls-Profile-Pictures-11.jpg';
const NAME = '@zoya';

io.on('connection', function (client) {
    // console.log('client Id::', client.id)
    //chat message
    client.on('chat-message', function (messages) {
        let { message } = messages;
        let messageObj = {
            sender: NAME,
            avatar: AVATAR,
            message
        }
        client.emit('chat-message', messageObj);
    });

    //disconnects...
    client.on('disconnect', function () {
        console.log('disconnect client Id::', client.id)
    });
});

const port = 8000;
io.listen(port);
console.log('listening on port : ', port);

на стороне клиента.

'use static';

import React, { Component } from 'react';
import openSocket from 'socket.io-client';
const SERVER = `http://localhost:8000/`;
const NAME = '@asif';
const AVATAR = 'https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg';
const AVATAR1 = 'https://i1.wp.com/tricksmaze.com/wp-content/uploads/2017/10/Stylish-Girls-Profile-Pictures-11.jpg';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      typing: '',
      messages: []
    }
    this.socket = openSocket(SERVER);
    this.chatMessage = this.chatMessage.bind(this);
  }

  componentDidMount() {
    this.chatMessage();
  }

  chatMessage() {
    this.socket.on('chat-message', (messageObj) => {
      let { messages } = this.state;
      messages.push(messageObj);
      this.setState({ messages: messages })
    })
  }

  sendMessage = () => {
    let { messages, typing } = this.state;
    if (typing && typing !== '') {
      const message = typing;
      this.setState({ typing: '' })
      let messageObj = {
        sender: NAME,
        avatar: AVATAR,
        message
      }
      messages.push(messageObj);
      this.setState({ messages: messages })
      this.socket.emit('chat-message', messageObj);
    } else {
      alert(`Message can't empty`);
    }
  };

  renderItem() {
    return  this.state.messages.map((item,key)=>{
      return (
      <div >
        <image  src={ item.avatar } />
        <div }>
          <span >{item.sender}</span>
          <span >{item.message}</span>
        </div>
      </div>
    );
   })        
  }

  render() {

    return (
      <div >
        <div >
          <h1 >
            Chat App
          </h1>
        </div>
        {this.renderItem()}
          <div >
          <input 
             Type="text"  
             ref={ref => { this._messageInput = ref }}
             placeholder="Type Message..." 
             value={this.state.typing} 
             onChangeText={text => this.setState({ typing: text })}
           />
            <button onClick={() => this.sendMessage()}>
              <span >Send</span>
            </button>
          </div>
      </div>
    );
  }
}
export default App;

надеюсь, эта помощь будет полной для вас.