Question

我正在从以前的项目（以前使用过的Bootstrap和Socket）重新创建一个基本的聊天室，而这一切我都在使用React组件来渲染聊天室（由用户名的输入区域，输入区域组成）文本内容，以及在其中插入用户名和消息的div应该一起出现，即“ BugsBun01：“ Whats up Doc ?!”。）我不确定是否应该将空的div放在聊天内容所属的单独的React组件中（我的最终目标是让父组件立即更新聊天区域，同时将插入字段中的内容（用户名和文本内容）写入数据库集合中）

我有Mongo数据库，其中包含聊天记录（用户名/消息）的集合，但我的问题是

A）如何使用axios将插入的用户名和文本存储在集合中，并且

B）一旦存储，我将如何允许父组件（React）将其立即从mongo数据库更新为空div（chatArea），以便在刷新页面时仍存在用户的旧聊天记录？

我需要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，因为您可以使用Socket连接来管理所有事情。

管理要与数据库一起播放的后端的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;

希望对您有帮助。

使用axios（响应前端）将数据发布到Mongo数据库

1 个答案: